gajus / gajus/babel-plugin-react-css-modules

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

Ouverte
#265 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.