Gatsby: Fenster ist nicht definiert

Ja, während der Entwicklung werden Reaktionskomponenten nur im Browser ausgeführt, in dem window definiert ist. Beim Erstellen rendert Gatsby diese Komponenten auf dem Server, auf dem window nicht definiert ist. Im Allgemeinen besteht die Lösung bei React darin, nur auf window in componentDidMount zuzugreifen oder zu überprüfen, ob window existiert, bevor darauf zugegriffen wird. Für Bibliotheken von Drittanbietern, die dies nicht tun, sieht das, was Sie getan haben, großartig aus.

@KyleAMathews Ich kann componentDidMount anscheinend nicht dazu bringen, in html.js oder _template.jsx mit gatsby develop componentDidMount zu feuern, vielleicht sollte es nicht sein, oder ich tue es Stimmt etwas nicht?

@hitchcott kannst du etwas mehr über deinen Build

@Maxhodges – Es ist Webpack, nicht React, das über deine Styles „weiß“. Webpack weiß es, weil Sie die kompilierte(n) Datei(en) irgendwo in den gebündelten JS-Dateien importieren oder benötigen.

Zum Beispiel importiere ich meine Hauptdatei styles.css in die Datei _template.js Wenn Webpack also das Bundle erstellt, enthält es diese Stile – im Entwicklungsmodus inline; externe referenzierte Datei in der Produktion ( siehe cssLink hier für ein Beispiel ).

Es ist kein zusätzlicher LESS-Loader erforderlich, da Gatsby bereits einen in seiner Standard-Webpack-Konfiguration enthält .

für diejenigen unter Ihnen, die den Anweisungen auf der Gatsby GitHub-Seite zum Installieren der Docs-Site gefolgt sind...
import { colors } from 'utils/colors'
ist der Unruhestifter und nachdem dies und ${colors.bg} auskommentiert wurden, hat sich die Seite gut entwickelt.

Wäre es möglich, in diesem Fall eine bessere Fehlermeldung anzuzeigen? Ich habe keine Ahnung, wo ich den Fehler finden kann.

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.

Das ist eine wirklich gute Idee! Drücke derzeit hart auf 1.0, also werde ich das nicht bekommen
bald, aber jetzt, öffnen Sie einfach public/render-page.js für die Zeilennummer
dort angezeigt (44529) und sehen Sie, welcher Code Probleme verursacht.

Am Mittwoch, 17. Mai 2017 um 11:45 Uhr Thomas Seberechts [email protected]
schrieb:

Wäre es möglich, in diesem Fall eine bessere Fehlermeldung anzuzeigen? ich
habe keine ahnung wo der fehler zu finden ist.

Fehler beim Generieren von HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
werfen Fehler;
^
Fehler: ReferenceError: Fenster ist nicht definiert
at Object.defineProperty.value (render-page.js:44529:79)
bei __webpack_require__ (render-page.js:30:30)
bei Object.exports.__esModule (render-page.js:42560:24)
bei __webpack_require__ (render-page.js:30:30)
at Object.defineProperty.value (render-page.js:42533:51)
bei __webpack_require__ (render-page.js:30:30)
bei Objekt.(render-page.js:80:19)
bei __webpack_require__ (render-page.js:30:30)
bei Object.assign.i (render-page.js:50:18)
bei render-page.js:53:10
error Befehl mit Exitcode 1 fehlgeschlagen.

—
Sie erhalten dies, weil Sie erwähnt wurden.

Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

Das hat funktioniert! Danke.

Tipp: Geben Sie typeof window !== 'undefined' && window.whaterver-you-need , um dies zu lösen.

der Fehler verschwindet bei Verwendung von componetDidMount

Ich habe ein ähnliches Problem, verwende jedoch localStorage, um einen Teil meines Redux-Status im Browser beizubehalten. Wie kann ich dieses Problem umgehen, wenn ich window.localStorage in der Datei store.js nicht verwenden kann?

😢

Vielen Dank!

@gregorskii

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

dann, windowGlobal.localStorage

Ja, das hat funktioniert, aber ich musste den lokalen Speicher mit https://www.npmjs.com/package/localstorage-memory nachahmen:

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

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

