@ jonathan-chin, ¿puede proporcionar información relevante sobre el entorno ejecutando gatsby info --clipboard ?

Además, noté que está utilizando Gatsby v1 de su package.json en el repositorio que compartió. Utilice gatsby-cli versión 1.x.x para Gatsby v1. gatsby-cli versión 2.x.x es para Gatsby v2

@kakadiadarpan

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.4.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Safari: 12.0
  npmPackages:
    gatsby: ^1.9.277 => 1.9.278
    gatsby-image: ^1.0.24 => 1.0.55
    gatsby-link: ^1.6.28 => 1.6.46
    gatsby-plugin-canonical-urls: ^1.0.11 => 1.0.18
    gatsby-plugin-google-analytics: ^1.0.12 => 1.0.31
    gatsby-plugin-google-fonts: 0.0.3 => 0.0.3
    gatsby-plugin-material-ui: ^0.1.3 => 0.1.3
    gatsby-plugin-nprogress: ^1.0.10 => 1.0.14
    gatsby-plugin-react-helmet: ^1.0.5 => 1.0.8
    gatsby-plugin-react-next: ^1.0.11 => 1.0.11
    gatsby-plugin-sass: ^1.0.26 => 1.0.26
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-remark-autolink-headers: ^1.4.8 => 1.4.19
    gatsby-remark-copy-linked-files: ^1.5.36 => 1.5.37
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-responsive-iframe: ^1.4.19 => 1.4.20
    gatsby-source-filesystem: ^1.5.8 => 1.5.39
    gatsby-transformer-remark: ^1.7.21 => 1.7.44
    gatsby-transformer-sharp: ^1.6.14 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 2.0.0-rc.1
    gatsby: 1.9.278

cuando degrado mi gatsby-cli global a 1.9.X, aparece el problema de CSS. cuando lo mantengo en 2.0.0-rc.1, me da el error BrowserslistError: Unknown browser query dead

@ jonathan-chin Entiendo que estás teniendo el problema de CSS con gatsby-cli versión 1.9.x , pero esa es la versión que deberías usar ya que es compatible con la versión de Gatsby que estás usando.

Gracias por compartir el repositorio de reproducción. Echaré un vistazo a eso.

@ jonathan-chin, ¿sería posible para usted saber qué CSS es exactamente diferente en desarrollar vs construir?

@kakadiadarpan
Esto es de desarrollo y es el estilo esperado.

esto es lo que obtengo de la compilación:

Puede ver que sus clases de CSS son diferentes.

No recuerdo que esto haya sido un problema antes. La última buena compilación (donde CSS no se vio afectado) fue https://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19

Creo que la solución para esto es # 8092.

@ jonathan-chin, ¿podrías eliminar el contenido de esa solución y luego probar con esos cambios? Nota: si aún no lo ha visto, la sección Cómo contribuir de los documentos de Gatsby contiene información sobre cómo configurar gatsby-dev-cli, ¡que necesitará para probarlo!

También @ jonathan-chin parece que estás en Gatsby v1. ¿Podrías actualizar a Gatsby v2 para obtener esta solución?

@DSchau siento que me haya tomado tanto tiempo volver a esto.

migrar el proyecto existente a la versión 2 fue demasiado trabajo. Decidí comenzar un nuevo motor de arranque v2 y migrarlo pieza por pieza (copiando y modificando según sea necesario). En este caso, gatsby Develop produce una salida radicalmente diferente a la de gatsby build:

construir gatsby

Gatsby desarrollar

comparando los estilos CSS de dos elementos idénticos en construir y desarrollar:

construir:

.jss94 {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
}

desarrollar:

.MuiTypography-headline-88 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.35417em;
}

Tengo una interfaz de usuario de material que anula scss que cargo en el componente de diseño en v2. en desarrollo, parece fusionarlos bien, pero en construcción, ¿parece que los está ignorando? puede ser esa la causa?

Solo tengo un import '../scss/style.scss';

@ jonathan-chin, ¿probaste esto con v2 o según los pasos mencionados en el comentario de @DSchau arriba?

@kakadiadarpan Lo siento, no tengo la capacidad (es decir, el tiempo) para configurar ese flujo de trabajo.

Después de ver la corrección de relaciones públicas, parece ser el mismo problema que estoy experimentando. Puedo cerrar este problema por ahora y monitorear las relaciones públicas.

@kakadiadarpan lo siento, me acabo de dar cuenta de algo extraño.

Cuando mi sitio se carga por primera vez, el CSS es una locura. pero forzándolo a recargar la página de índice, el CSS se carga bien. Estos son los pasos para reproducir:

1) cargue https://sharemeals.org/
examine la cita de Emerson hacia la parte inferior:

