I'm completely new to laravel mix and npm in general so I'm at total loss here.
I'm using jquery plugins such as: https://github.com/noraesae/perfect-scrollbar
Now, I installed laravel mix since I needed laravel echo. Got that working and running up, but since then the jquery plugins are not loading, all I'm getting is:
Uncaught TypeError: $(...).perfectScrollbar is not a function
I don't know, is this perhaps that the jquery is now loaded async and Mix overwrites the one which I have set up /div> way? However, I noticed I could perhaps install this plugin via npm due to documentation via:
npm install perfect-scrollbar
I did that, it installed but how can I now possibly include it so that laravel mix loads it as well? I've spent the last 6 hours trying to find a way but I just can't understand how to do this. Any help would be greatly appreciated!
Ok... not sure I get where your problem is but here is a few things you can check...
First, mix will run webpack... wbpack.mix.js ... which will contain something like this if you did not change it:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, this will run webpack and compile your resources... in the case we are interested in here, app.js.
Did you include your library (perfect-scrollbar) in app.js as suggested in the perfect scrollbar doc?
var Ps = require('perfect-scrollbar');
You will also need to take care of the css for it as well.. by importing it in your app.scss ... if you are using sass as in the standard laravel install...
@import "node_modules/perfect-scrollbar/src/css/main.scss"
Rebuild and you should be good to go if you use Ps as the perfect-scrollbar object. You can also add it to the window instead... like window.Ps = require...
npm install just installs the package in your node_modules directory. Once there, you must import them into your compiled css and js application file.
Hope this helps.