Lado del servidor prestó el módulo CSS importado, no como se esperaba -- reactjs campo con server-side-rendering campo con css-modules camp Relacionados El problema

Server side rendered imported CSS module not as expected


1
vote

problema

Español

Perdón Si se ha informado este problema antes, he intentado una solución de Google y busco en busca de los problemas aquí, pero no puedo encontrar algo que describa mi problema.

Estoy recibiendo un error en la consola de reaccionar diciendo que la marca del cliente y el servidor no coinciden y falla la suma de comprobación. Esto conduce a un FOUC.

Considerar las siguientes fuentes:

  // MyComponent.scss .myComponent {    background: black; }    // MyComponent.js import styles from './MyComponent.scss';  const MyComponent = () => <div className={styles.myComponent}>Hello</div>;  export default MyComponent;   

En el cliente, esto funciona como se esperaba y styles.myComponent se representará como MyComponent-myComponent-[hash] como podría esperar.

Sin embargo, en el servidor styles.myComponent no está definido para que se omite el nombre de la clase y esto es lo que está causando el error en la consola porque la estructura DOM no coincide. He registrado el objeto de los estilos y aparecería que en el servidor hay un objeto Error:(81) Android NDK: Application targets deprecated ABI(s): armeabi Error:(82) Android NDK: Support for these ABIs will be removed in a future NDK release. 4 y aquí es donde encuentro mi nombre de componente renderizado. Ej.

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

No estoy seguro de dónde comenzar a buscar por qué el objeto Módulo CSS importado parece ser diferente en el cliente que en el servidor.

Original en ingles

Sorry if this issue has been reported before, I've tried to Google a solution and searching the issues here but I can't find something that describes my issue.

I am getting a error in the console from React saying that that the client and server markup do not match and the checksum fails. This leads to a FOUC.

Consider the following sources:

// MyComponent.scss .myComponent {    background: black; }    // MyComponent.js import styles from './MyComponent.scss';  const MyComponent = () => <div className={styles.myComponent}>Hello</div>;  export default MyComponent; 

On the client, this works as expected and styles.myComponent will be rendered as MyComponent-myComponent-[hash] as you might expect.

However, on the server styles.myComponent is undefined so the class name is omitted and this is what is causing the error in the console because the DOM structure does not match. I've logged the styles object and it would appear that on the server there is a locals object and this is where I find my rendered component name. eg

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

I'm not sure where to start looking as to why the imported css module object appears to be different on the client than on the server.

        

Lista de respuestas

0
 
vote

Resulta que fue una mala configuración de WebPack.

Estoy usando el complemento de extracto de texto para sacar el CSS en archivos separados. Tengo reglas de módulos compartidos para los paquetes de clientes y servidores, respectivamente. A creó una instancia de ExtractTextPlugin para el código del cliente y use la función gradle.properties11 de esta instancia para envolver la regla de los módulos compartidos. En la configuración del cliente, especifiqué esta instancia en la cadena de complementos, pero en el paquete del servidor utilizo new ExtractTextPlugin() en la cadena de complementos y parece que esto es lo que causó la desconexión.

Terminé escribiendo una función de envoltura para duplicar la regla de CSS para cada una de las configuraciones de los paquetes.

 

Turns out it was bad Webpack configuration.

I'm using the extract-text-plugin to pull out the CSS into separate files. I have shared modules rules for the client and server bundles respectively. A created an instance of ExtractTextPlugin for the client code and use this instance's extract function to wrap the shared modules rule. In the client config I specified this instance in the plugin chain, but in the server bundle I used new ExtractTextPlugin() in the plugin chain and it seems this is what caused the disconnect.

I ended up writing a wrapper function to duplicate the CSS rule for each for of the bundle configurations.

 
 

Relacionados problema

0  La exportación de "principal" debe ser una función que devuelve una cadena HTML  ( Export from main must be a function that returns an html string ) 
Estuve siguiendo cada paso de este artículo sobre el generador de sitios estático https: / /css-tricks.com/css-modules-part-3-react/ . Lo único que cambio de...

16  Actualizar variables del módulo CSS de JavaScript  ( Update css module variables from javascript ) 
Estoy usando una versión (ahora más antigua) de la placa de cálculo de reacción que vino con los módulos CSS. Lo que es bueno de ellos es que puede crear vari...

0  Los módulos CSS para componentes reaccionados de manera similar tienen estilos de choque  ( Css modules for similarly named react components have clashing styles ) 
He actualizado recientemente la versión de My WebPack de 3 a 4.x. Desde entonces, me he dado cuenta de que estoy teniendo algunas colisiones de estilo bajo ci...

5  Usando PostCSS-Loader después de CSS-Loader  ( Using postcss loader after css loader ) 
Estoy usando módulos CSS con WEBPACK CSS-cargador, luego los agruparé con un complemento de extracto mini-CSS. Aquí es cómo se ve mi configuración: { t...

3  Utilice el selector de padres globales con el módulo SASS y CSS  ( Use global parent selector with sass and css module ) 
¿Cómo puedo diseñar mi componente de reacción usando módulos SASS y CSS en función de la existencia de un selector de padres globales (en este caso Isopen)? ...

2  Módulos CSS y propiedades personalizadas CSSSXT en React + WebPack  ( Css modules cssnext custom properties in react webpack ) 
Me pregunto cuál sería cuál sería el mejor enfoque para usar las propiedades personalizadas de CSSSXT, como estos, junto con los módulos CSS en reaccionar. ...

5  ¿Puedo importar archivo SCSS usa la declaración 'compuestas' con WEBPACK?  ( Can i import scss file uses the composes statement with webpack ) 
Estoy aprendiendo sobre los módulos CSS en este momento, y se parecen a que resolverán muchos problemas. Pero toda la documentación se basa en CSS, quiero usa...

1  Utilizando CSS-cargador sin reaccionar  ( Using css loader without react ) 
Estoy construyendo una pequeña aplicación web con módulos CSS habilitados para Mack (a través de CSS-loader) y sin reaccionar. Mi objetivo es obtener el Be...

0  ¿Cómo compile el "nombre de stylename" en dos clases separadas?  ( How do i compile stylename into two separate classes ) 
Entonces, uso MÓDULOS CSS CARGER WEBPACK: css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]_[hash:base64:5] Quiero compilar cada propieda...

1  ¿Cómo usar una clase en otro archivo CSS de los módulos CSS?  ( How to use a class in other css file of css modules ) 
./ index.tsx import React from 'react'; import Child from '../Child/index'; import style from './index.scss'; const Parent = () => { return ( ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos