michaelbelgium free commented 4 years ago

It gives the error from v4.8.0, updating to 4.7.7 still worked.

After comparing the versions (https://github.com/mdbootstrap/bootstrap-material-design/compare/4.7.7...4.8.0) i noticed something in package.json => Is it possible its because of this line: https://github.com/mdbootstrap/bootstrap-material-design/blob/master/package.json#L4

Where's index.js ?

Edit: changed to "js/mdb.min.js" and its working.

Edit: https://github.com/mdbootstrap/bootstrap-material-design/pull/249

Mikołaj Smoleński staff commented 4 years ago

Hi there,

I've just tested that issue and can't find an error. I've added mdbootstrap 4.8.3 from npm and build passed successfully. Could you please share more examples of your laravel config or files code?

Best regards

michaelbelgium free commented 4 years ago

Hi Mikolaj,

I'm using laravel mix for my npm packages and the only stuff i have in my main js file (app.js) is

window.$ = window.jQuery = require('jquery');require('mdbootstrap/js/modules/waves');require('mdbootstrap');

The require function is looking at the "main" value of the package.json of mdbootstrap, which then resolves to module not found - as "index.js" doesnt exist in "node_modules/mdbootstrap" or aka in the repository

https://docs.npmjs.com/files/package.json#main

Edit: another workaround would be to write "require('mdbootstrap/js/mdb');" i bet

Mikołaj Smoleński staff commented 4 years ago

Have You tried to import specific files instead of whole mdbootstrap? Please try to use the following code and let me know if it helped:

import 'mdbootstrap-pro/css/mdb.min.css'; import 'mdbootstrap-pro/js/mdb.min.js';

Best regards

michaelbelgium free commented 4 years ago

Yes it does work when i do "require('mdbootstrap/js/mdb')" but technically it's suppose to work with just "require ('mdbootstrap');" too - and setting the right "main" file in package.json, no idea why it got changed in mdb 4.8.0 as index.js doesnt exist anyway

For @Leitner the fix would be "require ('mdbootstrap-pro/js/mdb');" if thats right

Mikołaj Smoleński staff commented 4 years ago

Thanks for testing it. We'll update package.json soon

Leitner free commented 4 years ago

Thanks @michaelbelgium I will try it :)

Leitner free commented 4 years ago

Sorry for the delay @michaelbelgium It works "better", but now I get this error:

Uncaught TypeError: Cannot read property 'addEventListener' of null at Object.Waves.init (app.js:49325) at Object. (app.js:49450) at Object../node_modules/mdbootstrap-pro/js/mdb.js (app.js:61589) at webpack_require (app.js:20) at Object../resources/js/app.js (app.js:64498) at webpack_require (app.js:20) at Object.0 (app.js:64599) at webpack_require (app.js:20) at app.js:84 at app.js:87

I tried to place the loading of app.js at the end of the body and now I get this error message:

app.js:61586 Uncaught ReferenceError: bsCustomFileInput is not defined at HTMLDocument. (app.js:61586)

Solved this with adding:

import bsCustomFileInput from 'mdbootstrap-pro/js/modules/vendor/bs-custom-file-input';

global.bsCustomFileInput = bsCustomFileInput;

to my app.js. Now it's loading without any errors but I don't know if this is the best way for including mdb...

Ozcan Arslan pro commented 4 years ago

Why not you put required .js and .css files into public folder respectively and link them normally. With this way i never had any problem and no need any compilation process unless you are not doing some custom changes from sources!

Leitner free commented 4 years ago

I'm using npm for about one year and it makes it easier for me to handle my js-libraries (updates, dependencies,...).

Mikołaj Smoleński staff commented 4 years ago

Please use direct paths to files temporarily. Our package will be updated soon to restore the last working configuration.

Best regards

michaelbelgium free commented 4 years ago

@Leitner Yeah i have that undefined error too, people already reported it here on the forum: https://mdbootstrap.com/support/jquery/bscustomfileinput-is-not-defined/And on github: https://github.com/mdbootstrap/bootstrap-material-design/issues/245

I fixed it by doing

window.bsCustomFileInput = require('mdbootstrap/js/modules/bs-custom-file-input');

before loading mdb js:

require('mdbootstrap/js/mdb');

But I dont seem to use the custom file input, so can't really test it. You can do the same with require(): require ('mdbootstrap-pro/js/modules/bs-custom-file-input');