Server generated css class name is different from the one generated on the client

[rahulrsingh09]

I am trying to get Css Modules working in React SSR.

This is my webpack config

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
            },{
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },

                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                mode: 'local',
                                localIdentName: "[name]__[local]___[hash:base64:5]"
                            },
                            import: true,
                            importLoaders: true,
                        }
                    },
                    {
                        loader: "sass-loader",
                    }
                ],
            },
        ]

And my babelrc file

"env": {
   "test": {
     "presets": [
       "react"
     ],
     "plugins": [
       ["react-css-modules", {
         "generateScopedName": "[name]__[local]___[hash:base64:5]"
       }],
       "transform-es2015-modules-commonjs",
       "@babel/plugin-transform-runtime"

     ]
   }
 }
}

I have made the local ident name same in both cases but still the name on the client is different than on the server for the element.

generated on server styles.css

.Home__Container___KBMxU {
  display: flex;
  width: 600px;
  height: 300px;
  border: 2px solid red; }

And on on the client is Home__Container___2eVzQ

What is causing this Name mismatch in styles ?

[shabailiu]

I had the same issue.

What fixed it for me was making sure the context for the plugin matches that in your webpack context.

[SHERlocked93]

did you fix this?