{"id":20217,"library":"modernizr-loader","title":"modernizr-loader","description":"A webpack loader that enables importing custom Modernizr builds as modules. Version 1.0.1 requires modernizr ^3.1.0 as a peer dependency. Maintained by peerigon. Unlike manual builds, this integrates seamlessly with webpack's module system, allowing feature detection to be bundled conditionally. The loader reads a .modernizrrc (JSON or JS) configuration file. Breaking change in 1.0.0: Modernizr is no longer attached to window; must import as a module. Supports webpack 1 and 2, but webpack 1 requires json-loader for JSON configs.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/peerigon/modernizr-loader","tags":["javascript","modernizr","webpack","loader"],"install":[{"cmd":"npm install modernizr-loader","lang":"bash","label":"npm"},{"cmd":"yarn add modernizr-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add modernizr-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to generate Modernizr build from configuration. Must be installed as a peer dependency.","package":"modernizr","optional":false}],"imports":[{"note":"With webpack, the alias resolves to your custom build. Use ESM import for tree-shaking.","wrong":"const Modernizr = require('modernizr');","symbol":"modernizr module (default import)","correct":"import Modernizr from 'modernizr';"},{"note":"File must be named .modernizrrc (with optional .json or .js extension) and in the project root or aliased.","wrong":"// Using a file named .modernizrrc.yml or without proper loader config","symbol":".modernizrrc config file","correct":"// .modernizrrc (JSON or JS) with feature-detects and options"},{"note":"Must include the $ for exact match; otherwise imports like 'modernizr/...' also match.","wrong":"resolve: { alias: { modernizr: path.resolve(__dirname, '.modernizrrc') } }","symbol":"webpack alias for modernizr","correct":"resolve: { alias: { modernizr$: path.resolve(__dirname, 'path/to/.modernizrrc') } }"}],"quickstart":{"code":"// .modernizrrc\n{\n  \"minify\": true,\n  \"options\": [\"setClasses\"],\n  \"feature-detects\": [\"test/svg\", \"test/promises\"]\n}\n\n// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  module: {\n    loaders: [\n      {\n        test: /\\.modernizrrc\\.js$/,\n        loader: \"modernizr\"\n      },\n      {\n        test: /\\.modernizrrc(\\.json)?$/,\n        loader: \"modernizr!json\"\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      modernizr$: path.resolve(__dirname, \".modernizrrc\")\n    }\n  }\n};\n\n// app.js\nimport Modernizr from 'modernizr';\n\nif (!Modernizr.svg) {\n  // fallback\n}","lang":"javascript","description":"Shows setup of .modernizrrc config, webpack loader rules for JS and JSON configs, alias, and usage in app."},"warnings":[{"fix":"Change from using window.Modernizr to import Modernizr from 'modernizr'.","message":"Modernizr is no longer attached to window. Must import as a module.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add 'modernizr!json' loader chain for .modernizrrc(.json)? files, or switch to JS config with .modernizrrc.js.","message":"JSON configuration files require json-loader in webpack 1.","severity":"gotcha","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Refer to Modernizr's config-all.json for supported options and feature-detects.","message":"The 'options' field in config is deprecated? Check Modernizr docs. Some options may not be supported.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use 'modernizr$' in alias key.","message":"Alias must end with $ to avoid matching other packages starting with 'modernizr'.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add resolve.alias.modernizr$ pointing to your .modernizrrc file.","cause":"Missing alias or incorrect alias path in webpack config.","error":"Module not found: Error: Can't resolve 'modernizr'"},{"fix":"Add loader rules for .modernizrrc(.js)? and .modernizrrc(.json)? as shown in quickstart.","cause":"Missing loader rule for .modernizrrc files.","error":"You may need an appropriate loader to handle this file type."},{"fix":"Run npm install --save-dev modernizr","cause":"modernizr npm package not installed.","error":"Cannot find module 'modernizr'"},{"fix":"Rename to .modernizrrc.js and use loader: 'modernizr' (no json). Or for JSON, keep .modernizrrc.json and use 'modernizr!json' loader.","cause":".modernizrrc is a JavaScript file but using JSON loader without handling JS.","error":"Unexpected token . in JSON at position 0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}