malihu-custom-scrollbar-plugin: Doesn't play nicely with Webpack

try to resolve this problem in webpack, i am comment some lines in mCustomSrollBar.js file.

Problem consist of that file cant find route to node_modules folder for load mousewheel file, so there is a fast solution:

function(init){
    var _rjs=typeof define==="function" && define.amd, /* RequireJS */
        _njs=typeof module !== "undefined" && module.exports, /* NodeJS */
        _dlp=("https:"==document.location.protocol) ? "https:" : "http:", /* location protocol */
        _url="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js";
    $.event.special.mousewheel || $("head").append(decodeURI("%3Cscript src="+_dlp+"//"+_url+"%3E%3C/script%3E"));

    // if(!_rjs){
        // if(_njs){
        //  require("jquery-mousewheel")($);
        // }else{
        //  /* load jquery-mousewheel plugin (via CDN) if it's not present or not loaded via RequireJS 
        //  (works when mCustomScrollbar fn is called on window load) */

        // }
    // }
    init();
}

Seven month left from the date the issue appeared here. Any support for Webpack?

If anyone trying to integrate mCustomScrollbar with Webpack 5 check below link, as I faced similar issue with this plugin and as per docs of this plugin, in latest webpack module-loaders has been removed.

https://stackoverflow.com/a/68558662/2370769

./src/js/jquery.mCustomScrollbar.concat.min.js Module not found: Error: Can’t resolve ‘jquery-mousewheel’

I’ve updated npm to include jquery.mCustomScrollbar.concat.min.js so you can use this file if you want.

I’m working on it. This is what I found so far:

At the moment I cannot remove the RequireJS condition to load mousewheel plugin because it conflicts with other module-loaders/managers. It’s best to load jquery-mousewheel separately (not automatically via jquery.mCustomScrollbar.js):

require("jquery-mousewheel")($);
require("malihu-custom-scrollbar-plugin")($);

jquery-mousewheel plugin requires webpack imports-loader (install: npm install imports-loader). This is because UMD (Universal Module Definition) for jQuery plugins conflicts with webpack (#833).

Next version of custom scrollbar (3.1.5) will also have support for AMD so it’ll also require imports-loader.

After imports-loader installation, add the following in your webpack.config.js:

module.exports = {
  module: {
    loaders: [
      { test: /jquery-mousewheel/, loader: "imports?define=>false&this=>window" },
      { test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window" }
    ]
  }
};

This way you can use require("jquery-mousewheel")($); and require("malihu-custom-scrollbar-plugin")($);.

On the next plugin version, I’m planning on adding in NPM the minified-concatenated plugin file which includes the mousewheel plugin. So you’ll be able to use it by adding the following in your config:

module.exports = {
  resolve: {
    alias: {
      'malihu-custom-scrollbar-plugin': 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js'
    }
  },
  module: {
    loaders: [
      { test: /malihu-custom-scrollbar-plugin/, loader: "imports?define=>false&this=>window" }
    ]
  }
};

Hope this helps

I found out (while working on something else) that you need to require jquery-mousewheel following way to be loaded as CommonJS module:

require('imports?define=>false!jquery-mousewheel/jquery.mousewheel')($)

You’ll need to have imports-loader installed (with npm) into your webpack to be able to do that.