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

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 ?

まず、issue に示されている webpack のモジュールルールと Babel の設定を比較し、次に React SSR ビルドを再現して生成された styles.css の出力を調査します。サーバーが Home__Container___KBMxU を生成する一方で、クライアントが Home__Container___2eVzQ を生成する仕組みを追跡します。設定または環境のどの違いが不一致を引き起こしているかを特定し、一貫したセットアップを文書化できれば完了です。