Registry /
devops / webpack-modernizr-loader
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default
✓ module.exports = { module: { rules: [{ test: /\.modernizrrc\.js$/, loader: 'webpack-modernizr-loader' }] } }
✗ const ModernizrLoader = require('webpack-modernizr-loader');
Used as a Webpack loader, not a library to import directly. Configure in webpack.config.js rule.
require('modernizr')
✓ const modernizr = require('modernizr');
✗ import modernizr from '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
✓ options: { 'feature-detects': ['test/css/flexbox'] }
✗ options: { featureDetects: ['test/css/flexbox'] }
Options use the exact keys from Modernizr config-all.json (e.g. 'feature-detects' kebab-case).
useConfigFile
✓ options: { useConfigFile: true }
✗ options: { configFile: true }
To use a separate config file, set 'useConfigFile: true' and point alias to the file, not directly passing config.
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');
}
Errors
Common errors & fixes
Module parse failed: Unexpected character '#' (1:0)
Loader not properly configured; webpack is trying to parse the Modernizr output as a module.
fixEnsure the rule uses 'webpack-modernizr-loader' and the alias file exists.
Cannot find module 'modernizr'
The 'modernizr' alias is not resolved correctly.
fixCheck the alias path in webpack config: alias: { modernizr$: path.resolve(__dirname, 'path/to/file.js') } Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
Webpack 4+ requires 'module.rules' format; using 'loaders' or 'module.loaders' is deprecated.
fixUse 'module.rules' array with 'test' and 'loader' properties.
Audit
Dependencies
modernizrrequiredPeer dependency; required to generate the Modernizr build.
webpackrequiredPeer dependency; loader is designed for Webpack 4+.