2) haga clic en el nombre del sitio en la parte superior izquierda. volverá a cargar la página de índice sin actualizar el sitio. la cita de emerson aparece como se esperaba:

(la cita de emerson es indicativa de otros cambios de CSS. Solo estoy llamando a este porque es el más visible)

@ jonathan-chin Gracias por la actualización. Puedo reproducir el problema con los pasos que proporcionó. ¿Estás usando Gatsby v1 o v2 para https://sharemeals.org/?

~ Estoy teniendo exactamente el mismo problema: ~

~ Cuando uso injectGlobal obtengo estilos diferentes después de ejecutar gatsby build . Puede ver el problema aquí: https://ivorpad.com/about~

~ Después de que la página termine de cargarse, coloque el cursor sobre los enlaces 'Escritura' o 'Trabajo' y verá que los estilos cambian.

Lo resolvió moviendo los estilos de encabezado a page.js lugar de global.

 System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - ~/n/bin/node
    Yarn: 1.2.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/n/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0.2
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.7 => 2.0.8
    gatsby-plugin-google-analytics: ^2.0.0-rc.2 => 2.0.0-rc.2
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
    gatsby-plugin-typography: ^2.2.0 => 2.2.0
    gatsby-remark-prismjs: ^3.0.1 => 3.0.1
    gatsby-source-contentful: ^2.0.1-beta.15 => 2.0.1
    gatsby-transformer-remark: ^1.7.44 => 1.7.44

@kakadiadarpan que está usando "gatsby": "^1.9.277"

Creo que la solución para esto es # 8092.

@ jonathan-chin, ¿podrías eliminar el contenido de esa solución y luego probar con esos cambios? Nota: si aún no lo ha visto, la sección Cómo contribuir de los documentos de Gatsby contiene información sobre cómo configurar gatsby-dev-cli, ¡que necesitará para probarlo!

@ jonathan-chin, ¿puedes probar las sugerencias proporcionadas por @DSchau en este comentario?

@kakadiadarpan Creo que intenté implementar esto hace un momento. Instalé gatsby-cli-dev, bifurqué y tiré, cambié la rama, etc., etc.

El problema aún persiste.

¿Cómo puedo verificar que el nuevo node_modules / gatsby que tengo es correcto y no el anterior?

He investigado un poco más, con Gatsby 1.XX y sin la solución propuesta.

(Intenté actualizar a Gatsby 2.XX y, por separado, la solución propuesta y ninguna funcionó)

la clase jss para el estilo deseado existe en la carga de página inicial. en este caso, .jss58. Sin embargo, el elemento que estoy viendo no obtiene .jss58 en la carga inicial. solo después de realizar otra solicitud de página (incluso solicitando la misma página) el elemento obtendrá correctamente .jss58

Entonces, ¿quién está a cargo de determinar qué clases jss aplicar? ¿Hay alguna razón por la que tendría un resultado en la carga inicial pero una carga diferente en todas las solicitudes de página posteriores?

EDITAR: hay algunos otros problemas importantes. en la compilación de producción, mis íconos svg nunca se cargan por completo, independientemente de la solicitud de página:

Esto es lo que obtengo en lugar de desarrollar:

Estoy enfrentando el mismo problema. Las versiones de desarrollo de gatsby y compilación de gatsby son muy diferentes para mí.

Si aterrizo directamente o actualizo una página con componentes de material-ui, el CSS está roto para esos componentes. Las clases están presentes en la fuente pero no se aplican a los elementos. Sin embargo, si sigo <Link> a la misma página, todo funciona bien.

También he notado que si ejecuto gatsby build mientras se ejecuta gatsby develop , la versión de desarrollo de gatsby también comienza a comportarse exactamente de la misma manera que la versión de compilación de gatsby.

System:
    OS: Linux 3.10 Red Hat Enterprise Linux Workstation 7.3 (Maipo)
    CPU: x64 Intel(R) Xeon(R) CPU E5-2620 v4 @ 2.10GHz
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 11.1.0 - /usr/bin/node
    Yarn: 1.12.1 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
  npmPackages:
    gatsby: 2.0.37 => 2.0.37
    gatsby-cli: 2.4.4 => 2.4.4
    gatsby-plugin-typography: 2.2.1 => 2.2.1
    gatsby-source-atom: 0.1.0 => 0.1.0
    gatsby-source-ghost: 2.1.2 => 2.1.2
  npmGlobalPackages:
    gatsby-cli: 2.4.4

(Nunca he usado gatsby-plugin-offline)

Puede consultar el sitio web en http://pawanhegde.netlify.com
La fuente está en https://gitlab.com/PawanH/pawanh.gitlab.io/tree/gatsbyjs

Para ver la versión "esperada", haga clic en cualquiera de los iconos cómicamente grandes cerca de la parte inferior.

