{"id":20800,"library":"webpack-modernizr-loader","title":"webpack-modernizr-loader","description":"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'.","status":"maintenance","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/itgalaxy/webpack-modernizr-loader","tags":["javascript","modernizr","webpack","loader"],"install":[{"cmd":"npm install webpack-modernizr-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-modernizr-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-modernizr-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required to generate the Modernizr build.","package":"modernizr","optional":false},{"reason":"Peer dependency; loader is designed for Webpack 4+.","package":"webpack","optional":false}],"imports":[{"note":"Used as a Webpack loader, not a library to import directly. Configure in webpack.config.js rule.","wrong":"const ModernizrLoader = require('webpack-modernizr-loader');","symbol":"default","correct":"module.exports = { module: { rules: [{ test: /\\.modernizrrc\\.js$/, loader: 'webpack-modernizr-loader' }] } }"},{"note":"Modernizr is typically required in your source code after the loader replaces the module. ES import may not work due to CommonJS output.","wrong":"import modernizr from 'modernizr';","symbol":"require('modernizr')","correct":"const modernizr = require('modernizr');"},{"note":"Options use the exact keys from Modernizr config-all.json (e.g. 'feature-detects' kebab-case).","wrong":"options: { featureDetects: ['test/css/flexbox'] }","symbol":"options","correct":"options: { 'feature-detects': ['test/css/flexbox'] }"},{"note":"To use a separate config file, set 'useConfigFile: true' and point alias to the file, not directly passing config.","wrong":"options: { configFile: true }","symbol":"useConfigFile","correct":"options: { useConfigFile: true }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.modernizrrc\\.js$/,\n        loader: 'webpack-modernizr-loader',\n        options: {\n          'feature-detects': [\n            'test/css/flexbox',\n            'test/es6/promises',\n            'test/serviceworker'\n          ]\n        }\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      modernizr$: path.resolve(__dirname, 'path/to/empty-alias-file.js')\n    }\n  }\n};\n\n// In your source code:\nconst modernizr = require('modernizr');\nif (modernizr.flexbox) {\n  console.log('Flexbox supported');\n}","lang":"javascript","description":"Demonstrates configuring webpack-modernizr-loader with inline options and alias to load a custom Modernizr build."},"warnings":[{"fix":"Upgrade Webpack to v4 or later.","message":"Version 4.0.0 dropped support for Webpack 1 and 2, requires Webpack v4.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update loader-utils to ~1.0.0 or later.","message":"Version 3.0.0 removed support for Webpack v1 and changed minimum loader-utils version.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Use `useConfigFile: true` or pass options in loader configuration.","message":"The `config` option for passing Modernizr settings directly was removed in v2.0.0. Use `useConfigFile` or inline options.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure the file exists at the alias path, even if empty.","message":"The empty alias file must exist and can be a placeholder; commenting 'Please do not delete this file' is recommended.","severity":"gotcha","affected_versions":"*"},{"fix":"Use 'feature-detects' not 'featureDetects', 'minify' not 'minify', etc.","message":"Option keys must exactly match those in Modernizr's config-all.json (kebab-case). Using camelCase will be silently ignored.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the rule uses 'webpack-modernizr-loader' and the alias file exists.","cause":"Loader not properly configured; webpack is trying to parse the Modernizr output as a module.","error":"Module parse failed: Unexpected character '#' (1:0)"},{"fix":"Check the alias path in webpack config: alias: { modernizr$: path.resolve(__dirname, 'path/to/file.js') }","cause":"The 'modernizr' alias is not resolved correctly.","error":"Cannot find module 'modernizr'"},{"fix":"Use 'module.rules' array with 'test' and 'loader' properties.","cause":"Webpack 4+ requires 'module.rules' format; using 'loaders' or 'module.loaders' is deprecated.","error":"Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}