La razón por la que aparece este problema es porque en algún lugar de su código está utilizando un objeto global de document y, debido a que el navegador procesa gatsby develop , donde hay objetos globales de window y documento, compila, sin embargo, cuando ejecuta gatsby build , el el código se compila en el servidor Node, donde no hay variables de window o document porque aún no están definidas, son variables del lado del cliente analizadas en el SSR ( Renderización del lado del servidor).

Esta es una reducción extrema de lo que está sucediendo, puede encontrar una explicación más detallada en Depuración de documentos HTML Builds .

Para solucionar/eludir este problema, solo necesita agregar la siguiente condición donde está utilizando el objeto del document .

 if(window !== "undefined"){ // your document or window manipulation }

Puede usar tanto la window como el document en la condición, son equivalentes en términos de omitir la representación del lado del servidor.

Si no está usando un document en su proyecto, el problema aún puede surgir si algunas de sus dependencias (terceros) lo están usando (es decir, lienzos, mapas, controles deslizantes que usan cálculos de JavaScript, etc.). Si ese es su escenario, la forma de evitarlo es ignorar la agrupación de paquetes web agregando un cargador null :

 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html" || stage === "develop-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } }

Donde /bad-module/ es una expresión regular ( test ) (por eso está entre barras, / ). En este caso, debe reemplazar bad-module por el nombre de la carpeta de dependencia en node_modules .