Registry /
devops / auto-css-modules-webpack-plugin
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.
AutoCSSModulesWebpackPlugin
✓ const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin')
✗ import AutoCSSModulesWebpackPlugin from 'auto-css-modules-webpack-plugin'
Package does not ship ESM; CommonJS require is mandatory.
AutoCSSModulesWebpackPlugin
✓ const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin').default
✗ const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin')
If using TypeScript with esModuleInterop, direct require works; otherwise .default may be needed. Check your setup.
webpack configuration
✓ const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin'); module.exports = { plugins: [new AutoCSSModulesWebpackPlugin({ queryFlag: 'modules', extraExtnames: [] })] }
✗ module.exports = { plugins: [new AutoCSSModulesWebpackPlugin()] }
Default options work; but extraExtnames must be provided if using non-standard extensions beyond defaults.
Webpack config with css-loader oneOf rules: CSS files with ?modules query get CSS Modules enabled, others treated as global CSS. Plugin auto-adds ?modules to imports.
const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },
module: {
rules: [
{
test: /\.css$/i,
oneOf: [
{
resourceQuery: /modules/,
use: ['style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]--[hash:base64:5]' } } }]
},
{ use: ['style-loader', { loader: 'css-loader', options: {} }] }
]
}
]
},
plugins: [new AutoCSSModulesWebpackPlugin({ queryFlag: 'modules', extraExtnames: [] })]
};
Debug
Known issues
gotchaPlugin cannot be used with webpack <4.46.0 or <5.20.0 due to peer dependency range.fixUpgrade webpack to version 4.46.0+ or 5.20.0+.
affects: <4.46.0 || <5.20.0
gotchaDefault extname list is fixed and cannot be overwritten; extraExtnames appends to the list but does not replace defaults.fixIf you need to exclude a default extension, consider a custom webpack rule instead.
affects: >=1.0.0
deprecatedThe package is low maintenance; last update March 2023. May not support future webpack versions.fixConsider alternatives like @umijs/babel-plugin-auto-css-modules for newer setups.
affects: >=1.0.0
Errors
Common errors & fixes
Cannot find module 'auto-css-modules-webpack-plugin'
Package not installed or missing from node_modules.
fixRun `npm install --save-dev auto-css-modules-webpack-plugin`.
TypeError: AutoCSSModulesWebpackPlugin is not a constructor
Using import statement instead of require, or missing .default.
fixUse `const AutoCSSModulesWebpackPlugin = require('auto-css-modules-webpack-plugin');`. Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type
css-loader not configured correctly or oneOf rules missing.
fixAdd 'style-loader' and 'css-loader' to the webpack config as shown in quickstart.
Audit
Dependencies
webpackrequiredpeer dependency - plugin hooks into webpack compiler