Gatsby: La ventana no está definida

Sí, durante el desarrollo, los componentes de reacción solo se ejecutan en el navegador donde se define window . Al compilar, Gatsby procesa estos componentes en el servidor donde window no está definido. Generalmente con React, la solución a esto es solo acceder a window en componentDidMount o comprobar que existe window antes de acceder a él. Para las bibliotecas de terceros que no hacen esto, lo que ha hecho se ve muy bien.

@KyleAMathews Parece que no puedo hacer que componentDidMount dispare en html.js o _template.jsx usando gatsby develop , tal vez no se supone que debe hacerlo, o lo estoy haciendo ¿Ocurre algo?

@hitchcott, ¿puedes compartir un poco más sobre tu construcción? Acabo de instalar semantic-ui en un proyecto de gatsby pero mi CSS no funciona. No estoy seguro de cómo cargar el CSS en mi página. React supone que los estilos en línea sean correctos, pero ¿cómo los conoce? También supongo que debería configurar el paquete web para hacer la compilación MENOS en lugar de tragar. ¿Acabas de instalar webpack-lessloader?

@Maxhodges : es Webpack, no React, el que "conoce" tus estilos. Webpack lo sabe porque importa o necesita los archivos compilados en algún lugar de los archivos JS que se empaquetan.

Por ejemplo, importo mi styles.css en el archivo _template.js , por lo que cuando Webpack crea el paquete, incluye esos estilos: en línea cuando está en modo de desarrollo; archivo de referencia externo cuando está en producción ( mire cssLink aquí para ver un ejemplo ).

No es necesario un cargador LESS adicional, ya que Gatsby ya incluye uno en su configuración de Webpack predeterminada .

para aquellos de ustedes que siguieron las instrucciones en la página de Gatsby GitHub para instalar el sitio de documentos ...
import { colors } from 'utils/colors'
es el creador de problemas y después de comentar esto y $ {colors.bg} el sitio se desarrolló muy bien.

¿Sería posible mostrar un mensaje de error mejor cuando esto suceda? No tengo idea de dónde encontrar el error.

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.defineProperty.value (render-page.js:44529:79)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:42560:24)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:42533:51)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:80:19)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
error Command failed with exit code 1.

¡Qué buena idea! Actualmente presionando con fuerza en 1.0, así que no obtendré esto
pronto, pero por ahora, simplemente abra public / render-page.js en el número de línea
indicado allí (44529) y ver qué código está causando problemas.

El miércoles 17 de mayo de 2017 a las 11:45 a.m. Thomas Seberechts [email protected]
escribió:

¿Sería posible mostrar un mensaje de error mejor cuando esto suceda? I
no tengo idea de dónde encontrar el error.

No se pudo generar HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
tirar err;
^
Error: ReferenceError: la ventana no está definida
en Object.defineProperty.value (render-page.js: 44529: 79)
en __webpack_require__ (render-page.js: 30: 30)
en Object.exports .__ esModule (render-page.js: 42560: 24)
en __webpack_require__ (render-page.js: 30: 30)
en Object.defineProperty.value (render-page.js: 42533: 51)
en __webpack_require__ (render-page.js: 30: 30)
en Object.(render-page.js: 80: 19)
en __webpack_require__ (render-page.js: 30: 30)
en Object.assign.i (render-page.js: 50: 18)
en render-page.js: 53: 10
error El comando falló con el código de salida 1.

-
Recibes esto porque te mencionaron.

Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

¡Eso funciono! Gracias.

Sugerencia: coloque typeof window !== 'undefined' && window.whaterver-you-need para resolver esto.

el error desaparece al usar componetDidMount

Tengo un problema similar, pero estoy usando localStorage para conservar parte de mi estado redux en el navegador. ¿Cómo puedo evitar este problema si no puedo usar window.localStorage en el archivo store.js?

😢

¡Gracias!

@gregorskii

const windowGlobal = typeof window !== 'undefined' && window

luego, windowGlobal.localStorage

Ya esto funcionó, pero tuve que simular el almacenamiento local usando https://www.npmjs.com/package/localstorage-memory :

const windowGlobal = typeof window !== 'undefined' && window;
const localAdapter = windowGlobal ?
  adapter(windowGlobal.localStorage) :
  adapter(memoryStorage)
;

