Error while configuring CSS modules with webpack
Solution 1
Syntax of css-loader options has changed in version 3.0.0. localIdentName
was moved under modules
option.
I don't know why option importLoaders
is returning error if specified in inline syntax. But non-inline syntax is working, try to replace css loader configuration in your webpack config with this:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
}
]
}
Solution 2
I had this issue and fixed it with the below solution
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.<br>
- options has an unknown property 'localIndentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
- In the latest version of react the webpack.config.js has
localIdentName
nested in modules. - Move your
localIdentName: '[name]__[local]___[hash:base64:5]'
to modules by replaingmodules : true
with the below format
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { localIdentName: '[name]__[local]___[hash:base64:5]' } }
This should fix the issue
Solution 3
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
// modules:true,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:{
localIdentName:'[name]__[local]__[hash:base64:5]',
}
}),
Use this code it's working for me.
Thor0o0
Updated on July 27, 2022Comments
-
Thor0o0 almost 2 years
I am trying to configure CSS modules with webpack but I get an error.
I have checked the other answers here on stackoverflow but none of the solutions have made it work for me so far.
I have added the loader as the docs suggest but it still shows an error.
This is my webpack.configuration.js file.
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'index_bundle.js', publicPath: '/' }, module: { rules: [ { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }, devServer: { historyApiFallback: true, }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }
The error I get is this.
ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./src/index.css) Module build failed (from ./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'localIdentName'. These properties are valid: object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? } - options.importLoaders should be one of these: boolean | number -> Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders). Details: * options.importLoaders should be a boolean. * options.importLoaders should be a number. at validate (C:\Users\Arjun\Desktop\manpro\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:49:11) at Object.loader (C:\Users\Arjun\Desktop\manpro\node_modules\css-loader\dist\index.js:34:28) @ ./src/index.css 1:14-150 20:4-31:5 23:25-161 @ ./src/index.js ERROR in ./src/components/layout/Navbar.css (./node_modules/css-loader/dist/cjs.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./src/components/layout/Navbar.css) Module build failed (from ./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'localIdentName'. These properties are valid
update: I was able to fix it with this:
{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true } } ] }