The right way to use Malihu Custom Scrollbar on Laravel

[allanvigiano]

Did Someone find the right way to install on Laravel Mix (from Laravel 5.8)? I'm trying this: webpack.mix.js mix.webpackConfig({ module: { loaders: [ { test: /jquery-mousewheel/, loader: "imports?define=>false&this=>window" }, { test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window" } ] } });

And this is the result after npm run watch:

@ watch C:\Users\allan\Code\allanvigiano-vue npm run development -- --watch

@ development C:\Users\allan\Code\allanvigiano-vue cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'loaders'. These properties are valid: object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (NormalModuleFactory). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\allan\AppData\Roaming\npm-cache_logs\2019-06-03T02_24_15_055Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ watch: npm run development -- --watch npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ watch script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\allan\AppData\Roaming\npm-cache_logs\2019-06-03T02_24_15_081Z-debug.log

My package.json: { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "animate.css": "^3.5.2", "axios": "^0.18", "bootstrap-sass": "^3.3.7", "cross-env": "^5.1", "font-awesome": "^4.7.0", "jquery": "^3.2", "js-cookie": "^2.2.0", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" }, "dependencies": { "imports-loader": "^0.8.0", "jquery-mousewheel": "^3.1.13" } }

Thanks all!

[lucasctd]

@allanvigiano Try this:

Then import it in your component (or anywhere you want) and run the function as shown below:

import $ from 'jquery'
import scrollbar from 'malihu-custom-scrollbar-plugin'

scrollbar($);

It worked for me.

[allanvigiano]

Hi, @lucasctd ! Thanks for answering me! This work for me too except when importing the node_modules\malihu-custom-scrollbar-plugin\jquery.mCustomScrollbar.css on style session of my vue component. The error after npm run watch is like:

98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 1 errors 11:31:21 AM This relative module was not found:

• ./mCSB_buttons.png in ./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/layout/Menu.vue?vu

Did you know something about this?

Thanks!

[lucasctd]

Why are u importing the css? In my case, only importing the js worked as expected. It seems the JavaScript function imports the css. I've also tested most of the themes and they worked fine.

[lucasctd]

I found a bug though if you try to create more the one instance of this lib, it will fail because each time you create an instance, it will restart the id counter, thus creating two (or more) scrollbars with the same ID.

[conanliuhuan]

just put these lines in your js file which you want to use scrollbar: require("imports-loader?this=>window!jquery-mousewheel"); require("imports-loader?this=>window!malihu-custom-scrollbar-plugin"); import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"; YOU NEED INSTALL imports-loader npm install imports-loader -D

[lucasctd]

@allanvigiano I think you should close this issue if the provided solutions worked 4 u.

[allanvigiano]

Sorry, @lucasctd. I'm not able to test this solution on the next weeks. I'm closing this issue and I'll make a feedback in the future. Thanks a lot you both, @lucasctd and @conanliuhuan .