Usando https://www.npmjs.com/package/redux-localstorage.

solo acceda a window en componentDidMount

Gist para js de terceros.

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...

La sugerencia de

WebpackError: el elemento no está definido

Poner las importaciones dentro de componentDidMount funcionó.

 componentDidMount() {
    try {
      this.UIkit = require("uikit/dist/js/uikit");
      this.Icons = require("uikit/dist/js/uikit-icons");
      this.UIkit.use(this.Icons);
    } catch (e) {
      console.error(e);
    }
  }

Sí, durante el desarrollo, los componentes de reacción solo se ejecutan en el navegador donde se define la ventana. Al construir, Gatsby renderiza estos componentes en el servidor donde la ventana no está definida. Generalmente con React, la solución a esto es solo acceder a la ventana en componentDidMount o verificar que la ventana existe antes de acceder a ella. Para las bibliotecas de terceros que no hacen esto, lo que ha hecho se ve muy bien.

Sería muy útil sacar a la superficie esto temprano / de manera prominente. Estoy tratando de compilar por primera vez, y hay muchos problemas que tengo que solucionar ahora, ya que no sabía que esto se convertiría en un problema. Es particularmente estresante ya que necesito implementar esto con urgencia; Estoy enviando una propuesta para algo y necesito que el sitio esté en línea.

Solo estoy buscando implementar en Github Pages (por ahora, al menos), por lo que no necesito SSR. ¿Hay alguna forma de construir para los clientes?

Parece que con Gatsby v2, debe elegir entre las importaciones de es6 y commonjs, ya no podrá mezclarlas por razones relacionadas con el paquete web 4.

Siendo ese el caso, y asumiendo que ya está usando importaciones de es6, parecería que la solución de @ jfaeldon es la que se debe usar aquí y la de @ hitchcott ya no funcionará.

¿Alguien puede confirmar eso?

@joshwcomeau está completamente de acuerdo contigo, tampoco creo que sea una buena idea ejecutar dev solo en el navegador y compilar en node.js. La diferencia es tan grande, y como en el entorno DEV y PROD desea que los entornos sean lo más similares posible, creo que gatsby debería hacer lo mismo, ejecutar tanto dev como construir en un entorno que sea lo más similar posible.

Entonces, ¿puedo hacer que se ejecute en el navegador? No necesito SSR.

Hola,
Estoy experimentando el mismo problema aquí, Coverflow funciona bien para el desarrollo de gatsby, pero para la compilación arroja un error:
WebpackError: la ventana no está definida

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

importar Coverflow desde 'react-coverflow';
importar {StyleRoot} de 'radio'

