MDB JQuery Pro SCSS, module not found


Topic: MDB JQuery Pro SCSS, module not found

Cyprien Aubry pro premium asked 3 months ago

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?


Grzegorz Bujański staff commented 3 months ago

Hi. I understand you use symfony? try add $image-path: "~mdbootstrap-pro/img/"; before MDB import in your app.scss file.


Cyprien Aubry pro premium answered 3 months ago

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 3 months ago

Have you used to any framework? Like Laravel?


Cyprien Aubry pro premium commented 3 months ago

Yes I currenlty use Symfony 4.4 with Webpack Encore for this project...


Grzegorz Bujański staff commented 3 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.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • 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