Error while configuring CSS modules with webpack

Related searches

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

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

How to configure CSS and CSS modules in webpack, How to configure basic CSS in a webpack project using style-loader and css- If you wouldn't have configured css-loader you would get an cryptic error like this� The way I like to do it is to use CSS modules only for files ending in *.module.css, for example modal.module.css, and all other *.css files are global. To configure this we’ll add two loaders to our webpack config: one for CSS and one for CSS modules and we’ll use the include and exclude keywords for separating the two.

css-loader, You can also use the css-loader results directly as a string, such as in Angular's component style. webpack.config.js module.exports = { module: { rules:� Enables/Disables CSS Modules and their configuration. The modules option enables/disables the CSS Modules specification and setup basic behaviour. Using false value increase performance because we avoid parsing CSS Modules features, it will be useful for developers who use vanilla css or use other technologies. webpack.config.js

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.

webpack config question/issue � Issue #9 � css-modules/webpack , On this line in the webpack config in this repo, why will webpack fail if I modify it simply to try to list the Gives me Error: Cannot find module ". Configuration. Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index.js and will output the result in dist/main.js minified and optimized for production.

CSS modules giving error with eot files � Issue #239 � css-modules , css loaders in webpack. I was not getting any errors while using that. Now when I include lines for using css modules in my config file like this� Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. Below is an example configuration of mini-css for HMR use with CSS modules. While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names.

Getting Started with CSS Modules, We'll also need a webpack.config.js file that sits at the root of our project, outside That's the error that Webpack will reveal if it can't find an imported module. Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Comments
  • Hey, thank you. I was able to fix it with this: "{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true } } ] }"
  • 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.
  • Definitely. Thanks again.
  • Lifesaver. New to react. Kinda lost with this settings. Thanks
  • Welcome to Stack Overflow. Code only answers can generally be improved by adding some explanation of how and why they work.