gajus / gajus/babel-plugin-react-css-modules
Server generated css class name is different from the one generated on the client
- Langage dominant
- JavaScript
- Étoiles
- 2k
- Forks
- 159
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
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 ?
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Commencez par comparer la règle de modules webpack et la configuration Babel présentées dans l’issue, puis reproduisez le build React SSR et examinez la sortie styles.css générée. Suivez la façon dont le serveur produit Home__Container___KBMxU tandis que le client produit Home__Container___2eVzQ ; le travail est considéré comme terminé lorsque vous avez identifié la différence de configuration ou d’environnement à l’origine de l’incohérence et documenté une configuration cohérente.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react, sass, webpack
- Domaine
- build-system, frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 25/100