Topic: Install pro with laravel 5.8

Leitner free asked 5 years ago


Hi,

I want to add MDB-pro package with npm. I allready have the token and saved the package on my server under node_modules/mdbootstrap-pro/

I added the line @import '~mdbootstrap-pro/scss/mdb.scss'; in my resources/sass/app.scss (which works without problems)

When I add the line require ('mdbootstrap-pro'); into resources/js/app.js the compilation does not work.

npm tells me that Module not found: Error: Can't resolve 'mdbootstrap-pro' in '/var/www/... after running npm run dev.

Any helping hands out there? :)


Bartłomiej Malanowski staff commented 5 years ago

Is this the full output from the console.log or there's something more? Could you please paste the full error message from your console?


Leitner free commented 5 years ago

There's not much more useful information. I will try this tutorial: https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/ Maybe it's working this way :)


Bartłomiej Malanowski staff commented 5 years ago

Did the Webpack Guid help?


Leitner free commented 5 years ago

No,@Bartłomiej Malanowski didn't help :(


Mikołaj Smoleński staff commented 5 years ago

Hi there,

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 answered 5 years ago


I have kinda the same issue, with the free version, using laravel 5.8 too. I'm updating from mdbootstrap 4.7.6 to 4.8.2 and after doing an "npm run prod" it's also spitting out the "cant resolve mdbootstrap" error.

I'm looking further in case i can fix it


michaelbelgium free commented 5 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 5 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 5 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 5 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 5 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 5 years ago

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


Leitner free commented 5 years ago

Thanks @michaelbelgium I will try it :)


Leitner free commented 5 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 5 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 5 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 5 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 5 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');



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: Yes
  • Provided link: No