class Team extiende React.Component {

hacer(){
regreso(

displayQuantityOfSide = {2}
navegación
scroll infinito
enableHeading
activo = {0}
media = {{
' @media (ancho máximo: 720px)': {
ancho: '100%',
altura: '200px'
},
' @media (ancho mínimo: 720px)': {
ancho: '100%',
altura: '400px',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

exportar equipo predeterminado;

Recibí este error después de instalar un par de paquetes, por lo que debe estar en uno de esos, pero no puedo encontrar dónde está el problema. ¿Alguien tiene consejos sobre cómo averiguar mejor qué paquete npm podría ser? El error es frustrantemente genérico.

tal vez la implementación de reacción es mejor?
https://react.semantic-ui.com/ y https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz, la explicación más simple que puedo ofrecer es que cuando emite gatsby develop para construir el proyecto en el que está trabajando en desarrollo, o gatsby build && gatsby serve para una compilación de producción, Gatsby generará internamente las páginas y el CSS, enlaces, etc. Pero una cosa a tener en cuenta es que esto se hace en el lado del servidor, en el lado del nodo, no en el lado del cliente. Por lo tanto, node no tiene acceso a esas apis específicas, ya que son solo para uso del cliente. Y con eso, algunos paquetes no funcionarán bien con Gatsby desde el primer momento. Es posible que se requieran algunos cambios para que "jueguen bien"

@jonniebigodes - Gracias por eso. Creo que ahora entiendo el _por qué_. Lo mío ahora es el _qué_. Estúpidamente hice un montón de trabajo y tengo problemas para aislar qué paquete está causando el problema. ¿No hay forma de gatsby build con informes de errores más detallados?

@jonniebigodes - Descubrí el paquete que causa el problema: reaccionar tostadas . Mi próximo problema es averiguar cómo solucionarlo.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      ToastsStore.error("There was an error: " + result.msg)
    }
  }

@wmlutz algo como el siguiente bloque de código. react se carga después de recibir el paquete estático inicial. Entonces, para cuando el usuario alcance _handleSubmit window existirá.

Tenga en cuenta que si react toasts llama a window en import , es posible que aún experimente el error.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      if (window) ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      if (window) ToastsStore.error("There was an error: " + result.msg)
    }
  }

Mismo problema. Buscaré otra biblioteca de Toast o haré la mía propia. No debería matarme.

@ joserocha3 ese fragmento de código solo funcionará en el modo de desarrollo. Cuando se emite una llamada a una compilación de producción, fallará durante la etapa error Building static HTML failed . Como Gatsby hará una introspección de las importaciones y con esa búsqueda del paquete en cuestión, fallará porque este está usando algunas apis no nativas de node.js y @wmlutz, el código para ese paquete es bastante sencillo y no debería tomar demasiados problemas. para ajustar a su caso. ¿Por qué no bifurcar el repositorio, verificar el código y crear un conjunto de componentes que funcionarán para usted?

Estoy de acuerdo con @jonniebigodes sobre la bifurcación. La fuente del repositorio son solo unos pocos archivos. La llamada infractora es una referencia document en ToastsContainer.tsx .

O pruebe https://github.com/gatsbyjs/gatsby/issues/309#issuecomment -387039877 mencionado anteriormente.

La causa es cómo funcionan el modo estricto, UMD y agrupación.

La bifurcación no es necesaria si usa patch-package .

Consulte también https://github.com/webpack/webpack/issues/6677 y los problemas vinculados.

Depende del código tgat que use y si hacen las verificaciones adecuadas o usan el objetivo umd y definen los objetos globales.

Hola gente, todavía tengo el mismo problema. No utilicé ninguna función de ventana en mi proyecto, pero todavía está arrojando el mismo error, ¿por qué tengo este ...?

1:09:03 AM: Construcción lista para comenzar
11:09:05 AM: versión de imagen de compilación: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05 AM: etiqueta de imagen de compilación: v3.3.2
11:09:05 AM: versión buildbot: 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 AM: Obteniendo dependencias en caché
11:09:06 AM: Comenzando a descargar caché de 194.6MB
11:09:07 AM: Finalizó la descarga de caché en 1.636969993s
11:09:07 AM: Comenzando a extraer caché
11:09:17 AM: Finalizó la extracción de caché en 9.693656527s
11:09:17 AM: Finalizó la búsqueda de caché en 11.478174001s
11:09:17 AM: Comenzando a preparar el repositorio para la compilación
11:09:17 AM: Preparando Git Reference pull / 21 / head
11:09:18 AM: Se encontró netlify.toml. Anulación de la configuración del sitio
11:09:18 AM: Iniciando el script de compilación
11:09:18 AM: Instalación de dependencias
11:09:19 AM: Se inició la restauración de la versión del nodo en caché
11:09:22 AM: Finalizó la restauración de la versión del nodo en caché
11:09:23 AM: v10.16.0 ya está instalado.
11:09:24 AM: Ahora usando el nodo v10.16.0 (npm v6.9.0)
11:09:25 AM: Intentando ruby ​​versión 2.6.2, leer desde el entorno
11:09:27 AM: usando ruby ​​versión 2.6.2
11:09:27 AM: Usando PHP versión 5.6
11:09:27 AM: Se inició la restauración de los módulos de nodo almacenados en caché
11:09:27 AM: Finalizó la restauración de los módulos de nodo almacenados en caché
11:09:27 AM: Comenzó a restaurar el caché de hilo almacenado en caché
11:09:27 AM: Se terminó de restaurar el caché de hilo almacenado en caché
11:09:28 AM: Instalación de módulos NPM usando Yarn versión 1.9.4
11:09:29 AM: instalación de hilo v1.9.4
11:09:29 AM: paquete de advertencia.json: sin campo de licencia
11:09:29 AM: se encontró la advertencia package-lock.json. Su proyecto contiene archivos de bloqueo generados por herramientas distintas de Yarn. Se recomienda no mezclar administradores de paquetes para evitar inconsistencias de resolución causadas por archivos de bloqueo no sincronizados. Para borrar esta advertencia, elimine package-lock.json.
11:09:29 AM: advertencia [email protected]: Sin campo de licencia
11:09:29 AM: [1/4] Resolviendo paquetes ...
11:09:31 AM: [2/4] Obteniendo paquetes ...
11:09:31 AM: (nodo: 1201) [DEP0005] DeprecationWarning: Buffer () está en desuso debido a problemas de seguridad y usabilidad. En su lugar, utilice los métodos Buffer.alloc (), Buffer.allocUnsafe () o Buffer.from ().
11:10:04 AM: info [email protected]: La plataforma "linux" es incompatible con este módulo.
11:10:04 AM: info "[email protected]" es una dependencia opcional y una verificación de compatibilidad fallida. Excluyéndolo de la instalación.
11:10:04 AM: [3/4] Vinculando dependencias ...
11:10:04 AM: advertencia "gatsby> [email protected]" tiene dependencia de pares incorrecta "graphql@^0.12.0 || ^ 0.13.0".
11:10:04 AM: advertencia "gatsby> [email protected]" tiene dependencia de pares incorrecta "graphql@^0.10.0 || ^ 0.11.0 || ^ 0.12.0 || ^ 0.13.0".
11:10:04 AM: la advertencia "gatsby> [email protected]" tiene una dependencia de pares incorrecta "graphql@^0.13.0".
11:10:04 AM: advertencia "gatsby-plugin-netlify> [email protected]" tiene dependencia de pares no satisfecha "webpack @> = 4.4.0".
11:10:04 AM: advertencia "gatsby-plugin-sass> [email protected]" tiene dependencia de pares no satisfecha "webpack@^3.0.0 || ^ 4.0.0".
11:10:04 AM: advertencia "> [email protected]" tiene dependencia de pares no satisfecha "webpack@^2.0.0 || ^ 3.0.0 || ^ 4.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-auth@^2.0.4".
11:10:04 AM: la advertencia "netlify-cms> [email protected]" tiene una dependencia de pares no satisfecha "netlify-cms-lib-util@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: la advertencia "netlify-cms> [email protected]" tiene una dependencia de pares no satisfecha "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.8.2".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: la advertencia "netlify-cms> [email protected]" tiene una dependencia de pares no satisfecha "netlify-cms-lib-util@^2.0.4".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "moment@^2.11.2".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.5".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-emotion@^9.2.5".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.7.6".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "react-immutable-proptypes@^2.1.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> [email protected]" tiene dependencia de pares no satisfecha "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-date> [email protected]" tiene dependencia de pares no satisfecha "moment @> = 2.16.0".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene dependencia de pares no satisfecha "inmutable @> = 3.8.1".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.8.2".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene una dependencia de pares incorrecta "slate@^0.32.0".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene dependencia de pares no satisfecha "immutable@^3.8.1".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene una dependencia de pares incorrecta "slate@^0.33.3".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene dependencia de pares no satisfecha "slate-schema-violations@^0.1.7".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene dependencia de pares no satisfecha "inmutable @> = 3.8.1".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> [email protected]" tiene dependencia de pares no satisfecha "inmutable @> = 3.8.1".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-core> redux-Notifications> [email protected]" tiene una dependencia de pares incorrecta "redux@^2.0.0 || ^ 3.0.0".
11:10:04 AM: advertencia "netlify-cms> netlify-cms-widget-markdown> slate-react> [email protected]" tiene dependencia de pares no satisfecha "inmutable @> = 3.8.1".
11:10:04 AM: advertencia "> [email protected]" tiene dependencia de pares incorrecta "react@^16.8.3".
11:10:21 AM: [4/4] Construyendo paquetes nuevos ...
11:10:26 AM: Hecho en 56.59s.
11:10:26 AM: Módulos NPM instalados usando Yarn
11:10:26 AM: paquete de advertencia.json: sin campo de licencia
11:10:26 AM: Se inició la restauración de la caché de Go almacenada en caché
11:10:26 AM: Finalizó la restauración de la caché de Go almacenada en caché
11:10:27 AM: desarmar GOOS;
11:10:27 AM: GOARCH desarmado;
11:10:27 AM: exportar GOROOT = '/ opt / buildhome / .gimme / versions / go1.12.linux.amd64';
11:10:27 AM: export PATH = "/ opt / buildhome / .gimme / versions / go1.12.linux.amd64 / bin: $ {PATH}";
11:10:27 AM: versión go> & 2;
11:10:27 AM: exportar GIMME_ENV = '/ opt / buildhome / .gimme / env / go1.12.linux.amd64.env';
11:10:27 AM: versión go1.12 linux / amd64
11:10:27 AM: Instalación de comandos faltantes
11:10:27 AM: Verificar el directorio de ejecución
11:10:27 AM: Ejecución del comando de usuario: npm run build
11:10:27 AM:> [email protected] build / opt / build / repo
11:10:27 AM:> compilación run-p: **
11:10:28 AM:> [email protected] compilación: app / opt / build / repo
11:10:28 AM:> npm ejecutar clean && gatsby build
11:10:28 AM:> [email protected] limpiar / opt / build / repo
11:10:28 AM:> rimraf .cache público
11:10:32 AM: Uso de la configuración del entorno: 'producción'
11:10:32 AM: éxito al abrir y validar gatsby-configs - 0.059 s
11:10:32 AM: complementos de carga exitosa - 0.454 s
11:10:34 AM: éxito en PreInit - 1.665 s
11:10:34 AM: eliminar correctamente los archivos html y css de compilaciones anteriores - 0.008 s
11:10:34 AM: inicialización exitosa de caché - 0.011 s
11:10:34 AM: copia exitosa de archivos gatsby - 0.035 s
11:10:34 AM: éxito en PreBootstrap - 0.009 s
11:10:51 AM: fuente de éxito y nodos de transformación - 17.231 s
11:10:52 AM: esquema de creación de éxito: 0,896 s
11:10:55 AM: creación exitosa de páginas - 2.772 s
11:10:55 a.m.: éxito en la creación de páginas con estado - 0.062 s
11:10:55 AM: éxito enPreExtractQueries - 0.006 s
11:10:56 AM: esquema de actualización satisfactoria - 0,712 s
11:10:56 a.m.: consultas de extracción exitosa de componentes - 0.166 s
11:10:57 AM: ejecución satisfactoria de consultas graphql - 1.068 s - 1460/1460 1368.43 consultas / segundo
11:10:57 AM: escritura exitosa de datos de página - 0.035 s
11:10:57 AM: escritura exitosa de redireccionamiento de datos - 0.001 s
11:10:57 AM: éxito en PostBootstrap - 0.010 s
11:10:57 a. M .: finalización del arranque de información - 28.304 s
11:12:14 a.m.: exitoso desarrollo de producción de paquetes de JavaScript y CSS - 76.329 s
11:12:14 AM:
11:12:14 AM: gatsby-plugin-purgecss:
11:12:14 AM: CSS anterior Tamaño: 305.33 KB
11:12:14 AM: Nuevo tamaño de CSS: 305.33 KB (-0.00%)
11:12:14 AM: Eliminado ~ 0.00 KB de CSS
11:12:14 AM:
11:12:23 AM: error al crear HTML estático
11:12:23 AM: Consulte nuestra página de documentos sobre la depuración de compilaciones HTML para obtener ayuda https://gatsby.app/debug-html
11:12:23 AM: 48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11:12:23 AM: 49 | }
11:12:23 AM:> 50 | }(ventana));
11:12:23 AM: | ^
11:12:23 AM: 51 |
11:12:23 AM:
11:12:23 AM: WebpackError: ReferenceError: la ventana no está definida
11:12:23 AM:
11:12:23 AM: - index.js: Objeto 50 ../ node_modules / youtube-iframe / index.js
11:12:23 a. M .: [lib] / [youtube-iframe] /index.js:50:2
11:12:23 AM:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:23 AM: - MediaAutoTrack.js: 15 Object ../ node_modules / @ aws-amplify / analytics / lib / Provid ers / AmazonPersonalizeHelper / MediaAutoTrack.js
11:12:23 a. M .: [lib] / [@ aws-amplify] / analytics / lib / Providers / AmazonPersonalizeHelper / MediaAu toTrack.js: 15: 27
11:12:23 AM:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:23 AM: - index.js: 7 Object ../ node_modules / @ aws-amplify / analytics / lib / Providers / Amazon PersonalizeHelper / index.js
11:12:23 a. M .: [lib] / [@ aws-amplify] /analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
11:12:23 AM:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:23 AM: - AmazonPersonalizeProvider.js: 52 Object ../ node_modules / @ aws-amplify / analytics /lib/Providers/AmazonPersonalizeProvider.js
11:12:23 a. M .: [lib] / [@ aws-amplify] /analytics/lib/Providers/AmazonPersonalizeProvider.js:52: 33
11:12:23 AM:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:23 AM: - index.js: 7 Objeto ../ node_modules / @ aws-amplify / analytics / lib / Providers / index. js
11:12:23 a. M .: [lib] / [@ aws-amplify] /analytics/lib/Providers/index.js:7:35
11:12:23 AM:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:23 AM: - index.js: 33 Objeto ../ node_modules/@aws-amplify/analytics/lib/index.js
11:12:23 a. M .: [lib] / [@ aws-amplify] /analytics/lib/index.js:33:10
11:12:24 AM: falló durante la etapa 'construcción del sitio': el script de compilación devolvió un código de salida distinto de cero: 1
11:12:23 AM:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:24 AM: Apagando el registro, 58 mensajes pendientes

