Unable to use css module in create-react-app

Question

first i installed react app using npx create-react-app my-app . i also wrote npm run eject,after ejecting it i found out that not all the config.js was installed only the webpack.config.js was added to the config file that was created.Then when i eddited the webpack.config.js like this

           {
             test: cssRegex,
             exclude: cssModuleRegex,
             use: getStyleLoaders({
               importLoaders: 1,
               sourceMap: isEnvProduction && shouldUseSourceMap,
               module:true,
               localIdentName:'[name]__[local]__[hash:base64:5]'
             }),
             // Don't consider CSS imports dead code even if the
             // containing package claims to have no side effects.
             // Remove this when webpack adds a warning or an error for this.
             // See https://github.com/webpack/webpack/issues/6571
             sideEffects: true,
           },
           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
           // using the extension .module.css
           {
             test: cssModuleRegex,
             use: getStyleLoaders({
               importLoaders: 1,
               sourceMap: isEnvProduction && shouldUseSourceMap,
               modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
                 localIdentName:'[name]__[local]__[hash:bash64:5]'
             }),
           },
           // Opt-in support for SASS (using .scss or .sass extensions).
           // By default we support SASS Modules with the
           // extensions .module.scss or .module.sass
           {
             test: sassRegex,
             exclude: sassModuleRegex,
             use: getStyleLoaders(
               {
                 importLoaders: 2,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
                   localIdentName:'[name]__[local]__[hash:base64:5]'
               },
               'sass-loader'
             ),
             // Don't consider CSS imports dead code even if the
             // containing package claims to have no side effects.
             // Remove this when webpack adds a warning or an error for this.
             // See https://github.com/webpack/webpack/issues/6571
             sideEffects: true,
           },
           // Adds support for CSS Modules, but using SASS
           // using the extension .module.scss or .module.sass
           {
             test: sassModuleRegex,
             use: getStyleLoaders(
               {
                 importLoaders: 2,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
                   localIdentName:'[name]__[local]__[hash:base64:5]'
               },
               'sass-loader'
             ),
           },

i got an error which is

---

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css) ValidationError: Invalid options object. CSS Loader has been initialized 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? }

---

Answer 1

Your options object is not match with CSS Loader options, you can check it here css-loader options

I also assume that CRA supports modules out of the box. No need to eject it and add additional configs. Create-React-App CSS modules

Just add **.modules.css to your css (or sass/scss) file names.