Gatsby: La fenêtre n'est pas définie

Oui, pendant le développement, les composants de réaction ne sont exécutés que dans le navigateur où window est défini. Lors de la construction, Gatsby rend ces composants sur le serveur où window n'est pas défini. Généralement, avec React, la solution consiste uniquement à accéder à window dans componentDidMount ou à vérifier que window existe avant d'y accéder. Pour les bibliothèques tierces qui ne le font pas, ce que vous avez fait est très bien.

@KyleAMathews Je n'arrive pas à faire tirer componentDidMount dans html.js ou _template.jsx utilisant gatsby develop , peut-être que ce n'est pas censé le faire, ou je le fais Quelque chose ne va pas?

@hitchcott peux-tu nous en dire un peu plus sur ta construction ? Je viens d'installer semantic-ui dans un projet gatsby mais mon CSS ne fonctionne pas. Je ne sais pas comment charger le CSS dans ma page. React suppose que les styles en ligne sont corrects, mais comment les connaît-il ? De plus, je suppose que je devrais configurer webpack pour faire la version LESS au lieu de gulp. Vous venez d'installer le webpack-lessloader ?

@Maxhodges — C'est Webpack, pas React, qui « connaît » vos styles. Webpack le sait car vous importez ou avez besoin du ou des fichiers compilés quelque part dans les fichiers JS qui sont regroupés.

Par exemple, j'importe mon styles.css dans le fichier _template.js , donc lorsque Webpack crée le bundle, il inclut ces styles - en ligne en mode développement ; fichier référencé externe en production ( regardez cssLink ici pour un exemple ).

Il n'y a pas besoin d'un chargeur LESS supplémentaire, car Gatsby en inclut déjà un dans sa configuration Webpack par défaut .

pour ceux d'entre vous qui ont suivi les instructions de la page Gatsby GitHub pour installer le site docs...
import { colors } from 'utils/colors'
est le fauteur de troubles et après avoir commenté ceci et ${colors.bg}, le site s'est bien développé.

Serait-il possible d'afficher un meilleur message d'erreur lorsque cela se produit ? Je ne sais pas où trouver l'erreur.

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.

C'est une très bonne idée ! Appuyez actuellement fort sur 1.0, donc je n'obtiendrai pas cela
bientôt mais pour l'instant, ouvrez simplement public/render-page.js au numéro de ligne
indiqué là (44529) et voyez quel code cause des problèmes.

Le mercredi 17 mai 2017 à 11h45 Thomas Seberechts [email protected]
a écrit:

Serait-il possible d'afficher un meilleur message d'erreur lorsque cela se produit ? je
je ne sais pas où trouver l'erreur.

Échec de la génération du HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
jeter l'erreur ;
^
Erreur : ReferenceError : la fenêtre n'est pas définie
à Object.defineProperty.value (render-page.js:44529:79)
à __webpack_require__ (render-page.js:30:30)
à Object.exports.__esModule (render-page.js:42560:24)
à __webpack_require__ (render-page.js:30:30)
à Object.defineProperty.value (render-page.js:42533:51)
à __webpack_require__ (render-page.js:30:30)
à l'objet.(render-page.js:80:19)
à __webpack_require__ (render-page.js:30:30)
à Object.assign.i (render-page.js:50:18)
à render-page.js:53:10
error La commande a échoué avec le code de sortie 1.

-
Vous recevez ceci parce que vous avez été mentionné.

Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

Ça a marché! THX.

Astuce : mettez typeof window !== 'undefined' && window.whaterver-you-need pour résoudre ce problème.

l'erreur disparaît lors de l'utilisation de componetDidMount

J'ai un problème similaire, mais j'utilise localStorage pour conserver une partie de mon état de redux sur le navigateur. Comment contourner ce problème si je ne peux pas utiliser window.localStorage dans le fichier store.js ?

??

Merci!

@gregorskii

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

puis, windowGlobal.localStorage