Estoy usando netlify para mi servidor

Si está seguro de que no está utilizando Windows, es probable que un paquete lo esté.

Tienes que definir una ventana vacía en webpack.

No es muy sencillo, pero esto te llevará en la dirección correcta:

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

No estoy muy seguro de por qué se ha resuelto este problema. Este problema, de hecho, es probablemente el más crítico cuando se trata de Gatsby y toda su filosofía debería cambiarse y arreglarse.

Es realmente malo que el navegador y la lógica SSR estén acoplados. Sin mencionar el hecho de que ejecuta una versión del código en desarrollo y su divergencia en producción. Esto es realmente malo. ¿Por qué harías tales construcciones? La única diferencia entre esos dos debería estar habilitada para depurar funcionalidades en desarrollo y, por ejemplo, mapas de origen o lo que sea. Esto realmente hace que sea difícil y atractivo usar Gatsby.

En mi opinión, debería reabrir esto y priorizar este tema. Este problema hace que la gente, literalmente, renuncie a miles de módulos que dependen de la ventana y no todos se pueden importar en componentDidMount, por ejemplo, módulos como HOC, etc.

Si bien no estoy en desacuerdo, este es un punto de dolor. Se podría argumentar que esas bibliotecas escritas con lógica alrededor de la variable de ventana no son adecuadas para el uso de SSR. Esas bibliotecas deben comprobar si la ventana está definida y funcionan en modo SSR.

