Not working with webpack@^5.0.0

[ayxos]

The new webpack version is not compatible with this loader, the compiler throws

ERROR in ./app/vendor/modernizrrc.json
Module build failed (from ../node_modules/modernizr-loader/index.js):
TypeError: this.exec is not a function
    at Object.module.exports (/Users/user/project/node_modules/modernizr-loader/index.js:24:26)
 @ ./app/vendor/modernizr-custom.js 2:0-33 2:1372-1389 2:1442-1459 2:1516-1533 2:1586-1603 2:1610-1624 2:1626-1640 2:1642-1658 2:1660-1677

Any idea why?

[efremenkovan]

@ayxos this.exec has been removed from webpack 5 loader's context.

this.exec This has been removed from loader context

MIGRATION: This can be implemented in the loader itself

Not sure if this is the best approach, but I solved this just a webpack 5 changelog offers to:

module.exports = function (config) {
    if (typeof this.cacheable === 'function') {
        this.cacheable();
    }

+    var exec = function(code, filename) {
+      var _module = new NativeModule(filename, this);
+      _module.paths = NativeModule._nodeModulePaths(this.context);
+      _module.filename = filename;
+      _module._compile(code, filename);
+      return _module.exports;
+    }
+    exec = exec.bind(this);

    var cb = this.async();

-    modernizr.build(this.exec(config, this.resource), function (output) {
+    modernizr.build(exec(config, this.resource), function (output) {
        cb(null, wrapOutput(output));
    });
};

P.S. You should also add var NativeModule = require("module");.

[richardcalahan]

This solution worked for me.

Looks as though this project is dead, but I don't see a decent alternative. I used patch-package to ensure the change persists.

[cascornelissen]

I ran into this issue as well. All Webpack loaders and plugins that handle Modernizr builds don't seem to be updated for Webpack 5 or are no longer maintained at all anymore.

There's a guide within the official Webpack documentation on how to set this up with val-loader but it requires quite a big custom implementation. Since I needed this in multiple projects I have abstracted this away into (shameless plug) val-loader-modernizr, feel free to use it if you're using Webpack 5 ✌🏼

[MikaelLambert]

I was able to solve my issue by removing modernizr-loader completely and switching to @media queries and @supports rules in CSS. Your mileage may vary, but this is a reminder that things have changed and IE11 support has basically ended for most public websites.

Here's an example that I'm using to style on touch devices

@media (hover: none) {
  a {
    background: yellow; /* Example touch only style */
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover https://developer.mozilla.org/en-US/docs/Web/CSS/@supports https://github.com/peerigon/modernizr-loader/issues/50#issuecomment-707173045

[caseyjhol]

Looks like there's a working fork here: https://github.com/sectsect/modernizr-loader.