Topic: Install pro with laravel 5.8
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? :)
michaelbelgium answered 6 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 commented 6 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 6 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 commented 6 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 6 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 commented 6 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 6 years ago
Thanks for testing it. We'll update package.json soon
Leitner commented 6 years ago
Thanks @michaelbelgium I will try it :)
Leitner commented 6 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 6 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 commented 6 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 6 years ago
Please use direct paths to files temporarily. Our package will be updated soon to restore the last working configuration.
Best regards
michaelbelgium 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');
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.0
- Device: PC
- Browser: Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff pro premium commented 6 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 commented 6 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 pro premium commented 6 years ago
Did the Webpack Guid help?
Leitner commented 6 years ago
No,@Bartłomiej Malanowski didn't help :(
Mikołaj Smoleński staff commented 6 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