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

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

Offen
#265 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
2k
Forks
159
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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 ?

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne mit dem Vergleich der im Issue gezeigten webpack-Modulregel und der Babel-Konfiguration, reproduziere anschließend den React-SSR-Build und untersuche die erzeugte styles.css-Ausgabe. Verfolge, wie der Server Home__Container___KBMxU erzeugt, während der Client Home__Container___2eVzQ erzeugt; abgeschlossen ist die Aufgabe, wenn du den Konfigurations- oder Umgebungsunterschied identifiziert hast, der die Abweichung verursacht, und ein konsistentes Setup dokumentiert hast.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react, sass, webpack
Bereich
build-system, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.