nur Zugriff auf window in componentDidMount

Kern für js von Drittanbietern.

// 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() {
    // ...
  }
}

// ...

@CallMeLaNN Vorschlag hat für mich funktioniert. Mit UIkit erhalte ich:

WebpackError: Element ist nicht definiert

Das Einfügen der Importe in ComponentDidMount hat funktioniert.

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

Ja, während der Entwicklung werden Reaktionskomponenten nur in dem Browser ausgeführt, in dem das Fenster definiert ist. Beim Erstellen rendert Gatsby diese Komponenten auf dem Server, auf dem kein Fenster definiert ist. Im Allgemeinen besteht die Lösung bei React darin, nur auf das Fenster in componentDidMount zuzugreifen oder zu überprüfen, ob das Fenster vorhanden ist, bevor Sie darauf zugreifen. Für Bibliotheken von Drittanbietern, die dies nicht tun, sieht das, was Sie getan haben, großartig aus.

Es wäre super hilfreich, dies früh / prominent aufzutauchen. Ich versuche zum ersten Mal zu bauen, und es gibt viele Probleme, die ich jetzt beheben muss, da ich nicht wusste, dass dies ein Problem werden würde. Es ist besonders stressig, da ich das dringend einsetzen muss; Ich reiche einen Vorschlag für etwas ein und die Site muss online sein.

Ich möchte nur auf Github-Seiten bereitstellen (zumindest vorerst), und benötige daher kein SSR. Gibt es eine Möglichkeit, nur für Kunden zu bauen?

Es scheint, als ob Sie bei Gatsby v2 zwischen es6- und commonjs-Importen wählen müssen, Sie können sie aus Gründen, die mit Webpack 4 zusammenhängen, nicht mehr verwechseln.

In diesem Fall und vorausgesetzt, Sie verwenden bereits es6-Importe, scheint die Lösung von @jfaeldon diejenige zu sein, die hier zu verwenden ist, und die von @hitchcott wird nicht mehr funktionieren.

Kann das jemand bestätigen?

@joshwcomeau stimme Ihnen

Kann ich es also im Browser ausführen lassen? SSR brauche ich nicht.

Hi,
Ich habe hier das gleiche Problem, Coverflow funktioniert gut für Gatsby Develop, aber für Build wird ein Fehler ausgegeben:
WebpackError: Fenster ist nicht definiert

     - 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

Coverflow aus 'react-coverflow' importieren;
import { StyleRoot } von 'radium'