Todavía no he tenido tiempo de probar la solución para # 8092

Todavía no he tenido tiempo de probar la solución para # 8092

No me solucionó el problema. Sigo viendo el mismo comportamiento.

Esperado

Real

Si aterrizo directamente o actualizo una página ... el CSS está roto para esos componentes. Las clases están presentes en la fuente pero no se aplican a los elementos. Sin embargo, si sigo <Link> a la misma página, todo funciona bien.

Esto también está sucediendo exactamente como se describe para mí. Probé la solución en https://github.com/gatsbyjs/gatsby/pull/8092 y funcionó para la mayoría de las páginas, pero no funcionó para todas.

Esperado:

Real:

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 62.0.3
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.46 => 2.0.46 
    gatsby-image: ^2.0.20 => 2.0.20 
    gatsby-link: ^2.0.6 => 2.0.6 
    gatsby-plugin-catch-links: ^2.0.8 => 2.0.8 
    gatsby-plugin-flow: 1.0.2 => 1.0.2 
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1 
    gatsby-plugin-root-import: 2.0.4 => 2.0.4 
    gatsby-plugin-sass: ^2.0.4 => 2.0.4 
    gatsby-plugin-sharp: 2.0.12 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-plugin-svgr: 2.0.0-alpha => 2.0.0-alpha 
    gatsby-remark-copy-linked-files: 2.0.6 => 2.0.6 
    gatsby-remark-images: 2.0.6 => 2.0.6 
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.6 
    gatsby-remark-smartypants: 2.0.6 => 2.0.6 
    gatsby-source-filesystem: 2.0.8 => 2.0.8 
    gatsby-source-wordpress: 3.0.13 => 3.0.13 
    gatsby-transformer-remark: 2.1.12 => 2.1.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8 

Resolví este problema haciendo lo siguiente
en el archivo index.js que tenía

import 'injectSheet' from react-jss
import './../bootstrap.min.css'

al invertir el orden, pude especificar el orden en el que quería importar css en el html.
Entonces, mi código final fue

import './../bootstrap.min.css'
import 'injectSheet' from react-jss

Solución : cambiar el orden de las importaciones
Esto resolvió mi problema. Ojalá te haga lo mismo.

Tengo los mismos problemas, entre muchos otros:

• develop ejecuta de forma no determinista, sin embargo, cuando se ejecuta, funciona bien.
• StaticQuery no termina de cargar imágenes de forma no determinista.
• build falla
• build salida de develop - este es el factor decisivo.
• develop y build parecen interactuar entre sí.

Estos problemas son tan pesados ​​que, desafortunadamente, parecen superar cualquier beneficio de Gatsby para mí y me obligan a volver a la aplicación Create React.

Probé varias soluciones, como eliminar todos los estilos en línea e importar .scss en los componentes secundarios en lugar de en el nivel raíz.
Aún así, el problema persiste. Esto es realmente preocupante

Estoy usando componentes con estilo, agregando gatsby-plugin-styled-components en gatsby-config.js funcionó para mí.

Tener el mismo problema.
La compilación de Gatsby aplica un nombre de clase diferente, pero puedo ver en el inspector de React que se está aplicando la clase adecuada.

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 59.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.107 => 2.0.107
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-google-analytics: ^2.0.9 => 2.0.9
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12
    gatsby-plugin-offline: ^2.0.16 => 2.0.19
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4
    gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0-beta1
    gatsby-plugin-sass: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.16 => 2.0.16
    gatsby-remark-copy-linked-files: ^2.0.8 => 2.0.8
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-source-filesystem: ^2.0.12 => 2.0.12
    gatsby-transformer-remark: ^2.1.15 => 2.1.15
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.6

Hola!

Este tema se ha silenciado. Silencio espeluznante. 👻

Tenemos muchos problemas, por lo que actualmente cerramos los problemas después de 30 días de inactividad. Han pasado al menos 20 días desde la última actualización aquí.

Si nos perdimos este problema o si desea mantenerlo abierto, responda aquí. ¡También puede agregar la etiqueta "no obsoleto" para mantener este problema abierto!

¡Gracias por ser parte de la comunidad de Gatsby! 💪💜

Por favor, permanezca abierto.

El problema aún no está resuelto. Por favor, permanezca abierto un rato

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.10.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.35 => 2.1.4 
    gatsby-cli: ^2.4.10 => 2.4.10 
    gatsby-image: ^2.0.19 => 2.0.29 
    gatsby-plugin-emotion: ^4.0.3 => 4.0.3 
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.7 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.3 => 2.0.11 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.12 
    gatsby-plugin-offline: ^2.0.10 => 2.0.23 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.6 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.20 
    gatsby-plugin-typography: ^2.2.2 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.20 
    gatsby-transformer-remark: ^2.1.17 => 2.2.5 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

