Topic: MDB JQuery Pro SCSS, module not found
Expected behavior
Running the yarn encore dev compiles the JS and SCSS assets.
Actual behavior
Running webpack ...
ERROR Failed to compile with 1 errors 15:27:49
error in ./assets/scss/app.scss
Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/mdbootstrap-pro/scss/img/overlays/01.png' in 'C:\xampp\htdocs\mission\assets\scss'
@ ./assets/js/app.js 7:0-26
Entrypoint app [big] = runtime.js vendors~app.js app.js
error Command failed with exit code 2.
Here is my app.scss:
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~mdbootstrap-pro/scss/mdb-pro";
And here is my app.js:
import '../scss/app.scss';
import $ from 'jquery';
import 'popper.js';
import 'bootstrap';
import 'mdbootstrap-pro';
How can I fix this issue?
It seems to be working now bu adding $image-path: "~mdbootstrap-pro/img/"; in my _variables.scss file but a have an issue in the browser:
mdb.min.js:58 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Object.<anonymous> (mdb.min.js:58)
at Object.push../node_modules/mdbootstrap-pro/js/mdb.min.js (mdb.min.js:58)
at i (mdb.min.js:25)
at Module.<anonymous> (mdb.min.js:84)
at i (mdb.min.js:25)
at Object.push../node_modules/mdbootstrap-pro/js/mdb.min.js (mdb.min.js:53)
at i (mdb.min.js:25)
at mdb.min.js:25
at Object.<anonymous> (mdb.min.js:25)
at Object../node_modules/mdbootstrap-pro/js/mdb.min.js (vendors~app.js:31732)
Grzegorz Bujański staff commented 11 months ago
Have you used to any framework? Like Laravel?
Cyprien Aubry pro commented 11 months ago
Yes I currenlty use Symfony 4.4 with Webpack Encore for this project...
Grzegorz Bujański staff commented 11 months ago
Ok. Try this solution: https://mdbootstrap.com/support/jquery/how-to-build-mdb-v4-16-0-with-laravel-mix/ It's for laravel, but should help in symphony too.
Open
- User: Pro
- Premium support: No
- Technology: jQuery
- MDB Version: 4.17.0
- Device: PC
- Browser: Chrome
- OS: Windows 10 Pro
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 11 months ago
Hi. I understand you use symfony? try add
$image-path: "~mdbootstrap-pro/img/";before MDB import in your app.scss file.