Doesn't play nicely with Webpack

[mendelk]

This library doesn't work with Webpack without overrides. In particular, jquery-mousewheel doesn't get required properly,

From what I can tell, this is because, jquery-mousewheel is only required when RequireJS is deemed not present.

However, in the Webpack supports both the CommonJS and AMD formats, so this prevents the import of jquery-mousewheel.

In addition require("jquery-mousewheel")($) won't work if using Webpack, because, again, jquery-mousewheel will think we're using AMD in this situation.

(#306 might be relevant.)

[KamilSzot]

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.

[wzup]

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

[basvandenheuvel]

Yup, this is a pretty big problem for me. Any information?

[malihu]

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

[basvandenheuvel]

@malihu Thanks for your answer. I just implemented it in my webpack configuration like you said and it partly works. I do get the scrollbar but whenever i scroll using a mouse scroll wheel it scrolls kinda weird and in big chunks, however scrolling with a touch pad works fine...

( great work on this library by the way)

[malihu]

This is (normally) not related to webpack so I can't really say why this happens (depends on content).

[basvandenheuvel]

@malihu it also happens when I create a plain div with simple text inside. Also you adviced to use jquery-mousewheel, however when i look in the examples folder i don't see you use it in the example htmls.

[basvandenheuvel]

@malihu I just created a simple setup in a seperate index.html file and it scrolls perfect. The identical setup in my webpack project scrolls chunky. What version of the import-loader, scrollbar and jquery-mousewheel should i use?

Update: setting "scrollInertia" to zero makes the "jitter scrolling" go away.

[malihu]

@basvandenheuvel My advise on loading jquery-mousewheel separately is regarding webpack (using webpack is not the same with creating web pages manually). Plugin examples and demos are using the minified concatenated file following plugin's manual usage guide.

I cannot reproduce the chunky scrolling so I can't say why it happens in your implementation (I don't know what's your code like). You should use the latest versions of all scripts (installed via npm).

[malihu]

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

[Nanto-work]

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

[claw68]

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

For npm, i have to run:

npm install --save jquery-mousewheel

This would then add jquery-mousewheel on dependencies section of package.json

[swarty]

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();
}

[sheelsh]

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

[trovster]

To get this working with WebPack 5, I had to do the following;

Install imports-loader

npm install imports-loader --save-dev  

Updated WebPack configuration

{
  test: /jquery-mousewheel/,
  use: [
    {
      loader: 'imports-loader',
      options: {
        type: 'module',
        imports: 'jquery'
      }
    }
  ]
},
{
  test: /malihu-custom-scrollbar-plugin/,
  use: [
    {
      loader: 'imports-loader',
      options: {
        type: 'module',
        imports: 'jquery'
      }
    }
  ]
}

Then the following works;

import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js'