El problema aún no está resuelto. Por favor, permanezca abierto un rato

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.10.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.35 => 2.1.4 
    gatsby-cli: ^2.4.10 => 2.4.10 
    gatsby-image: ^2.0.19 => 2.0.29 
    gatsby-plugin-emotion: ^4.0.3 => 4.0.3 
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.7 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.3 => 2.0.11 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.12 
    gatsby-plugin-offline: ^2.0.10 => 2.0.23 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.6 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.20 
    gatsby-plugin-typography: ^2.2.2 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.20 
    gatsby-transformer-remark: ^2.1.17 => 2.2.5 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

Como se menciona en https://github.com/gatsbyjs/gatsby/issues/11072, el problema debe resolverse en 7058a256d2dcfab91259bdf00e811375737414e7.

Solo en mi caso de uso específico se usó @emotion/global para insertar un estilo global en la aplicación. De alguna manera, los problemas de división de código aún persistían en combinación con las funcionalidades @emotion/global .

Solución alternativa

Se tomaron los siguientes pasos para resolver los problemas. No es una solución perfecta, pero funcionó en esta configuración.

1. Actualización a la última versión de Gatsby ^2.1.8
2. Descubra dónde se usa import { Global, css } from '@emotion/core' y mueva el estilo CSS a un nuevo archivo ./styles/global.css
3. Incluya la hoja de estilo en su compilación de producción agregando gatsby-brower.js a la raíz del proyecto

// gatsby-brower.js

import './src/styles/globals.css'

1. Limpiar el caché antiguo y la carpeta de compilación rm -rf .cache && rm -rf public
2. gatsby build -> gatsby serve
3. Voilá 💁‍♂️

Notas

• Sospecho que muchos de los problemas anteriores son causados ​​por formas poco comunes de insertar estilos (globales) VS problemas de división de código CSS mencionados en https://github.com/gatsbyjs/gatsby/issues/11072
• Probablemente, la solución alternativa anterior sea una solución de caso de uso específico.
• Este tutorial sobre estilismo en Gatsby me ayudó a resolverlo

Este es un tema frustrante.

Para mí, las animaciones hechas con react-pose es decir, en gatsby-browser.js y gatsby-ssr.js estaban haciendo algunas cosas raras de vudú, doble renderizado y algunas cosas CSS indeterministas donde la página funcionaría en una segunda actualización.

Todavía no puedo señalar el problema exacto, pero al inspeccionar y eventualmente eliminar los complementos, eliminar las bibliotecas, lo _ resuelto_.

Si bien Gatsby, junto con otras herramientas de JS, puede ser increíble y llamativo, tenga cuidado y sea responsable de (no) usarlo en producción.

¿Es posible compartir una nueva reproducción? Porque cuando usamos css-in-js podría ser algo que no podamos arreglar ya que no es nuestra culpa.

También encontré este problema.

Agregué typography.js hace unos días. Luego me di cuenta de que los estilos basados ​​en typography.js funcionan bien en gatsby develop , pero no están disponibles en gatsby build . Creé las aplicaciones a partir de la plantilla de inicio,

Intenté actualizar la versión, no funciona.
Entonces, encontré que hay un layout.css

Mi solución es comentar layout.css y parece solucionar este problema

Proyecto después de agregar typography.js
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/ffb52973c21014b247a808e444319f8eede6eee6

Proyecto después de comentar layout.css
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/658c7f8976d8d84a1fd28cb9aa6c99bbce2be9b3

@Jasonlhy Este fue exactamente el problema para mí. El archivo layout.js en mi carpeta de componentes está importando el archivo layout.css. Una vez que eliminé esa importación y ejecuté npm run build y npm run serve nuevamente, el sitio se mostró bien. Muchas gracias!

¿Es posible compartir una nueva reproducción? Porque cuando usamos css-in-js podría ser algo que no podamos arreglar ya que no es nuestra culpa.

Hola @wardpeet , esto acaba de aparecer en un proyecto mío cuando agregué gatsby-plugin-styled-components, así que aquí hay una nueva reproducción del problema que continúa sucediendo en Gatsby actualizado:

EDITAR: Resulta que ya no tengo una reproducción, porque el problema sigue cambiando a medida que edito mis estilos. Después de implementar mi próxima confirmación, el orden de las importaciones cambió nuevamente. Mi CSS ahora es el mismo tanto en dev como en prod. Sin embargo, las capturas de pantalla adjuntas y la descripción muestran lo que solía estar sucediendo ...

Descripción

