webpack-modernizr-loader

5.0.0 verified Sat Apr 25 auth: no javascript maintenance

A Webpack loader that bundles a custom Modernizr build into your bundle. Current stable version is 5.0.0. Release cadence is irregular; last major version 4.0.0 was released in 2018 and 5.0.0 is the latest, but no recent activity. Key differentiator: allows Modernizr feature detection to be included in a Webpack bundle without manual downloads or separate build steps. Alternatives include manual Modernizr download or other loaders like 'modernizr-webpack-plugin'.

Common errors

error Module parse failed: Unexpected character '#' (1:0) ↓

cause Loader not properly configured; webpack is trying to parse the Modernizr output as a module.

fix

Ensure the rule uses 'webpack-modernizr-loader' and the alias file exists.

error Cannot find module 'modernizr' ↓

cause The 'modernizr' alias is not resolved correctly.

fix

Check the alias path in webpack config: alias: { modernizr$: path.resolve(__dirname, 'path/to/file.js') }

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

cause Webpack 4+ requires 'module.rules' format; using 'loaders' or 'module.loaders' is deprecated.

fix

Use 'module.rules' array with 'test' and 'loader' properties.

Warnings

breaking Version 4.0.0 dropped support for Webpack 1 and 2, requires Webpack v4. ↓

fix Upgrade Webpack to v4 or later.

breaking Version 3.0.0 removed support for Webpack v1 and changed minimum loader-utils version. ↓

fix Update loader-utils to ~1.0.0 or later.

deprecated The `config` option for passing Modernizr settings directly was removed in v2.0.0. Use `useConfigFile` or inline options. ↓

fix Use `useConfigFile: true` or pass options in loader configuration.

gotcha The empty alias file must exist and can be a placeholder; commenting 'Please do not delete this file' is recommended. ↓

fix Ensure the file exists at the alias path, even if empty.

gotcha Option keys must exactly match those in Modernizr's config-all.json (kebab-case). Using camelCase will be silently ignored. ↓

fix Use 'feature-detects' not 'featureDetects', 'minify' not 'minify', etc.

Install

npm install webpack-modernizr-loader

yarn add webpack-modernizr-loader

pnpm add webpack-modernizr-loader

Imports

default

wrong

const ModernizrLoader = require('webpack-modernizr-loader');

correct

module.exports = { module: { rules: [{ test: /\.modernizrrc\.js$/, loader: 'webpack-modernizr-loader' }] } }

Used as a Webpack loader, not a library to import directly. Configure in webpack.config.js rule.

require('modernizr')
wrong
```
import modernizr from 'modernizr';
```
correct
```
const modernizr = require('modernizr');
```
Modernizr is typically required in your source code after the loader replaces the module. ES import may not work due to CommonJS output.
options
wrong
```
options: { featureDetects: ['test/css/flexbox'] }
```
correct
```
options: { 'feature-detects': ['test/css/flexbox'] }
```
Options use the exact keys from Modernizr config-all.json (e.g. 'feature-detects' kebab-case).
useConfigFile
wrong
```
options: { configFile: true }
```
correct
```
options: { useConfigFile: true }
```
To use a separate config file, set 'useConfigFile: true' and point alias to the file, not directly passing config.

Quickstart

Demonstrates configuring webpack-modernizr-loader with inline options and alias to load a custom Modernizr build.

// webpack.config.js
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.modernizrrc\.js$/,
        loader: 'webpack-modernizr-loader',
        options: {
          'feature-detects': [
            'test/css/flexbox',
            'test/es6/promises',
            'test/serviceworker'
          ]
        }
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, 'path/to/empty-alias-file.js')
    }
  }
};

// In your source code:
const modernizr = require('modernizr');
if (modernizr.flexbox) {
  console.log('Flexbox supported');
}