Error while configuring CSS modules with webpack

Question

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
                    }
                }
            ]
        }

lavor · Accepted Answer · 2019-09-12 09:05:25Z

33

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]'
                }
            }
        }
    ]
}

answered Sep 12, 2019 at 9:05

lavor

1,8771 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Thor0o0 Over a year ago

Hey, thank you. I was able to fix it with this: "{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true } } ] }"

lavor Over a year ago

Yes, that is also correct. But if you want to also specify different version of localIdentName than the default one, try to use my suggestion.

Thor0o0 Over a year ago

Definitely. Thanks again.

Akbarsha Over a year ago

Lifesaver. New to react. Kinda lost with this settings. Thanks

Amirtha Rajan · Accepted Answer · 2020-02-14 13:10:26Z

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 replaing modules : 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

Jason Aller · Accepted Answer · 2020-07-28 18:21:57Z

4

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.

edited Jul 28, 2020 at 18:21

Jason Aller

3,66028 gold badges43 silver badges40 bronze badges

answered Jul 28, 2020 at 16:46

nithin samudrala

614 bronze badges

1 Comment

Jason Aller Over a year ago

Welcome to Stack Overflow. Code only answers can generally be improved by adding some explanation of how and why they work.

Kaushal Gabani · Accepted Answer · 2021-03-01 05:48:57Z

0

I fixed this issue with this code... `

Write this code in webpack.config.js file

{
test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true,
}

edited Mar 1, 2021 at 5:48

answered Feb 24, 2021 at 11:26

Kaushal Gabani

11 bronze badge

1 Comment

codingrose Over a year ago

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

Collectives™ on Stack Overflow

Error while configuring CSS modules with webpack

4 Answers 4

4 Comments

Comments

1 Comment

Write this code in webpack.config.js file

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Write this code in webpack.config.js file

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related