Comment résoudre l'erreur window is not defined dans GatsbyJS ?

Vous obtenez l'erreur "window is not defined" lorsque l'exécution du build de Gatsby résulte d'une tentative d'accès à la fenêtre côté serveur, où elle n'est pas définie. Pour résoudre ce problème, vous pouvez vérifier si elle est définie ou non avant de l'utiliser ou d'importer un module qui l'est.

En ajoutant une condition

const isBrowser = typeof window !== `undefined`

Maintenant vous pouvez utiliser isBrowser quand vous essayez d'accéder à l'objet Javascript WIndow. Par exemple :

if (isBrowser) {
      return {
        width: window.innerWidth,
        height: window.innerHeight,
      }
}

Vous pouvez également conditionné l'import d'un module javascript comme Leaflet par exemple. En effet dès son import Leaflet tente d'accéder à l'objet window. Pour régler ça :

if (isBrowser) {
    const leaflet = require("leaflet.js")
}

Modifier la configuration de Webpack

Finalement vous pouvez également configurer Webpack pour ignorer des modules pendant le build côté serveur en ajoutant le code suivant dans le fichier gatsby-node.js à la racine

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
        actions.setWebpackConfig({
            module: {
                rules: [
                    {
                        test: /moduleName/,
                        use: loaders.null(),
                    },
                ],
            },
        })
    }
}
Created by potrace 1.16, written by Peter Selinger 2001-2019