How to add modules in test for imports-loader configuration

Question

As I am converting legacy webapp to webpack based application, it uses mCustomScrollbar. As per documentation of mCustomScrollbar, to run with webpack need to use imports-loader. But syntax given in doc is compatible with older version of webpack, not with latest.

And as per doc of imports-loader, I am not able to add malihu-custom-scrollbar-plugin to test of modules-rules.

{
    test: /jquery-mousewheel/, /* This works fine */
    use: [{
            loader: "imports-loader",
            options: {
                imports: {
                    moduleName: "jquery",
                    name: "$"
                },
                wrapper: "window",
                additionalCode:
                    "var define = false;"
            }
        }]
},
{
    test: /malihu-custom-scrollbar-plugin/, /* Not working */
    use: [{
            loader: "imports-loader",
            options: {
                imports: {
                    moduleName: "jquery",
                    name: "$"
                },
                wrapper: "window",
                additionalCode:
                    "var define = false;"
            }
        }]
}

Gives below errors,

ERROR in ./node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css 8:6
Module parse failed: 'import' and 'export' may only appear at the top level (8:6)
File was processed with these loaders:
 * ./node_modules/imports-loader/dist/cjs.js

My vendor.js looks like below,

...
import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css";
...

import $ from "jquery";
window.jQuery = jQuery;
window.$ = $;

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

So how to get this working and how to combine two modules in same imports-loader, in my case jquery-mousewheel and malihu-custom-scrollbar-plugin.

score 1 · Answer 1 · answered Jul 28 '21 at 10:26

As .css file of mCustomScrollbar was creating issue with webpack's other loaders, added imports-loader configuration inline to vendor.js and removed from webpack config file.

Now vendor.js looks like below,

...
import "malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css";
...

import $ from "jquery";
window.jQuery = jQuery;
window.$ = $;

...
require("imports-loader?wrapper=window&!jquery-mousewheel");
require("imports-loader?wrapper=window&!malihu-custom-scrollbar-plugin");
...

With this mCustomScrollbar got working, let me know if there is better way to do it or this is correct approach.

How to add modules in test for imports-loader configuration

1 Answers1