Gatsby ordena los <head> diferente en desarrollo y producción. Cuando se usan componentes con estilo gatsby-plugin junto con CSS global, esto puede hacer que el orden de carga de CSS sea diferente entre dev y prod, dando lugar a errores visuales inesperados.

Esto es idéntico al # 9908, que se cerró junto con una serie de problemas similares a favor del # 9733, que a su vez se cerró porque según @KyleAMathews se corrigió en el # 11800. Sin embargo, sigo viendo el comportamiento del # 9908 después de asegurarme de que Gatsby está actualizado.

pasos para reproducir

Tengo un ejemplo en vivo (pero no mínimo) del problema en este repositorio: https://github.com/vivshaw/vivshaw. Este sitio tiene una parte de CSS global que incluye el marco CSS de Bulma, luego el resto del sitio está hecho en componentes con estilo. La versión de producción está disponible en netlify .

Resultado Esperado

Tanto gatsby develop como gatsby build gatsby serve deben verse iguales. El orden de carga de estilo debe ser coherente.

Resultado actual

Cuando se crea para producción, vemos el estilo de página correcto:

Pero cuando lo cargamos con gatsby develop , el relleno en la sección de introducción se ha perdido:

Investigué un poco y descubrí por qué. En producción, Gatsby carga el fragmento de CSS global antes de los estilos de componentes con estilo, como se ve con las dos líneas resaltadas aquí:

Pero en el desarrollo, los estilos de componentes con estilo se cargan primero:

¿Por qué esto causa un error? Bueno, tengo el componente etiquetado con una clase Bulma y una clase generada por componentes con estilo. Ambas clases afectan las propiedades de relleno, por lo que la que se cargue por última vez es la que se aplica. En este caso, se puede resolver fácilmente simplemente eliminando la clase Bulma. Pero puedo imaginar situaciones en las que este comportamiento de orden de carga haga que surjan problemas más complejos.

Medio ambiente

> gatsby info

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
  Binaries:
    Yarn: yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 118.04s. - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.13 - /c/Python27/python
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.3.16 => 2.3.16
    gatsby-image: ^2.0.37 => 2.0.37
    gatsby-plugin-eslint: ^2.0.4 => 2.0.4
    gatsby-plugin-layout: ^1.0.14 => 1.0.14
    gatsby-plugin-manifest: ^2.0.28 => 2.0.28
    gatsby-plugin-netlify: ^2.0.13 => 2.0.13
    gatsby-plugin-netlify-cms: ^3.0.17 => 3.0.17
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-robots-txt: ^1.4.0 => 1.4.0
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.32 => 2.0.32
    gatsby-plugin-sitemap: ^2.0.12 => 2.0.12
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
    gatsby-plugin-webpack-size: 0.0.3 => 0.0.3
    gatsby-source-filesystem: ^2.0.29 => 2.0.29
    gatsby-transformer-remark: ^2.3.8 => 2.3.8
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

Gracias, definitivamente, no estoy seguro de cómo podríamos solucionar esto, es posible que deseemos agregar algún tipo de clasificación a los componentes principales.

Viendo el mismo tipo de problemas que los mencionados anteriormente por @topherauyeung

Medio ambiente

gatsby info

  System:
    OS: macOS High Sierra 10.13.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.7.0 - /usr/local/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 66.0.2
    Safari: 11.1
  npmPackages:
    gatsby: ^2.3.24 => 2.3.27
    gatsby-image: ^2.0.39 => 2.0.40
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29
    gatsby-plugin-material-ui: ^1.2.4 => 1.2.4
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sharp: ^2.0.35 => 2.0.35
    gatsby-plugin-typography: ^2.2.13 => 2.2.13
    gatsby-source-filesystem: ^2.0.29 => 2.0.31
    gatsby-transformer-sharp: ^2.1.18 => 2.1.18
  npmGlobalPackages:
    gatsby-cli: 2.5.4

Tener este problema también. Tenemos un repositorio de gatsby que extrae componentes de una biblioteca NPM. Los componentes importan archivos .scss que se están inyectando en <head> en el orden incorrecto en la construcción. En el desarrollo, los estilos del repositorio de gatsby son los últimos, por lo que tienen prioridad, pero en la compilación son lo primero y están siendo reemplazados por los estilos del componente importado.

Tengo un problema similar tal vez relacionado con esto, cargo los estilos dinámicamente, en gatsby desarrollo los estilos son relativos al diseño actual, en gatsby build todos los estilos dentro de 'source.less' también se aplican al diseño de la aplicación

componentDidMount() { require("./source.less") }

Encontré este problema también. Pero mi caso fue un simple error.
Estaba usando

<Button href="/path/to/page">blah blah</Button>

Cuando cambié para usar Gatsby Link, funciona

<Link to="/path/to/page">
  <Button>blah blah</Button>
</Link>