Oui, cela a fonctionné, mais j'ai dû me moquer du stockage local en utilisant https://www.npmjs.com/package/localstorage-memory :

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

En utilisant https://www.npmjs.com/package/redux-localstorage.

accès uniquement à window en componentDidMount

Gist pour les js tiers.

// 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 suggestion de

WebpackError : l'élément n'est pas défini

Mettre les importations dans componentDidMount a fonctionné.

 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);
    }
  }

Oui, pendant le développement, les composants de réaction ne sont exécutés que dans le navigateur où la fenêtre est définie. Lors de la construction, Gatsby rend ces composants sur le serveur où la fenêtre n'est pas définie. Généralement, avec React, la solution à cela consiste uniquement à accéder à la fenêtre dans componentDidMount ou à vérifier que cette fenêtre existe avant d'y accéder. Pour les bibliothèques tierces qui ne le font pas, ce que vous avez fait est très bien.

Il serait super utile de faire apparaître cela tôt / bien en évidence. J'essaie de construire pour la première fois, et il y a beaucoup de problèmes que je dois résoudre maintenant, car je ne savais pas que cela deviendrait un problème. C'est particulièrement stressant car j'ai un besoin urgent de le déployer ; Je soumets une proposition pour quelque chose et j'ai besoin que le site soit en ligne.

