Gatsby - okno není definováno chyba, co a jak opravit?

Gatsby je jedním z nejpopulárnějších generátorů statických stránek, které jsou k dispozici pro vytváření předpřipravených značek pro aplikace Jamstack. Jedná se o framework založený na Reactu, který nabízí nepřeberné množství plug-inových ekosystémů, které zpříjemňují život vývojářské komunitě. Gatsby používám již několik let a mé zkušenosti jsou s ním až na pár závad velmi dobré.

Budeme mluvit o jedné takové závadě, se kterou jsem se potýkal, a naštěstí jsem pro ni našel rozumná řešení. Doufám, že to pro vás bude užitečné.

Co je chyba „okno není definováno“?

Aplikaci založenou na Gatsby můžete spustit ve dvou různých prostředích

  • gatsby develop :Vývojové prostředí s aktivovaným načítáním za provozu. V tomto prostředí všechna rozhraní API specifická pro prohlížeč, jako je localstorage, nebo globální hodnoty jako window, document, atd., bude fungovat dobře.
  • gatsby build :Je to prostředí, ve kterém se vytváří aplikace pro vytváření nasazovatelných artefaktů. Aplikaci můžete dokonce spustit lokálně z nasaditelných artefaktů pomocí gatsby serve příkaz. Na rozdíl od development prostředí, build prostředí je založeno na nodejs .

    Prostředí nodejs nemá prohlížeče globální jako window , document , atd. Pokud tedy zdrojový kód na ně odkazuje, je pravděpodobnější, že dojde k selhání sestavení s chybou window is not defined .

Jak opravit chybu „okno není definováno“?

Existuje několik způsobů, jak tuto chybu opravit/ignorovat. Možná budete chtít použít ten, který je pro vás nejvhodnější.

Zkontrolujte, zda window je definován

Můžete zkontrolovat, zda je globální objekt prohlížeče window je definován a na jeho základě provede příslušný blok kódu.

const isBrowser = typeof window !== "undefined"

Proměnná isBrowser vám pomůže určit, zda window objekt je dostupný v okolí. Pojďme to použít ke kontrole a volání metody pro získání položky z místního úložiště prohlížeče.

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

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

Můžete také zvážit jeho napsání jako jednoduchou utilitou funkci jako,

// utils.js

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

a poté jej použít jinde,

import { isBrowser } from './utils'; 

if (!isBrowser) {
    return;
}

// ... other code

Pomocí useEffect háček nebo componentDidMount metoda

Gatsby je framework založený na Reactu. Pokud je problematický kód ve funkci vykreslování komponenty, přesuňte tento kód do useEffect háček nebo componentDidMount metoda životního cyklu. Zajistí, že se kód nespustí, pokud není v prohlížeči.

Obsluha na úrovni konfigurace

Tuto chybu můžete také opravit/ignorovat na úrovni konfigurace. Toto řešení je vhodnější pro moduly/knihovny/npm třetích stran v závislosti na window objekt. Svůj webpack si můžete přizpůsobit konfigurace pro nahrazení těchto modulů fiktivním modulem během vykreslování serveru.

Chcete-li to provést, otevřete gatsby-node.js soubor a přidejte jej na konec souboru,

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

Slovo offending-module musí být nahrazen skutečným názvem modulu. Pokud například používáte auth0 s Gatsby, můžete uvést název modulu jako auth0-js ve výše uvedené konfiguraci. Pomocí nulového zavaděče Webpacku budeme efektivně ignorovat auth0-js během stavby.

Doufám, že vám článek bude užitečný. Pokud se vám tento článek líbil nebo vám pomohl, pojďme se připojit. Najdete mě na Twitteru (@tapasadhikary), kde sdílím myšlenky, tipy a praktiky kódování. Mohlo by se vám také líbit,

  • JAMstack pro všechny:Úvod
  • JAMstack versus tradiční monolitický pracovní postup
  • Co je to statický generátor stránek a jak jej vybrat?
  • Jak vytvořit aplikaci bez serveru pomocí Gatsby, Netlify a FaunaDB

P.S. Miluju kávu☕.