El mismo problema. Mantener un ojo en una solución mientras intento depurar.

Agregando a esto porque creo que está relacionado, pero solo ha sido un problema recientemente:
Estoy usando Typography.js y Bootstrap; en producción, typography.js anula el bootstrap, que es lo que quiero, pero en el servidor de desarrollo los estilos de fuente Bootstrap están anulando mis estilos de tipografía. Esto es bastante irritante porque tengo que implementar el sitio para ver cómo se ve realmente. Si alguien sabe cómo podría anular Bootstrap con typography.js en gatsby development, realmente lo agradecería

Agregando a esto porque creo que está relacionado, pero solo ha sido un problema recientemente:
Estoy usando Typography.js y Bootstrap; en producción, typography.js anula el bootstrap, que es lo que quiero, pero en el servidor de desarrollo los estilos de fuente Bootstrap están anulando mis estilos de tipografía. Esto es bastante irritante porque tengo que implementar el sitio para ver cómo se ve realmente. Si alguien sabe cómo podría anular Bootstrap con typography.js en gatsby development, realmente lo agradecería

Se solucionó esto simplemente reconstruyendo Bootstrap con lo que quería

El mismo problema aquí: https://github.com/gatsbyjs/gatsby/issues/16075

Estoy experimentando un problema similar al descrito aquí. Aunque no estoy usando ningún marco CSS (todos .sass personalizados), algunos estilos, elementos y clases se procesan de manera diferente entre gatsby develop y gatsby build .

Esto ocurre en una página en la que estoy verificando los parámetros de búsqueda usando URLSearchParams(window.location.search) . Con eso, estoy mostrando dinámicamente un elemento dependiendo de si existe o no un parámetro. Al ir directamente a la URL en develop , todo funciona bien. En build , todo se maneja de manera bastante diferente.

Esperado ( develop ) :

Real ( build ) :

Lógica condicional :

{(!!params ? !params.has('signup') : true) && (
    <div className={[ styles.form__element, styles.contact__message, ].join( ' ')}>
        <label htmlFor="message">
            Message
            <textarea required minLength="10" name="message" id="message" cols="30" rows="10" className={styles.form__control} placeholder="Questions, comments, etc..." />
        </label>
    </div>
)}

params está establecido por :

const params = typeof window !== `undefined` ? new URLSearchParams(window.location.search) : ''

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    npm: 6.10.2 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.50 => 2.13.50
    gatsby-image: ^2.2.8 => 2.2.8
    gatsby-plugin-google-analytics: ^2.1.6 => 2.1.6
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4
    gatsby-plugin-offline: ^2.2.4 => 2.2.4
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
    gatsby-plugin-sass: ^2.1.4 => 2.1.4
    gatsby-plugin-sharp: ^2.2.9 => 2.2.9
    gatsby-plugin-sitemap: ^2.2.5 => 2.2.5
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-source-contentful: ^2.1.17 => 2.1.17
    gatsby-source-filesystem: ^2.1.8 => 2.1.8
    gatsby-transformer-remark: ^2.6.10 => 2.6.10
    gatsby-transformer-sharp: ^2.2.5 => 2.2.5
  npmGlobalPackages:
    gatsby-cli: 2.7.27

@ j-651 Parece que tengo el mismo problema. Leo datos del almacenamiento local y renderizo los nombres de clases de forma condicional, y los nombres de clases incorrectos se renderizan. ¿Alguna solución?

@OrKoN lo que terminé haciendo para

Tengo un problema similar. Primero, tenía una versión diferente debido a los componentes de estilo. Agregué el complemento gatsby-plugin-styled-components y se corrigieron. Luego noté que MaterialUI comenzó a romperse, así que agregué gatsby-plugin-material-ui y todavía no tuve suerte. La interfaz de usuario del material todavía está rota en la implementación.

Producción:

Desarrollo (local)

Pude reproducir mi problema y aislarlo en el repositorio https://github.com/gatsbyjs/gatsby/issues/16925 está relacionado con el comportamiento del componente de enlace y probablemente sea un problema diferente

Esta no es una solución adecuada, pero solo quería intervenir con una solución rápida con la que tenía que ir para sacar un proyecto.

Copié y pegué el resultado de typography.js, lo coloqué en un archivo .scss y me aseguré de importarlo después de todo lo demás, con un pequeño mensaje.

typographyjs-output.scss
Simplemente ignore este archivo por favor y gracias!
Tuve que extraer el CSS generado por typography.js y colocarlo aquí.
¿Por qué? Ver aquí: https://github.com/gatsbyjs/gatsby/issues/8560
La compilación de producción importa SCSS y css-in-js en un orden diferente al de dev (no estoy seguro si siempre es un orden coherente).
Eliminé 'gatsby-plugin-typography' e importé el CSS que se generó a partir de eso como una hoja de estilo normal.
Typography.js se incluyó en el proyecto desde el principio y no esperaba que causara ningún problema.
Así que sí, diseñé el resto del sitio con estos valores predeterminados incluidos, por lo que eliminar este archivo hace que las cosas se vean un poco raras.