Je cherche uniquement à déployer sur les pages Github (pour l'instant, au moins), et je n'ai donc pas besoin de SSR. Existe-t-il un moyen de créer uniquement pour les clients ?

Il semble qu'avec Gatsby v2, vous devez choisir entre les importations es6 et commonjs, vous ne pourrez plus les mélanger pour des raisons liées au webpack 4.

Cela étant, et en supposant que vous utilisiez déjà les importations es6, il semblerait que la solution de @jfaeldon soit celle à utiliser ici et celle de @hitchcott ne fonctionnera plus.

Quelqu'un peut-il le confirmer ?

@joshwcomeau est tout à fait d'accord avec vous, je ne pense pas non plus que ce soit une bonne idée d'exécuter dev dans le navigateur uniquement et de créer node.js. La différence est si grande, et comme dans les environnements DEV et PROD, vous voulez rendre les environnements aussi similaires que possible, je pense que gatsby devrait faire de même, exécuter à la fois dev et build dans un environnement aussi similaire que possible.

alors puis-je le faire fonctionner dans le navigateur ? Je n'ai pas besoin de SSR.

Salut,
Je rencontre le même problème ici, Coverflow fonctionne bien pour le développement de gatsby mais pour la construction, il renvoie une erreur :
WebpackError : la fenêtre n'est pas définie

     - 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

importer Coverflow à partir de « react-coverflow » ;
importer { StyleRoot } depuis 'radium'

La classe Team étend React.Component {

rendre(){
revenir(

displayQuantityOfSide={2}
la navigation
DEFILEMENT infini
activerEntête
actif={0}
média={{
' @media (max-width : 720px)' : {
largeur : '100%',
hauteur : '200px'
},
' @media (min-width : 720px)' : {
largeur : '100%',
hauteur : '400px',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

exporter l'équipe par défaut ;

J'ai eu cette erreur après avoir installé quelques packages, donc cela doit être dans l'un d'entre eux - mais je ne trouve pas où est le problème. Quelqu'un a-t-il des conseils pour mieux comprendre de quel package npm il pourrait s'agir? L'erreur est frustrantement générique.

peut-être que la mise en œuvre de réaction est meilleure?
https://react.semantic-ui.com/ et https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz, l'explication la plus simple que je puisse offrir est que lorsque vous émettez gatsby develop pour construire le projet sur lequel vous travaillez en développement, ou gatsby build && gatsby serve pour une version de production, Gatsby générera en interne les pages et les css, les liens et ainsi de suite. Mais une chose à garder à l'esprit est que cela se fait côté serveur, côté nœud, pas côté client. Ainsi, le nœud n'a pas accès à ces API spécifiques, car elles sont uniquement destinées au client. Et avec cela, certains packages ne fonctionneront pas bien avec Gatsby hors de la boîte. Certains changements pourraient être nécessaires pour qu'ils "jouent bien"

@jonniebigodes - Merci pour cela. Je pense que je comprends le _pourquoi_ maintenant. Mon truc est maintenant le _what_. J'ai bêtement fait une tonne de travail et j'ai du mal à isoler quel paquet est à l'origine du problème. Il n'y a aucun moyen de gatsby build avec des rapports d'erreurs plus détaillés ?

@jonniebigodes - J'ai trouvé le paquet à l'origine du problème : réagir aux toasts . Mon prochain problème est de savoir comment le résoudre.

_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 quelque chose comme le bloc de code ci-dessous. react est chargé après la réception du bundle statique initial. Ainsi, au moment où l'utilisateur atteint _handleSubmit window existera.

Veuillez noter que si react toasts appelle window sur import vous pourriez toujours rencontrer l'erreur.

_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)
    }
  }

Même problème. Je vais trouver une autre bibliothèque Toast ou créer la mienne. Ne devrait pas me tuer.

@joserocha3 ce morceau de code ne fonctionnera qu'en mode développement. Lorsqu'un appel à une version de production est émis, cela échouera pendant l'étape error Building static HTML failed . Comme Gatsby introspectera les importations et avec cette recherche du package en question, il échouera car celui-ci utilise des API non natives de node.js et @wmlutz, le code de ce package est assez simple et ne devrait pas poser trop de problèmes pour s'adapter à votre cas. Pourquoi ne pas créer un repo, vérifier le code et créer un ensemble de composants qui fonctionneront pour vous ?

Je suis d'accord avec @jonniebigodes sur le document dans ToastsContainer.tsx .

Ou essayez https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-387039877 mentionné ci-dessus.

La cause est le fonctionnement du mode strict, de l'UMD et du regroupement.

Le fork n'est pas nécessaire si vous utilisez patch-package .

Voir également https://github.com/webpack/webpack/issues/6677 et les problèmes liés.

Cela dépend du code tgat que vous utilisez et s'ils effectuent les vérifications appropriées ou utilisent la cible umd et définissent les objets globaux.

Bonjour à tous, j'ai toujours le même problème, je n'ai utilisé aucune fonction de fenêtre dans mon projet, mais la même erreur est toujours lancée, pourquoi j'ai celle-ci .. ?

1:09:03 : Build prêt à démarrer
11:09:05 : version de l'image de construction : 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05 : balise build-image : v3.3.2
11:09:05 : version du robot de construction : 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 : Récupération des dépendances mises en cache
11:09:06 : Début du téléchargement du cache de 194,6 Mo
11:09:07 AM : Téléchargement du cache terminé en 1.636969993s
11:09:07 : Début de l'extraction du cache
11:09:17 AM: Fini l'extraction du cache en 9.693656527s
11 h 09 min 17 s : récupération du cache terminée en 11.478174001s
11:09:17 : Commencer à préparer le dépôt pour la construction
11 h 09 min 17 s : préparation de la référence Git pull/21/head
11:09:18 : Trouvé netlify.toml. Remplacement de la configuration du site
11:09:18 : Lancement du script de compilation
11:09:18 : Installation des dépendances
11 h 09 min 19 s : démarrage de la restauration de la version du nœud mis en cache
11 h 09 min 22 s : restauration de la version du nœud en cache terminée
11:09:23 : 10.16.0 est déjà installé.
11:09:24 : utilise maintenant le nœud v10.16.0 (npm v6.9.0)
11:09:25 : tentative de la version 2.6.2 de ruby, lecture à partir de l'environnement
11:09:27 : Utilisation de la version 2.6.2 de ruby
11:09:27 : Utilisation de PHP version 5.6
11:09:27: Début de la restauration des modules de nœuds mis en cache
11:09:27: Fin de la restauration des modules de nœuds mis en cache
11:09:27: Début de la restauration du cache de fil mis en cache
11:09:27: Fin de la restauration du cache de fil mis en cache
11 h 09 min 28 s : installation des modules NPM à l'aide de la version 1.9.4 de Yarn
11:09:29 : installation du fil v1.9.4
11:09:29 : avertissement package.json : aucun champ de licence
11 h 09 min 29 s : avertissement package-lock.json trouvé. Votre projet contient des fichiers de verrouillage générés par des outils autres que Yarn. Il est conseillé de ne pas mélanger les gestionnaires de packages afin d'éviter les incohérences de résolution causées par des fichiers de verrouillage non synchronisés. Pour effacer cet avertissement, supprimez package-lock.json.
11:09:29 : avertissement [email protected] : aucun champ de licence
11:09:29 : [1/4] Résolution des packages...
11:09:31 : [2/4] Récupération des packages...
11 h 09 min 31 s : (nœud : 1201) [DEP0005] Avertissement de dépréciation : Buffer() est déprécié en raison de problèmes de sécurité et de convivialité. Veuillez utiliser les méthodes Buffer.alloc(), Buffer.allocUnsafe() ou Buffer.from() à la place.
11:10:04 AM : info [email protected] : La plateforme "linux" est incompatible avec ce module.
11:10:04 : info "[email protected]" est une dépendance facultative et une vérification de compatibilité ayant échoué. L'exclure de l'installation.
11:10:04 : [3/4] Liaison des dépendances...
11:10:04 : l'avertissement "gatsby > [email protected]" a une dépendance incorrecte entre les pairs "graphql@^0.12.0 || ^0.13.0".
11:10:04 : l'avertissement « gatsby > [email protected] » a une dépendance incorrecte entre les pairs « graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
11:10:04 : l'avertissement « gatsby > [email protected] » a une dépendance de pair incorrecte « graphql@^0.13.0 ».
11:10:04 : l'avertissement « gatsby-plugin-netlify > [email protected] » a une dépendance de pairs non satisfaite « webpack@>=4.4.0 ».
11:10:04 : l'avertissement « gatsby-plugin-sass > [email protected] » a une dépendance de pair non satisfaite « webpack@^3.0.0 || ^4.0.0 ».
11:10:04 AM : avertissement " > [email protected]" a une dépendance de pair non satisfaite "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
11 h 10 min 04 s : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immuable@^3.7.6 ».
11:10:04 : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-auth@^2.0.4".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-lib-util@^2.1.0 ».
11 h 10 min 04 s : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.6 ».
11 h 10 min 04 s : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11 h 10 min 04 s : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immuable@^3.7.6 ».
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-auth@^2.0.0".
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-util@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04 : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-auth@^2.0.0".
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-util@^2.0.0".
11:10:04 AM : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-ui-default@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immutable@^3.7.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-lib-auth@^2.0.0 ».
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-util@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immuable@^3.8.2 ».
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-lib-util@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-immutable-proptypes@^2.1.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-lib-util@^2.0.4 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-immutable-proptypes@^2.1.0 ».
11:10:04 : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "moment@^2.11.2".
11:10:04 : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-ui-default@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04: l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "immutable@^3.7.6".
11:10:04 : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-ui-default@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04 : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "react-immutable-proptypes@^2.1.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immutable@^3.7.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immutable@^3.7.6 ».
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-ui-default@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04: l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "react-immutable-proptypes@^2.1.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04: l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "react-immutable-proptypes@^2.1.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immuable@^3.7.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.5 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-immutable-proptypes@^2.1.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immutable@^3.7.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.6 ».
11:10:04: l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "react-immutable-proptypes@^2.1.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immuable@^3.7.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « react-emotion@^9.2.5 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « immuable@^3.7.6 ».
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "react-immutable-proptypes@^2.1.0".
11:10:04 : l'avertissement « netlify-cms > [email protected] » a une dépendance de pair non satisfaite « netlify-cms-ui-default@^2.0.0 ».
11 h 10 min 04 s : l'avertissement "netlify-cms > [email protected]" a une dépendance de pair non satisfaite "netlify-cms-ui-default@^2.0.0".
11:10:04 : l'avertissement « netlify-cms > netlify-cms-widget-date > [email protected] » a une dépendance de pair non satisfaite « moment@>=2.16.0 ».
11:10:04 : l'avertissement "netlify-cms > netlify-cms-widget-markdown > [email protected]" a une dépendance de pair non satisfaite "immutable@>=3.8.1".
11:10:04 : l'avertissement « netlify-cms > netlify-cms-widget-markdown > [email protected] » a une dépendance de pair non satisfaite « immutable@^3.8.2 ».
11:10:04 : l'avertissement « netlify-cms > netlify-cms-widget-markdown > [email protected] » a une dépendance incorrecte entre les pairs « slate@^0.32.0 ».
11:10:04 : l'avertissement « netlify-cms > netlify-cms-widget-markdown > [email protected] » a une dépendance de pair non satisfaite « immutable@^3.8.1 ».
11:10:04 : l'avertissement "netlify-cms > netlify-cms-widget-markdown > [email protected]" a une dépendance incorrecte entre les pairs "slate@^0.33.3".
11:10:04: l'avertissement "netlify-cms > netlify-cms-widget-markdown > [email protected]" a une dépendance de pairs non satisfaite "slate-schema-violations@^0.1.7".
11:10:04 AM : l'avertissement "netlify-cms > netlify-cms-widget-markdown > [email protected]" a une dépendance de pair non satisfaite "immutable@>=3.8.1".
11:10:04 : l'avertissement « netlify-cms > netlify-cms-widget-markdown > [email protected] » a une dépendance de pair non satisfaite « immutable@>=3.8.1 ».
11:10:04 AM : l'avertissement "netlify-cms > netlify-cms-core > redux-notifications > [email protected]" a une dépendance incorrecte entre pairs "redux@^2.0.0 || ^3.0.0".
11:10:04 AM : l'avertissement "netlify-cms > netlify-cms-widget-markdown > slate-react > [email protected]" a une dépendance de pair non satisfaite "immutable@>=3.8.1".
11:10:04 : l'avertissement " > [email protected]" a une dépendance incorrecte entre les pairs "react@^16.8.3".
11:10:21 AM : [4/4] Création de nouveaux packages...
11h10:26 : fait en 56,59 s.
11 h 10 min 26 s : modules NPM installés à l'aide de Yarn
11:10:26 AM : warning package.json : Aucun champ de licence
11:10:26 AM: Commencé à restaurer le cache go mis en cache
11:10:26 AM: Fin de la restauration du cache Go mis en cache
11:10:27 : GOOS désactivé ;
11:10:27 AM : GOARCH désactivé ;
11 h 10 min 27 s : exportez GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64' ;
11 h 10 min 27 s : export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}" ;
11:10:27 : aller à la version >&2 ;
11:10:27 : export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env' ;
11:10:27 : allez à la version go1.12 linux/amd64
11:10:27 AM : Installation des commandes manquantes
11:10:27 : vérifier le répertoire d'exécution
11:10:27 : Exécution de la commande utilisateur : npm run build
11:10:27 : > [email protected] build /opt/build/repo
11:10:27 : > run-p build :**
11:10:28 : > [email protected] build:app /opt/build/repo
11:10:28 : > npm run clean && gatsby build
11:10:28 : > [email protected] nettoyer /opt/build/repo
11:10:28 : > rimraf .cache public
11:10:32 : Utilisation de la configuration de l'environnement : 'production'
11 h 10 min 32 s : ouverture réussie et validation de gatsby-configs — 0,059 s
11:10:32 AM : succès de chargement des plugins — 0,454 s
11 h 10 min 34 s : succès sur PreInit — 1,665 s
11 h 10 min 34 s : suppression réussie des fichiers html et css des versions précédentes : 0,008 s
11 h 10 min 34 s : initialisation réussie du cache — 0,011 s
11 h 10 min 34 s : copie réussie des fichiers gatsby — 0,035 s
11:10:34 AM : succès sur PreBootstrap — 0,009 s
11 h 10 min 51 s : nœuds source et de transformation de succès — 17,231 s
11 h 10 min 52 s : schéma de construction de succès — 0,896 s
11:10:55 AM : succès createPages — 2,772 s
11:10:55 AM : succès createPagesStatefully — 0,062 s
11:10:55 AM : succès onPreExtractQueries — 0,006 s
11:10:56 AM : schéma de mise à jour réussie — 0,712 s
11:10:56 AM : requêtes d'extraction réussies à partir de composants - 0,166 s
11:10:57 AM : requêtes graphql exécutées avec succès — 1,068 s — 1460/1460 1368,43 requêtes/seconde
11 h 10 min 57 s : écriture réussie des données de la page — 0,035 s
11 h 10 min 57 s : écriture réussie des données de redirection — 0,001 s
11:10:57 AM : succès surPostBootstrap — 0,010 s
11:10:57 AM : info bootstrap terminée - 28.304 s
11:12:14 AM : succès Création de bundles JavaScript et CSS de production — 76,329 s
11:12:14 :
11:12:14 AM : gatsby-plugin-purgecss :
11:12:14 : ancien CSS Taille : 305,33 Ko
11:12:14 AM : Nouvelle taille CSS : 305,33 Ko (-0,00%)
11 h 12 min 14 s : suppression d'environ 0,00 Ko de CSS
11:12:14 :
11 h 12 min 23 s : échec de la création du code HTML statique
11 h 12 min 23 s : consultez notre page de documentation sur le débogage des versions HTML pour obtenir de l'aide https://gatsby.app/debug-html
11:12:23:48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11:12:23: 49 | }
11:12:23 : > 50 | }(la fenêtre));
11:12:23 : | ^
11:12:23:51 |
11:12:23 :
11:12:23 AM : WebpackError : ReferenceError : la fenêtre n'est pas définie
11:12:23 :
11:12:23 AM: - index.js:50 Objet../node_modules/youtube-iframe/index.js
11:12:23 : [lib]/[youtube-iframe]/index.js:50:2
11:12:23 :
11:12:23 : - bootstrap :19 __webpack_require__
11:12:23 : lib/webpack/ bootstrap : 19 : 1
11:12:23 :
11:12:23 AM : - MediaAutoTrack.js:15 Object../node_modules/@aws-amplify/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAutoTrack.js
11 h 12 min 23 s : [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAu toTrack.js : 15 : 27
11:12:23 :
11:12:23: - bootstrap:19 __webpack_require__
11:12:23 : lib/webpack/ bootstrap : 19 : 1
11:12:23 :
11:12:23: - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/Amazon PersonalizeHelper/index.js
11:12:23 : [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
11:12:23 :
11:12:23 : - bootstrap :19 __webpack_require__
11:12:23 : lib/webpack/ bootstrap : 19 : 1
11:12:23 :
11:12:23 AM : - Objet AmazonPersonalizeProvider.js:52../node_modules/@aws-amplify/analytics /lib/Providers/AmazonPersonalizeProvider.js
11 h 12 min 23 s : [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeProvider.js:52 :33
11:12:23 :
11:12:23 : - bootstrap :19 __webpack_require__
11:12:23 : lib/webpack/ bootstrap : 19 : 1
11:12:23 :
11:12:23 AM : - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/index. js
11:12:23 : [lib]/[@aws-amplify]/analytics/lib/Providers/index.js:7:35
11:12:23 :
11:12:23 : - bootstrap :19 __webpack_require__
11:12:23 : lib/webpack/ bootstrap : 19 : 1
11:12:23 :
11:12:23 AM: - index.js:33 Object../node_modules/@aws-amplify/analytics/lib/index.js
11:12:23 : [lib]/[@aws-amplify]/analytics/lib/index.js:33:10
11 h 12 min 24 s : échec lors de l'étape « chantier de construction » : le script de génération a renvoyé un code de sortie différent de zéro : 1
11:12:23 :
11:12:23 : - bootstrap :19 __webpack_require__
11:12:23 : lib/webpack/ bootstrap : 19 : 1
11:12:23 :
11 h 12 min 24 s : fermeture de la journalisation, 58 messages en attente

J'utilise netlify pour mon côté serveur

Si vous êtes certain que vous n'utilisez pas window, un paquet l'est probablement.

Vous devez définir une fenêtre vide dans webpack.

Ce n'est pas très simple, mais cela vous mènera dans la bonne direction :

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

Je ne sais pas vraiment pourquoi ce problème est fermé? Ce problème, en fait, est probablement le plus critique en ce qui concerne Gatsby et toute sa philosophie devrait être modifiée et corrigée.

C'est vraiment dommage que le navigateur et la logique SSR soient couplés. Sans parler du fait que vous exécutez une version du code en développement et de sa divergence en production. C'est vraiment mauvais. Pourquoi voudriez-vous faire de telles constructions? La seule différence entre ces deux devrait être les fonctionnalités de débogage activées dans le développement et par exemple les cartes de source ou autre. Cela rend vraiment difficile et engageant l'utilisation de Gatsby.

À mon avis, vous devriez rouvrir cela et donner la priorité à ce problème. Ce problème fait que les gens abandonnent littéralement des milliers de modules qui dépendent de la fenêtre et tous ne peuvent pas être importés dans componentDidMount, par exemple des modules de type HOC, etc.

Bien que je ne sois pas en désaccord, c'est un point douloureux. On pourrait argumenter que ces bibliothèques écrites avec une logique autour de la variable de fenêtre ne sont pas adaptées à une utilisation SSR. Ces bibliothèques elles-mêmes doivent vérifier si la fenêtre est définie et fonctionner en mode SSR.

Pas d'autres commentaires sur le point plus profond que vous faites, c'est une discussion philosophique mieux adaptée aux mainteneurs.

Avec tout le respect que je vous dois, ce que vous avez écrit n'a aucun sens. Pourquoi quelqu'un qui construit une bibliothèque "navigateur uniquement" vérifierait-il si l'objet fenêtre existe ? Pouvez-vous nommer ou pointer vers une seule bibliothèque sur l'ensemble du registre NPM qui fait cela ? Ou vous dites que toutes ces bibliothèques que les gens ont écrites sont mal écrites ?

Ou les gens devraient-ils considérer qu'il existe un cadre appelé « Gatsby » qui en a besoin ? On devrait pouvoir utiliser Gatsby à l'une ou l'autre extrémité et ces extrémités devraient être ENTIÈREMENT découplées. C'est le seul point, vraiment. Rien de philosophique là-dedans.

De par sa conception, Gatsby est un générateur de site statique. La plupart du travail qu'il fait pour accomplir cela est fait en dehors du navigateur au moment de la compilation. Ce n'est pas seulement un outil « client » ou « navigateur ».

Le rendu côté serveur est par définition effectué du côté « serveur », où « fenêtre » n'est pas une chose.

La compilation de Gatsby se fait avec Webpack, webpack par défaut ne câble pas de variable de fenêtre. D'après mon expérience, il n'y a pas qu'une seule façon d'adapter les bibliothèques clientes pour qu'elles fonctionnent sous webpack. Cela conduit à ce que la configuration de Gatsby elle-même ne soit pas capable de fournir une solution simple et unique pour réparer toutes les bibliothèques qui dépendent de « fenêtre ».

FWIW Je pense qu'il est logique de séparer la partie de l'outil pour discuter de la partie qui entrave ce que vous souhaitez faire.