No hay otros comentarios sobre el punto más profundo que está haciendo, esa es una discusión filosófica más adecuada para los mantenedores.

Con el debido respeto, lo que escribiste no tiene sentido. ¿Por qué alguien que está construyendo una biblioteca "solo para navegador" comprobaría si existe un objeto de ventana? ¿Puede nombrar o señalar una sola biblioteca en todo el registro de NPM que haga esto? ¿O estás diciendo que todas esas bibliotecas que la gente escribió están mal escritas?

¿O la gente debería considerar que existe un marco llamado "Gatsby" que necesita esto? Uno debe poder usar Gatsby en uno u otro extremo y esos extremos deben estar TOTALMENTE desacoplados. Este es el único punto, de verdad. No tiene nada de filosófico.

Por diseño, Gatsby es un generador de sitios estáticos. La mayor parte del trabajo que realiza para lograrlo se realiza fuera del navegador en tiempo de compilación. No es solo una herramienta de "cliente" o "navegador".

La representación del lado del servidor, por definición, se realiza en el lado del "servidor", donde la "ventana" no es una cosa.

La compilación de Gatsby se realiza con Webpack, webpack por defecto no conecta una variable de ventana. Desde mi experiencia, no hay solo una forma de adaptar las bibliotecas cliente para que funcionen con el paquete web. Esto lleva a que la propia configuración de Gatsby no sea capaz de proporcionar una solución única para arreglar todas las bibliotecas que dependen de la "ventana".

FWIW Creo que tiene sentido separar la parte de la herramienta para discutir qué parte de ella está impidiendo lo que desea hacer.