modernizr-loader

1.0.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module not found: Error: Can't resolve 'modernizr' ↓

cause Missing alias or incorrect alias path in webpack config.

fix

Add resolve.alias.modernizr$ pointing to your .modernizrrc file.

error You may need an appropriate loader to handle this file type. ↓

cause Missing loader rule for .modernizrrc files.

fix

Add loader rules for .modernizrrc(.js)? and .modernizrrc(.json)? as shown in quickstart.

error Cannot find module 'modernizr' ↓

cause modernizr npm package not installed.

fix

Run npm install --save-dev modernizr

error Unexpected token . in JSON at position 0 ↓

cause .modernizrrc is a JavaScript file but using JSON loader without handling JS.

fix

Rename to .modernizrrc.js and use loader: 'modernizr' (no json). Or for JSON, keep .modernizrrc.json and use 'modernizr!json' loader.

Warnings

breaking Modernizr is no longer attached to window. Must import as a module. ↓

fix Change from using window.Modernizr to import Modernizr from 'modernizr'.

gotcha JSON configuration files require json-loader in webpack 1. ↓

fix Add 'modernizr!json' loader chain for .modernizrrc(.json)? files, or switch to JS config with .modernizrrc.js.

deprecated The 'options' field in config is deprecated? Check Modernizr docs. Some options may not be supported. ↓

fix Refer to Modernizr's config-all.json for supported options and feature-detects.

gotcha Alias must end with $ to avoid matching other packages starting with 'modernizr'. ↓

fix Use 'modernizr$' in alias key.

Install

npm install modernizr-loader

yarn add modernizr-loader

pnpm add modernizr-loader

Imports

modernizr module (default import)
wrong
```
const Modernizr = require('modernizr');
```
correct
```
import Modernizr from 'modernizr';
```
With webpack, the alias resolves to your custom build. Use ESM import for tree-shaking.
.modernizrrc config file
wrong
```
// Using a file named .modernizrrc.yml or without proper loader config
```
correct
```
// .modernizrrc (JSON or JS) with feature-detects and options
```
File must be named .modernizrrc (with optional .json or .js extension) and in the project root or aliased.

webpack alias for modernizr

wrong

resolve: { alias: { modernizr: path.resolve(__dirname, '.modernizrrc') } }

correct

resolve: { alias: { modernizr$: path.resolve(__dirname, 'path/to/.modernizrrc') } }

Must include the $ for exact match; otherwise imports like 'modernizr/...' also match.

Quickstart

Shows setup of .modernizrrc config, webpack loader rules for JS and JSON configs, alias, and usage in app.

// .modernizrrc
{
  "minify": true,
  "options": ["setClasses"],
  "feature-detects": ["test/svg", "test/promises"]
}

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

module.exports = {
  module: {
    loaders: [
      {
        test: /\.modernizrrc\.js$/,
        loader: "modernizr"
      },
      {
        test: /\.modernizrrc(\.json)?$/,
        loader: "modernizr!json"
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, ".modernizrrc")
    }
  }
};

// app.js
import Modernizr from 'modernizr';

if (!Modernizr.svg) {
  // fallback
}