Le module CSS importé côté serveur n'est pas conforme aux attentes

Question

Désolé, ce problème a déjà été signalé. J'ai essayé de trouver une solution à Google et de rechercher les problèmes ici, mais je ne trouve aucun élément décrivant mon problème.

Je reçois une erreur de la part de React disant que le balisage du client et du serveur ne correspond pas et que la somme de contrôle échoue. Cela conduit à un FOUC.

Tenir compte des sources suivantes:

// MyComponent.scss 
.myComponent { 
    background: black; 
} 



// MyComponent.js 
import styles from './MyComponent.scss'; 

const MyComponent =() => <div className={styles.myComponent}>Hello</div>; 

export default MyComponent; 

Sur le client, cela fonctionne comme prévu et styles.myComponent seront rendus sous MyComponent-myComponent-[hash] que vous pourriez attendre.

Cependant, sur le serveur styles.myComponent est indéfini, le nom de classe est omis et c'est ce qui provoque l'erreur dans la console car la structure DOM ne correspond pas. J'ai connecté l'objet styles et il semblerait que sur le serveur il y ait un objet locals et c'est là que je trouve mon nom de composant rendu. par exemple

styles: { 
    locals: { 
    myComponent: 'MyComponent-myComponent-[hash]' 
    } 
} 

Je ne sais pas où commencer à chercher la raison pour laquelle l'objet du module importé css semble être différent sur le client que sur le serveur.

Answer 1

Il s'avère que c'était une mauvaise configuration de Webpack. J'utilise l'extrait-text-plugin pour sortir le CSS dans des fichiers séparés. J'ai partagé des règles de modules pour les bundles client et serveur respectivement. A a créé une instance de ExtractTextPlugin pour le code client et utilise la fonction extract de cette instance pour envelopper la règle des modules partagés. Dans la configuration du client, j'ai spécifié cette instance dans la chaîne du plugin, mais dans le bundle du serveur, j'ai utilisé new ExtractTextPlugin() dans la chaîne du plugin et il semble que c'est ce qui a provoqué la déconnexion. J'ai fini par écrire une fonction wrapper pour dupliquer la règle CSS pour chacune des configurations de bundle.