class Team erweitert React.Component {

machen(){
Rückkehr(

displayQuantityOfSide={2}
Navigation
unendlichScrollen
enableHeading
aktiv={0}
Medien={{
' @media (max-Breite: 720px)': {
Breite: '100%',
Höhe: '200px'
},
' @media (min-Breite: 720px)': {
Breite: '100%',
Höhe: '400px',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

Standardteam exportieren;

Ich habe diesen Fehler nach der Installation einiger Pakete erhalten, also muss er in einem dieser Pakete sein - aber ich kann nicht finden, wo das Problem liegt. Hat jemand Tipps, wie man besser herausfinden kann, welches npm-Paket es sein könnte? Der Fehler ist frustrierend allgemein.

Vielleicht ist die Umsetzung besser?
https://react.semantic-ui.com/ und https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz Die einfachste Erklärung, die ich anbieten kann, ist, dass Gatsby intern generiert, wenn Sie gatsby develop ausgeben, um das Projekt zu erstellen, an dem Sie in der Entwicklung arbeiten, oder gatsby build && gatsby serve für einen Produktions-Build die Seiten und das CSS, Links und so weiter. Beachten Sie jedoch, dass dies auf der Serverseite erfolgt, auf der Knotenseite und nicht auf der Clientseite. Node hat also keinen Zugriff auf diese spezifischen APIs, da sie nur für den Client verwendet werden. Und damit werden einige Pakete mit Gatsby out of the box nicht gut spielen. Möglicherweise sind einige Änderungen erforderlich, damit sie "nett spielen"

@jonniebigodes - Danke dafür. Ich glaube, ich verstehe das _warum_ jetzt. Mein Ding ist jetzt das _was_. Ich habe dummerweise eine Menge Arbeit geleistet und habe Probleme zu isolieren, welches Paket das Problem verursacht. Gibt es keine Möglichkeit, gatsby build mit einer detaillierteren Fehlerberichterstattung zu erreichen?

@jonniebigodes - Ich habe das Paket herausgefunden, das das Problem verursacht: Reagieren Sie auf Toasts . Mein nächstes Problem ist, herauszufinden, wie man es beheben kann.

_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 so etwas wie der folgende Codeblock. react wird geladen, nachdem das erste statische Bundle empfangen wurde. Wenn der Benutzer also _handleSubmit window existieren.

Bitte beachten Sie, dass der Fehler möglicherweise immer noch auftritt, wenn react toasts window auf import react toasts anruft.

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

Gleicher Fehler. Ich suche mir eine andere Toast-Bibliothek oder mache meine eigene. Sollte mich nicht töten.

@joserocha3 Dieses Stück Code funktioniert nur im Entwicklungsmodus. Wenn ein Aufruf an einen Produktionsbuild ausgegeben wird, schlägt dies während der Phase error Building static HTML failed fehl. Da Gatsby die Importe inspiziert und API verwendet, die nicht in node.js und

Ich stimme @jonniebigodes in Bezug auf das Forking zu. Die Repo-Quelle besteht nur aus wenigen Dateien. Der anstößige Aufruf ist eine document Referenz in ToastsContainer.tsx .

Oder versuchen Sie es mit https://github.com/gatsbyjs/gatsby/issues/309#issuecomment -387039877 oben erwähnt.

Die Ursache ist, wie strikter Modus, UMD und Bündelung funktionieren.

Eine Verzweigung ist nicht erforderlich, wenn Sie patch-package .

Siehe auch https://github.com/webpack/webpack/issues/6677 und die verlinkten Ausgaben.

Es hängt davon ab, welches Code-Tgat ​​Sie verwenden und ob sie die richtigen Prüfungen durchführen oder überhaupt das umd Ziel verwenden und die globalen Objekte definieren.

Hallo Leute, die immer noch das gleiche Problem haben, ich habe in meinem Projekt keine Fensterfunktion verwendet, aber es wirft immer noch den gleichen Fehler, warum ich diesen habe.. ?

1:09:03 AM: Bauen Sie startbereit
11:09:05: Build-Image-Version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05: Build-Image-Tag: v3.3.2
11:09:05: Buildbot-Version: 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06: Abrufen zwischengespeicherter Abhängigkeiten
11:09:06: Beginn des Downloads des Caches von 194,6 MB
11:09:07 AM: Download des Caches in 1.636969993s abgeschlossen
11:09:07: Beginnen Sie mit dem Extrahieren des Caches
11:09:17: Das Extrahieren des Cache in 9.693656527s abgeschlossen
11:09:17 AM: Cache-Abruf in 11.478174001s abgeschlossen
11:09:17: Beginnen Sie mit der Vorbereitung des Repos für den Build
11:09:17: Git-Referenz wird vorbereitet pull/21/head
11:09:18: netlify.toml gefunden. Site-Konfiguration überschreiben
11:09:18: Build-Skript starten
11:09:18: Abhängigkeiten installieren
11:09:19: Die Wiederherstellung der zwischengespeicherten Knotenversion wurde gestartet
11:09:22 Uhr: Wiederherstellung der zwischengespeicherten Knotenversion abgeschlossen
11:09:23 AM: v10.16.0 ist bereits installiert.
11:09:24 Uhr: Jetzt mit Knoten v10.16.0 (npm v6.9.0)
11:09:25 Uhr: Versuch der Ruby-Version 2.6.2, aus der Umgebung lesen
11:09:27 AM: Ruby-Version 2.6.2 verwenden
11:09:27 AM: PHP-Version 5.6 verwenden
11:09:27 Uhr: Wiederherstellung zwischengespeicherter Knotenmodule gestartet
11:09:27 Uhr: Wiederherstellung zwischengespeicherter Knotenmodule abgeschlossen
11:09:27 Uhr: Wiederherstellung des zwischengespeicherten Garn-Cache gestartet
11:09:27 Uhr: Wiederherstellung des zwischengespeicherten Garn-Cache abgeschlossen
11:09:28 Uhr: Installieren von NPM-Modulen mit der Yarn-Version 1.9.4
11:09:29 Uhr: Garninstallation v1.9.4
11:09:29 Uhr: Warnung package.json: Kein Lizenzfeld
11:09:29 Uhr: Warnung package-lock.json gefunden. Ihr Projekt enthält Sperrdateien, die von anderen Tools als Yarn generiert wurden. Es wird empfohlen, Paketmanager nicht zu mischen, um Auflösungsinkonsistenzen durch nicht synchronisierte Sperrdateien zu vermeiden. Um diese Warnung zu löschen, entfernen Sie package-lock.json.
11:09:29 Uhr: Warnung [email protected]: Kein Lizenzfeld
11:09:29 AM: [1/4] Pakete werden aufgelöst...
11:09:31: [2/4] Pakete werden abgerufen...
11:09:31 AM: (node:1201) [DEP0005] DeprecationWarning: Buffer() ist aufgrund von Sicherheits- und Benutzerfreundlichkeitsproblemen veraltet. Bitte verwenden Sie stattdessen die Methoden Buffer.alloc(), Buffer.allocUnsafe() oder Buffer.from().
11:10:04 AM: info [email protected]: Die Plattform "linux" ist mit diesem Modul nicht kompatibel.
11:10:04 AM: info "[email protected]" ist eine optionale Abhängigkeits- und fehlgeschlagene Kompatibilitätsprüfung. Ausschließen von der Installation.
11:10:04 AM: [3/4] Abhängigkeiten verknüpfen...
11:10:04 AM: Warnung "gatsby > [email protected]" hat falsche Peer-Abhängigkeit "graphql@^0.12.0 || ^0.13.0".
11:10:04 AM: Warnung "gatsby > [email protected]" hat falsche Peer-Abhängigkeit "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
11:10:04 AM: Warnung "gatsby > [email protected]" hat falsche Peer-Abhängigkeit "graphql@^0.13.0".
11:10:04: Warnung "gatsby-plugin-netlify > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "webpack@>=4.4.0".
11:10:04 AM: Warnung "gatsby-plugin-sass > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "webpack@^3.0.0 || ^4.0.0".
11:10:04 AM: Warnung " > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-auth@^2.0.4".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-util@^2.1.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-util@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-auth@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-auth@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-util@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.8.2".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-lib-util@^2.0.4".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "moment@^2.11.2".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.5".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-emotion@^9.2.5".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.7.6".
11:10:04 AM: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "react-immutable-proptypes@^2.1.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04: Warnung "netlify-cms > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-date > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "moment@>=2.16.0".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@>=3.8.1".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.8.2".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat falsche Peer-Abhängigkeit "slate@^0.32.0".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@^3.8.1".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat falsche Peer-Abhängigkeit "slate@^0.33.3".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "slate-schema-violations@^0.1.7".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@>=3.8.1".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@>=3.8.1".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-core > redux-notifications > [email protected]" hat falsche Peer-Abhängigkeit "redux@^2.0.0 || ^3.0.0".
11:10:04 AM: Warnung "netlify-cms > netlify-cms-widget-markdown > slate-react > [email protected]" hat nicht erfüllte Peer-Abhängigkeit "immutable@>=3.8.1".
11:10:04 AM: Warnung " > [email protected]" hat falsche Peer-Abhängigkeit "react@^16.8.3".
11:10:21 AM: [4/4] Neue Pakete bauen...
11:10:26 Uhr: Fertig in 56,59 Sekunden.
11:10:26 Uhr: NPM-Module mit Yarn . installiert
11:10:26 Uhr: Warnung package.json: Kein Lizenzfeld
11:10:26 Uhr: Wiederherstellung des zwischengespeicherten Go-Cache gestartet
11:10:26 Uhr: Wiederherstellung des zwischengespeicherten Go-Cache abgeschlossen
11:10:27 Uhr: GOOS deaktiviert;
11:10:27: Unscharfe GOARCH;
11:10:27: export 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: Gehe Version >&2;
11:10:27: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
11:10:27: Go-Version go1.12 linux/amd64
11:10:27 AM: Fehlende Befehle installieren
11:10:27: Überprüfen Sie das Ausführungsverzeichnis
11:10:27: Ausführen des Benutzerbefehls: 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] clean /opt/build/repo
11:10:28: > rimraf .cache öffentlich
11:10:32 AM: Umgebungskonfiguration verwenden: 'production'
11:10:32: Erfolgreiches Öffnen und Validieren von gatsby-configs — 0,059 s
11:10:32 AM: Plugins erfolgreich geladen — 0,454 s
11:10:34 Uhr: Erfolg bei PreInit — 1.665 s
11:10:34: Erfolgreiches Löschen von HTML- und CSS-Dateien aus früheren Builds — 0,008 s
11:10:34: Erfolg beim Initialisieren des Caches — 0,011 s
11:10:34: Erfolgreiches Kopieren von Gatsby-Dateien — 0,035 s
11:10:34: Erfolg bei PreBootstrap — 0.009 s
11:10:51 AM: Erfolgsquelle und Transformationsknoten — 17.231 s
11:10:52 AM: Schema zum Aufbau des Erfolgs — 0,896 s
11:10:55: Erfolg createPages — 2.772 s
11:10:55: Erfolg createPagesStatefully — 0.062 s
11:10:55 Uhr: Erfolg bei PreExtractQueries — 0,006 s
11:10:56: Erfolgreiches Update-Schema — 0.712 s
11:10:56: Erfolgreiches Extrahieren von Abfragen aus Komponenten — 0,166 s
11:10:57: Erfolgreiche Ausführung von graphql-Abfragen — 1,068 s — 1460/1460 1368,43 Abfragen/Sekunde
11:10:57 AM: Erfolg beim Schreiben der Seitendaten — 0,035 s
11:10:57: Erfolgreiches Ausschreiben von Umleitungsdaten — 0,001 s
11:10:57 AM: Erfolg bei PostBootstrap — 0,010 s
11:10:57 Uhr: Info Bootstrap beendet - 28.304 s
11:12:14: Erfolg Erstellen von Produktions-JavaScript- und CSS-Bundles — 76.329 s
11:12:14:
11:12:14: gatsby-plugin-purgecss:
11:12:14: Vorherige CSS-Größe: 305,33 KB
11:12:14: Neue CSS-Größe: 305,33 KB (-0,00 %)
11:12:14: ~0.00 KB CSS entfernt
11:12:14:
11:12:23 AM: Fehler beim Erstellen von statischem HTML fehlgeschlagen
11:12:23 AM: Hilfe finden Sie auf unserer Dokumentationsseite zum Debuggen von HTML-Builds https://gatsby.app/debug-html
11:12:23: 48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11:12:23: 49 | }
11:12:23: > 50 | }(Fenster));
11:12:23: | ^
11:12:23: 51 |
11:12:23:
11:12:23 AM: WebpackError: ReferenceError: Fenster ist nicht definiert
11:12:23:
11:12:23 AM: - index.js:50 Object../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 AM: lib/webpack/ bootstrap:19 :1
11:12:23:
11:12:23: - MediaAutoTrack.js:15 Object../node_modules/@aws-amplify/analytics/lib/Provid ers/AmazonPersonalizeHelper/MediaAutoTrack.js
11:12:23: [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 AM: 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 AM: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
11:12:23:
11:12:23: - Bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/ bootstrap:19 :1
11:12:23:
11:12:23: - AmazonPersonalizeProvider.js:52 Object../node_modules/@aws-amplify/analytics /lib/Providers/AmazonPersonalizeProvider.js
11:12:23 Uhr: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeProvider.js:52:33
11:12:23:
11:12:23: - Bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/ bootstrap:19 :1
11:12:23:
11:12:23: - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/index. js
11:12:23 Uhr: [lib]/[@aws-amplify]/analytics/lib/Providers/index.js:7:35
11:12:23:
11:12:23: - Bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/ bootstrap:19 :1
11:12:23:
11:12:23: - 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:12:24: Fehler während der Phase 'Baustelle': Das Build-Skript hat einen Exit-Code ungleich Null zurückgegeben: 1
11:12:23:
11:12:23: - Bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/ bootstrap:19 :1
11:12:23:
11:12:24 Uhr: Protokollierung wird heruntergefahren, 58 Meldungen ausstehend

Ich verwende netlify für meine Serverseite

Wenn Sie sicher sind, dass Sie kein Fenster verwenden, ist dies wahrscheinlich ein Paket.

Sie müssen im Webpack ein leeres Fenster definieren.

Es ist nicht ganz einfach, aber das führt Sie in die richtige Richtung:

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

Ich bin mir nicht sicher, warum dieses Thema geschlossen wurde? Dieses Problem ist in der Tat wahrscheinlich das kritischste, wenn es um Gatsby geht, und die gesamte Philosophie sollte geändert und behoben werden.

Es ist wirklich schlimm, dass Browser- und SSR-Logik gekoppelt sind. Ganz zu schweigen von der Tatsache, dass Sie eine Version des Codes in der Entwicklung ausführen und davon in der Produktion abweichen. Das ist wirklich schlimm. Warum würden Sie solche Builds machen? Der einzige Unterschied zwischen diesen beiden sollte aktivierte Debug-Funktionalitäten in der Entwicklung sein und zB Source Maps oder was auch immer. Dies macht es wirklich schwierig und ansprechend, Gatsby zu verwenden.

Meiner Meinung nach sollten Sie dies erneut öffnen und dieses Problem priorisieren. Dieses Problem lässt die Leute buchstäblich Tausende von Modulen da draußen aufgeben, die von Fenstern abhängen und nicht alle von ihnen können in ComponentDidMount importiert werden, z. B. HOC wie Module usw.

Obwohl ich nicht anderer Meinung bin, ist dies ein Schmerzpunkt. Man könnte argumentieren, dass Bibliotheken, die mit Logik um die Fenstervariable geschrieben wurden, nicht für die Verwendung mit SSR geeignet sind. Diese Bibliotheken selbst sollten überprüfen, ob ein Fenster definiert ist und im SSR-Modus arbeiten.

Keine anderen Kommentare zu dem tieferen Punkt, den Sie machen, das ist eine philosophische Diskussion, die besser für die Betreuer geeignet ist.

Bei allem Respekt, das, was Sie geschrieben haben, macht keinen Sinn. Warum sollte jemand, der eine "Nur-Browser"-Bibliothek erstellt, überprüfen, ob ein Fensterobjekt vorhanden ist? Können Sie eine einzelne Bibliothek in der gesamten NPM-Registrierung benennen oder darauf verweisen, die dies tut? Oder sagen Sie, dass all diese Bibliotheken, die die Leute geschrieben haben, falsch geschrieben sind?

Oder sollten die Leute bedenken, dass es ein Framework namens "Gatsby" gibt, das dies braucht? Man sollte Gatsby an dem einen oder anderen Ende verwenden können und diese Enden sollten VOLLSTÄNDIG entkoppelt sein. Das ist wirklich der einzige Punkt. Nichts Philosophisches daran.

Gatsby ist von Natur aus ein statischer Site-Generator. Die meiste Arbeit, die es macht, um dies zu erreichen, wird zur Kompilierzeit außerhalb des Browsers erledigt. Es ist nicht nur ein „Client“- oder „Browser“-Tool.

Serverseitiges Rendering erfolgt per Definition auf der „Server“-Seite, wobei „Fenster“ keine Rolle spielt.

Gatsbys Kompilierung erfolgt mit Webpack, webpack verdrahtet standardmäßig keine Fenstervariable. Aus meiner Erfahrung gibt es nicht nur eine Möglichkeit, Clientbibliotheken an die Arbeit unter Webpack anzupassen. Dies führt dazu, dass die Gatsby-Konfiguration selbst nicht in der Lage ist, eine einfache One-Shot-Lösung bereitzustellen, um alle Bibliotheken zu reparieren, die von „window“ abhängen.

FWIW Ich denke, es ist sinnvoll, den Teil des Tools zu trennen, um zu besprechen, welcher Teil davon das, was Sie tun möchten, behindert.