Open rahulrsingh09 opened 4 years ago
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
Home__Container___2eVzQ
What is causing this Name mismatch in styles ?
I had the same issue.
What fixed it for me was making sure the context for the plugin matches that in your webpack context.
context
did you fix this?
I am trying to get Css Modules working in React SSR.
This is my webpack config
And my babelrc file
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
And on on the client is
Home__Container___2eVzQ
What is causing this Name mismatch in styles ?