Gatsby is een van de meest populaire statische sitegeneratoren die beschikbaar is om vooraf gebouwde markeringen voor Jamstack-apps te maken. Het is een op React gebaseerd framework dat een overvloed aan plug-in-ecosystemen biedt om het leven van de ontwikkelaarsgemeenschap comfortabel te maken. Ik gebruik Gatsby nu al een paar jaar en mijn ervaring is er erg goed mee, op een paar problemen na.

We zullen het hebben over zo'n storing waarmee ik te maken heb gehad en er gelukkig redelijke oplossingen voor hebben gevonden. Ik hoop dat je het nuttig vindt.

Wat is de 'window notdefined'-fout?

U kunt een op Gatsby gebaseerde toepassing in twee verschillende omgevingen uitvoeren,

• gatsby develop :Een ontwikkelomgeving die is ingeschakeld met hot-reloading. In deze omgeving zijn alle browserspecifieke API's zoals localstorage, of de globals zoals window, document, enz., zal goed werken.

• gatsby build :Het is de omgeving om de toepassing te bouwen om inzetbare artefacten te produceren. U kunt de app zelfs lokaal uitvoeren vanaf de inzetbare artefacten met behulp van de gatsby serve opdracht. In tegenstelling tot de development omgeving, de build omgeving is gebaseerd op nodejs .

  De nodejs-omgeving heeft niet de browser-globals zoals window , document , enz. Dus als de broncode ernaar verwijst, is de kans groter dat u een buildfout krijgt met de fout, window is not defined .

  

Hoe verhelp ik de 'window notdefined'-fout?

Er zijn meerdere manieren om deze fout te herstellen/negeren. Misschien wilt u degene gebruiken die het meest geschikt is voor u.

Controleer of window is gedefinieerd

U kunt controleren of het browser-global object window is gedefinieerd en op basis daarvan het bijbehorende codeblok uitvoeren.

const isBrowser = typeof window !== "undefined"

De variabele isBrowser helpt u te bepalen of de window object beschikbaar is in de omgeving. Laten we het gebruiken om een ​​methode te controleren en aan te roepen om een ​​item uit de lokale opslag van de browser te halen.

export const isAuthenticated = () => {
  if (!isBrowser) {
    return;
  }

  return window.localstorage.getItem("isLoggedIn") === "true"
}

Je kunt ook overwegen om het te schrijven als een eenvoudige util-functie zoals,

// utils.js

export const isBrowser = () => typeof window !== "undefined"

en gebruik het dan ergens anders,

import { isBrowser } from './utils'; 

if (!isBrowser) {
    return;
}

// ... other code

useEffect gebruiken haak of componentDidMount methode

Gatsby is een React-gebaseerd raamwerk. Als de problematische code zich in de renderfunctie van de component bevindt, verplaats die code dan naar een useEffect haak of een componentDidMount levenscyclus methode. Het zorgt ervoor dat de code niet wordt uitgevoerd tenzij deze zich in de browser bevindt.

Handling op configuratieniveau

U kunt deze fout ook oplossen/negeren op configuratieniveau. Deze oplossing is meer geschikt voor de modules/bibliotheken/npms van derden, afhankelijk van de window object. U kunt uw webpack . aanpassen configuratie om deze modules te vervangen door een dummy-module tijdens het renderen van de server.

Open hiervoor de gatsby-node.js bestand en voeg dit toe aan het einde van het bestand,

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

Het woord offending-module moet worden vervangen door de eigenlijke modulenaam. Als u bijvoorbeeld auth0 gebruikt met Gatsby, kunt u de modulenaam vermelden als auth0-js in de bovenstaande configuratie. Met de null loader van Webpack negeren we effectief auth0-js tijdens de bouw.

• JAMstack for All:een introductie
• JAMstack versus traditionele monolithische workflow
• Wat is een statische sitegenerator en hoe selecteer je er een?
• Een serverloze app bouwen met Gatsby, Netlify en FaunaDB

PS Ik hou van koffie .