Solución bastante terrible, pero funciona si estás en un aprieto.

Algo de lo que me acabo de dar cuenta es que en la carga inicial de la página, el CSS está roto, pero cambie la página y luego vuelva a la página de inicio nuevamente y el CSS funciona. Es solo en la carga de la página inicial que el CSS no se ve bien y también se carga bastante lento

Con Material-UI tuve una doble llamada para gatsby-plugin-material-ui en gatsby.config.js. La carga inicial de la página tenía un parpadeo y algunos estilos no se agregaban a veces. Ahora funciona con la versión más reciente del complemento y este módulo se exporta en la matriz de complementos de gatsby.config.js:
, { resolve: 'gatsby-plugin-material-ui', // If you want to use styled components you should change the injection order. options: { // stylesProvider: { // injectFirst: true, // }, }, }

¿Alguien encontró una solución aquí? Veo un estilo incorrecto en la producción (vista de la primera página), aunque local está bien. P.ej. El componente tiene jss13 y jss14 en producción, pero esas clases deben ser jss43 y jss45. También veo que el orden de los estilos en la cabeza es diferente, pero no sé cómo resolverlo ... También tengo los dos complementos incluidos, pero no tuve suerte:

plugins: [
    'gatsby-plugin-styled-components',
    'gatsby-plugin-material-ui',
];

@ocundale Para mí, la solución fue eliminar el método de estilo material-ui. Por ejemplo, el siguiente código causaría problemas al pasar a producción. No sé por qué, pero una vez que eliminé esto y puse este estilo como CSS en línea, todo funcionó según lo previsto.

const MyTab = styled(Tab)({
  border: '1px solid grey',
  borderRadius: '50px',
  fontSize: '12px',
  marginRight: '16px'
})

Fijado haciendo

<Tab style={{
 border: '1px solid grey',
  borderRadius: '50px',
  fontSize: '12px',
  marginRight: '16px'
}}>
...
</Tab>

OK, gracias @ Skillz4Killz , agradezco la respuesta rápida, parece una pena, pero creo que entonces recurriré a usar el mismo método. ¡Salud!

Esta no es una solución adecuada, pero solo quería intervenir con una solución rápida con la que tenía que ir para sacar un proyecto.

Mi solución temporal fue agregar !important a cada línea en mi css para que no fuera anulado por la plantilla css. Brutal.

@ gatsbyjs / core Este problema parece aparecer en todo este repositorio una y otra vez en diferentes variaciones. # 3741 # 5100 # 9911 # 10370 # 12360 # 14601 # 17676 # 17728 (seguro que hay más, los sigo descubriendo todo el tiempo)

Este es un problema CRÍTICO, ya que no tiene una solución clara, afecta a los sitios de forma no determinista y, a menudo, aparece de "formas misteriosas", ya que tiene algunos efectos secundarios muy indirectos. Cambiar los atributos del mismo elemento HTML, especialmente class , es un caso de uso _muy_ común.

Si lo que se dice en el # 14601 es correcto, entonces este es un problema con la consolidación de la función de hidratación introducida en React 16.

Hay # 10706 que solo ayuda a descubrir este problema antes en el modo de desarrollo, pero no lo soluciona, por lo que tengo entendido.

Para cualquier otra persona que experimente esto, me las arreglé para solucionarlo sin usar CSS en línea / important.
No es un enfoque planificado y realmente me sentí más como suerte, pero agregué los complementos _gatsby-plugin-material-ui_ y _gatsby-plugin-styled-components_ junto con la actualización de Material-UI a las versiones> 4 y ya no veo los problemas.

{
  resolve: 'gatsby-plugin-material-ui',
  options: {
    stylesProvider: {
      injectFirst: true,
    },
  },
},
'gatsby-plugin-styled-components',

"@material-ui/core": "^4.0.0",
"@material-ui/icons": "^4.0.0",
"@material-ui/styles": "^4.4.1",

Puedo reproducir el problema, al menos una instancia del mismo.

Cree un nuevo sitio de gatsby desde este repositorio, que inicialmente se clonó desde el iniciador predeterminado : https://github.com/eyalroth/gatsby-hydrate-bug

Apenas tiene dependencias / complementos:

$ gatsby info
  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/n/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.11.3 - ~/n/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    gatsby: ^2.15.22 => 2.15.22
    gatsby-plugin-offline: ^3.0.8 => 3.0.8
  npmGlobalPackages:
    gatsby-cli: 2.7.44

El sitio tiene solo 2 páginas y un diseño. El diseño se agrega automáticamente a las 2 páginas a través de wrapPageElement (más o menos el mismo código que en gatsby-plugin-layout ). El diseño envuelve el contenido de la página con un div que tiene un atributo class establecido en la hora actual, a la vez que agrega la hora como texto debajo del contenido de la página.

Al construir (y servir) el sitio, navegar al índice e inspeccionarlo en las herramientas del desarrollador, se puede ver que el tiempo que se muestra en la página no es el mismo que en el div class atributo:

Navegar a la segunda página corregirá este comportamiento y verá que el tiempo será el mismo entre el contenido de la página y el atributo class :

Esto seguirá siendo así mientras continúe navegando entre las páginas en la misma ventana. Si actualiza la página o la abre en una ventana, la inconsistencia retrocederá; de hecho, notará que el tiempo en el atributo class seguirá siendo el mismo cada vez que actualice (dando a entender que está almacenado en caché). La "actualización completa" (CTRL + F5) cargará la página correctamente.

Esta instancia particular del problema ocurre solo con gatsby-plugin-offline habilitado, y está afectando directamente a gatsby-plugin-layout , y posiblemente a cualquier otra implementación de wrapPageElement .

La única solución que he podido encontrar hasta ahora es simplemente reemplazar la función de hidratación con render :

// gatsby-browser.js
const ReactDOM = require('react-dom')

export function replaceHydrateFunction() {
    return (element, container, callback) => {
        ReactDOM.render(element, container, callback)
    }
}

Una vez más, este es un problema con la reconciliación del método de hidrato , como se discutió en múltiples problemas en el repositorio de React, como https://github.com/facebook/react/issues/10591 , https://github.com/ facebook / react / issues / 12713 , https://github.com/facebook/react/issues/13260.

Tenga en cuenta que puede introducir una penalización en el rendimiento, ya que todo el propósito detrás de la "hidratación" es aumentar el rendimiento sobre el renderizado simple.

Cerramos este problema a favor de https://github.com/gatsbyjs/gatsby/issues/17914 para mantener las cosas organizadas.

@eyalroth Estoy de acuerdo en que este es _de hecho_ un problema que debemos resolver. Discutamos esto en https://github.com/gatsbyjs/gatsby/issues/17914 y lleguemos al fondo de esto

También tengo este problema. el entorno de desarrollo de Gatsby estaba bien, pero en compilación al volver a cargar la página del problema. El estilo de className e incluso en línea estaba siendo eliminado de ciertas etiquetas. Lo que me dejó con un div sin atributos, pero todos los niños fueron renderizados.

sin embargo, cuando cambié la ruta usando el enrutador de enlace gatsby en lugar de actualizar la página completa. soluciona el problema.

Esto me volvió loco durante horas. Encontré una solución horrenda, probablemente no sea una buena práctica, pero funcionó por ahora.

Pero cambié la etiqueta (div) a (artículo)

De repente el

<div>

convirtió

<article class="CartSummary-module--summary--3zJVn">

en construcción

También funcionó con ul y pre.

Gracias por la loca solución @ stefantrinh1 - Yo también estoy experimentando este loco comportamiento de CSS

Si alguien quiere verlo replicado, tengo un repositorio público y he implementado ambas versiones:

parece funcionar con la solución article @ stefantrinh1
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

No funciona
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

Tuve un problema similar al intentar cargar condicionalmente un componente según el valor de la cookie. Por supuesto, esto no funcionó ya que tiene SSR en producción (aunque no estoy seguro de por qué funciona en modo dev). De todos modos, lo que terminé haciendo fue envolver mi cheque dentro de useEffect y verificar qué componente renderizar una vez que React se haga cargo (se rehidrate) en el cliente. Puede usar componentDidMount() para componentes de clase. Después de implementar esto, todo funciona como se esperaba.

Mi problema era que estaba usando wrapPageElement y wrapRootElement en gatsby-browser.js pero no en gatsby-ssr.js . Una vez que copié lo que tenía en gatsby-ssr.js cosas empezaron a funcionar como se esperaba. Por favor, vea @jlkiri 's respuesta: https://github.com/gatsbyjs/gatsby/issues/22113#issuecomment -597432337

Mismo número en 2020. Haciendo clic en soluciona el problema, pero el problema de recarga completa está presente.
"gatsby": "^ 2.19.45",
"react-custom-scrollbars": "^ 4.2.1",

tengo el mismo problema que emailnikola

25729

En mi caso, gatsby-plugin-minify estaba generando este problema, lo que llevó a la compilación de producción a recargar todos los estilos en la compilación de producción.