Gatsby: Mehrdeutiger "StoreStateProvider" -Fehler für alle gatsby-Befehle

Erstellt am 27. Nov. 2019  ·  58Kommentare  ·  Quelle: gatsbyjs/gatsby

Beschreibung

Nach dem Aktualisieren von Gatsby von 2.17.7 auf 2.18.4 führt das Ausführen eines beliebigen Gatsby-Befehls zu einem Fehler. Es gibt jedoch buchstäblich keinen Kontext.

> gatsby clean

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
> gatsby build

The above error occurred in the <StoreStateProvider> component:

...

Umgebung

Leider kann ich gatsby info --clipboard nicht ausführen, da es mit demselben StateStoreProvider Fehler wie die anderen Befehle abstürzt. Ich habe meine Gatsby-Version erneut zurückgesetzt und diesen Befehl ausgeführt. Beachten Sie, dass die Gatsby-Version in der folgenden Ausgabe falsch ist .

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.18362.267.0
  npmPackages:
    gatsby: ^2.17.7 => 2.17.7
    gatsby-source-apiserver: ^2.1.4 => 2.1.4
stale? needs reproduction bug

Hilfreichster Kommentar

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Alle 58 Kommentare

Ich habe das gleiche Problem nach dem Update von 2.17.10 auf 2.18.4

Vielen Dank für die Berichterstattung!

Könnten Sie auch versuchen, gatsby-cli zu aktualisieren? Wenn dies nicht hilft, wäre es sehr hilfreich, wenn Sie uns ein Reproduktions-Repository zur Verfügung stellen könnten.

Vielen Dank! :Lila Herz:

Ich habe die CLI nicht global installiert. Das Projekt basiert auf npm run <command> Befehlen, die wiederum gatsby <command> ausführen und die lokal installierte Version von Gatsby verwenden.

Nach diesem Muster müssen Benutzer ihre Maschine nicht mit einer globalen Abhängigkeit verunreinigen. (Was hässlich werden kann, wenn Sie an mehreren Projekten arbeiten, für die möglicherweise unterschiedliche Versionen erforderlich sind.)

Ich hatte heute früher ein ähnliches Problem. Was für mich funktioniert hat, war Reagieren, React-Dom und Gatsby zu aktualisieren, Node_Modules und Package-Lock.json zu löschen. Schließlich starte ich npm install wieder und alles hat gut funktioniert

Das Aktualisieren von react und react-dom sowie von Gatsby scheint zu funktionieren. Sollte Gatsby nicht die richtigen Versionen von React auflisten, mit denen es kompatibel ist?

Gestern habe ich einen halben Tag damit verbracht herauszufinden, dass in meinem Fall Gatsby Build / Develop gut funktioniert, wenn Deps mit Garn installiert werden.

Scheint, als hätte es mit einem Kompatibilitätsproblem zwischen React und Gatsby zu tun. Wenn Sie Abhängigkeiten von Grund auf neu installieren (ohne Sperrdatei), erhält Ihr Paketmanager (entweder Garn oder npm) nur die neueste Version (zulässig durch Einschränkungen in package.json).

In meinem Fall war die Reaktionsversion in meinem package-lock.json gesperrt, daher wurde sie auch bei einer Neuinstallation nicht zusammen mit Gatsby aktualisiert.

Ich habe das gleiche Problem. Ich habe Gatsby, Gatsby-Cli, React und React-Dom ohne Erfolg aktualisiert. Gibt es eine endgültige Lösung?

EDIT: Ich habe Gatsby und Gatsby-Cli entfernt und sie einzeln neu installiert, und das scheint es behoben zu haben. Seltsames Problem.

Ich bin auf dieses Problem gestoßen. Das liegt daran, dass zwei Versionen von React installiert sind. Führen Sie ein npm ls react , um sie anzuzeigen. Ich habe eine Version von react in meiner package.json angegeben und es sieht so aus, als ob gatsby / gatsby-cli 2.18.5 eine andere Version von react hat.

Ich habe durch diese Seite von dem Problem erfahren.

Ich versuche immer noch, das Problem zu beheben ...

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Während ich vorerst entsperrt bin, habe ich immer noch Bedenken:
1) Zwei Versionen von React existieren noch? (Ich bin nicht sicher), auch wenn sie jetzt die gleiche Version sind
2) Werden zukünftige Gatsby-Updates dieses Problem erneut verursachen?

Ich habe keine Antworten, spreche aber meine Bedenken aus, die das Gatsby-Team berücksichtigen sollte.

Ich bin mir ziemlich sicher, dass npm ls nur ein Tool ist, mit dem Sie den Abhängigkeitsbaum Ihres Projekts besser verstehen können. Wahrscheinlich ist nur eine Kopie von React installiert. Sie können in den Ordner node_modules , um sicherzustellen, dass ...

Ich hatte das gleiche Problem nach dem Update von Gatsby. Ich habe ein Downgrade auf meine vorherige Version "gatsby" durchgeführt: "^ 2.13.73", die mehrere Versionen zurückliegt, aber das Problem behoben hat.

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Das hat bei mir funktioniert. Vielen Dank!

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Ebenso wie oben, hat diese Lösung auch für mich Abhilfe geschaffen.

Ich habe das Problem erfolgreich behoben, indem ich reagiere und reagiere auf 16.12.0 und dann gatsby auf 2.18.7.

Wichtig: Stellen Sie sicher, dass Sie "gatsby clean" ausführen, nachdem Sie "react", "react-dom" und "gatsby" aktualisiert haben.

Das Upgrade von gatsby auf 2.18.7, wie von @clarmso vorgeschlagen, hat den Trick für mich getan (reagieren ist am 16.12.0).

Auch mit dem gleichen Problem. Aktualisiert reagieren und Gatsby, aber immer noch die gleichen Probleme. Auch versucht, nach dem Update zu bereinigen, Problem bleibt bestehen.

"gatsby": "^ 2.18.11"
"reagieren": "^ 16.12.0"
"reag-dom": "^ 16.12.0"

Auch mit dem gleichen Problem. Aktualisiert reagieren und Gatsby, aber immer noch die gleichen Probleme. Auch versucht, nach dem Update zu bereinigen, Problem bleibt bestehen.

"gatsby": "^ 2.18.11"
"reagieren": "^ 16.12.0"
"reag-dom": "^ 16.12.0"

Gleiche für mich. Bis gestern hat gut funktioniert

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Das hat auch bei mir funktioniert. Wird daran gearbeitet, um eine dauerhafte Lösung zu finden?

Aufgrund dieser Updates erhalte ich jetzt seltsamere Warnungen vor StoreStateProvider und zufälligen Dingen in Contentful, die als null zurückgegeben werden, obwohl sie vorhanden sind.

Ich bin mir nicht sicher, was los ist, aber ich muss das vorerst in einem Zweig behalten

Auch mit dem gleichen Problem. Aktualisiert reagieren und Gatsby, aber immer noch die gleichen Probleme. Auch versucht, nach dem Update zu bereinigen, Problem bleibt bestehen.

"gatsby": "^ 2.18.11"
"reagieren": "^ 16.12.0"
"reag-dom": "^ 16.12.0"

Der Ordner node_modules und die Datei package-lock.json wurden entfernt. Ran npm installieren und alles wieder gut.

Meine Erfahrung war eine Kombination der obigen Kommentare. Da ich den Ordner node_modules gelöscht habe und Gatsby-Plugins hatte, würde das npm nicht funktionieren. Die Garninstallation hat es endlich behoben.

Ich habe dieses Problem behoben, indem ich react , react-dom und gatsby neu installiert habe. (https://github.com/gatsbyjs/gatsby/issues/19827#issuecomment-559898690)

Vor

react v16.11.0
react-dom v16.11.0
gatsby v2.17.11

nach

react v16.12.0
react-dom v16.12.0
gatsby v2.18.12

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Danke, es hat bei mir funktioniert 🍾

Persönlich muss ich den Ordner node_modules und package-lock.json löschen
Dann aktualisiere ich react , react-dom und gatsby :

"react": "^16.12.0",
"react-dom": "^16.12.0",
"gatsby": "^2.18.17",

Vergessen Sie nicht, gatsby-cli auf die neueste Version zu aktualisieren und gatsby clean auszuführen
Danach wirkt gatsby develop wie ein Zauber!

Ich habe festgestellt, dass das Problem nur auftritt, wenn der Standard-Gatsby-Logger verwendet wird. Der bestimmte Logger, der verwendet wird, wird über die Prozessumgebung GATSBY_LOGGER gesteuert. Das Problem ist nicht reproduzierbar, wenn der Standardlogger beispielsweise mit json logger geändert wird.

export GATSBY_LOGGER=["json"]
npm i && npm run start 

Wechseln zu yurnalist / json Gatsby Logger Fix Problem für mich

export GATSBY_LOGGER=["yurnalist"]

Ich bin heute auf dieses Problem gestoßen, als ich gatsby develop für ein älteres Projekt ausgeführt habe (das letzte Mal, als ich gatsby Develop ausgeführt habe, war im Herbst).

Ich habe das Problem behoben, indem ich eine Kombination der oben genannten (sehr hilfreichen!) Vorschläge gemacht habe.

Kann bestätigen, dass dies funktioniert hat:

  1. gatsby clean - begann damit, um zu sehen, ob es behoben wurde
  2. node_modules löschen
  3. npm install

Es war zu diesem Zeitpunkt noch nicht gelöst, also folgte ich dem Rat, dies zu tun:

  1. npm uninstall react react-dom gatsby
  2. npm install react react-dom gatsby

Das hat perfekt funktioniert.

package-lock.json gelöscht
gelöschte node_modules
lief npm i

arbeitete für mich: D.

Ich habe das Problem behoben! Ich habe npm zum Deinstallieren verwendet und dann react , react-dom und gatsby (neu) installiert. Ich habe es in genau dieser Reihenfolge gemacht (ich glaube nicht, dass die Bestellung eine Rolle spielen würde, aber zu Ihrer Information, falls dies der Fall ist).

npm ls react zeigt zwei Versionen, aber sie sind gleich und als "deduped" markiert:

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

Danke für die Lösung! Dies war ein großer Blocker für mich. Es hat anfangs nicht funktioniert, aber ich habe auch gatsby-cli neu installiert. Danach hat es gut funktioniert.

Beschreibung

Nach dem Aktualisieren von Gatsby von 2.17.7 auf 2.18.4 führt das Ausführen eines beliebigen Gatsby-Befehls zu einem Fehler. Es gibt jedoch buchstäblich keinen Kontext.

> gatsby clean

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
> gatsby build

The above error occurred in the <StoreStateProvider> component:

...

Umgebung

Leider kann ich gatsby info --clipboard nicht ausführen, da es mit demselben StateStoreProvider Fehler wie die anderen Befehle abstürzt. Ich habe meine Gatsby-Version erneut zurückgesetzt und diesen Befehl ausgeführt. Beachten Sie, dass die Gatsby-Version in der folgenden Ausgabe falsch ist .

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.18362.267.0
  npmPackages:
    gatsby: ^2.17.7 => 2.17.7
    gatsby-source-apiserver: ^2.1.4 => 2.1.4

Ich hatte das gleiche Problem! Die Lösung, die mir hilft, besteht darin, Garn zu installieren und Ihrem package.json ein Auflösungsfeld hinzuzufügen
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

Der Fehler war das Ergebnis von gatsby-cli intern react mit ink zum Rendern der neuen Schnittstelle verwendete. Eine falsche Übereinstimmung der Versionierung zwischen der react -Version eines Projekts und der von gatsby benötigten Version hat dies verursacht.

Die globale Installation von gatsby-cli (die wir empfehlen) sollte diese Probleme meines Wissens verhindern. Wenn Sie dies jedoch schließen, muss diesbezüglich nichts in gatsby behoben werden.

Vielen Dank euch allen! 💜

Gestern habe ich einen halben Tag damit verbracht herauszufinden, dass in meinem Fall Gatsby Build / Develop gut funktioniert, wenn Deps mit Garn installiert werden.

Die Verwendung von Garn löste das Problem auch für mich

Nur npm update laufen, löste das Problem für mich

Die globale Installation von gatsby-cli (die wir empfehlen) sollte diese Probleme meines Wissens verhindern. Wenn Sie dies jedoch schließen, muss diesbezüglich nichts in Gatsby behoben werden.

Das hat bei mir nicht funktioniert. Umschalten des Loggers auf yurnalist oder json wie oben erwähnt. Ich habe auch die Ordner public , .cache und node_modules .

Ausgabe der Gatsby-Version:

gatsby -v
Gatsby CLI version: 2.8.27
Gatsby version: 2.18.25

Hier sind meine Abhängigkeiten, wenn ich neugierig bin:

    "dependencies": {
        "@emotion/core": "^10.0.27",
        "@emotion/styled": "^10.0.27",
        "gatsby": "^2.18.25",
        "gatsby-image": "^2.2.39",
        "gatsby-plugin-emotion": "^4.1.21",
        "gatsby-plugin-google-analytics": "^2.1.33",
        "gatsby-plugin-manifest": "^2.2.37",
        "gatsby-plugin-netlify": "^2.1.31",
        "gatsby-plugin-offline": "^3.0.32",
        "gatsby-plugin-react-helmet": "^3.1.21",
        "gatsby-plugin-sharp": "^2.3.13",
        "gatsby-plugin-web-font-loader": "^1.0.4",
        "gatsby-remark-images": "^3.1.42",
        "gatsby-remark-prismjs": "^3.3.30",
        "gatsby-remark-reading-time": "^1.1.0",
        "gatsby-source-filesystem": "^2.1.46",
        "gatsby-transformer-remark": "^2.6.48",
        "gatsby-transformer-sharp": "^2.3.13",
        "prism-themes": "^1.3.0",
        "prismjs": "^1.19.0",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^5.2.1",
        "typeface-karla": "0.0.72"
    },

Hier ist der Fehler, den ich erhalte:

gatsby develop

 ERROR 

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR 

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR 

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could   happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

  - react.development.js:1590 resolveDispatcher
    [project]/[gatsby]/[react]/cjs/react.development.js:1590:13

  - react.development.js:1618 useState
    [project]/[gatsby]/[react]/cjs/react.development.js:1618:20

  - context.js:17 StoreStateProvider
    [project]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41

  - react-reconciler.development.js:6036 renderWithHooks
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

Verzweifelte Entwickler, die nach Problemen suchen, die überhaupt nicht existieren sollten:

-Entfernen Sie den Ordner node_modules
-delete package.lock.json
-run npm i

Nachdem Sie den Reproduktionskoffer dafür in die Hände bekommen haben:

Dies scheint auf npm-Installationen zurückzuführen zu sein, bei denen die benutzerdefinierte Version von react in node_modules react installiert wird, während die Version von gatsby-cli von react in node_modules/gatsby/node_modules installiert wird.

Da ink in node_modules installiert zu werden scheint, werden react Importe andere Importe verwendet als für gatsby-cli , was zu folgendem Fall führt:

  1. Möglicherweise haben Sie mehr als eine Kopie von React in derselben App
    Tipps zum Debuggen und Beheben dieses Problems finden Sie unter https://fb.me/react-invalid-hook-call .

Und https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react erklärt dies ziemlich gut, aber nur der Vorschlag dort (die Verwendung von yarn resolutions funktioniert nicht, da dies ein Problem ist mit wie npm zu entscheiden scheint node_modules Struktur und nicht Garn)

Die einzige Lösung, die mir derzeit in den Sinn kommt, besteht darin, die Auflösung des Node.j-Moduls und den Hardcode react auf eine durch gatsby-cli definierte zu überschreiben. Dies könnte in Ordnung sein (so wird PnP zumindest in Garn v1 implementiert).

Nach ein paar weiteren Überlegungen besteht die andere Option darin, createRequireFromPath von gatsby-core-utils (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/README) .md # createrequirefrompath) und verwenden Sie diese in gatsby-cli, um dieselbe Version von react wie ink zu laden (dies ist deutlich weniger hackig und mit geringerer Wahrscheinlichkeit potenzieller Probleme, die durch Überlastung der Modulauflösung von Node.j entstehen würden). .

Das einzige Problem dabei wäre, wenn wir ink Komponenten von Drittanbietern verwenden ( ink-spinner ist nur eine, die wir derzeit verwenden) und diese in einem anderen Verzeichnis als ink installiert werden.

Wir könnten diese potenziellen Probleme umgehen, indem wir ink-spinner innerhalb von gatsby-cli und sicherstellen, dass keine Komponenten von Drittanbietern als Pakete verwendet werden (und alle von Anbietern).

--- bearbeitet:
müssen oben vorsichtig sein - ink erfordert node >= 16.8.0 daher müssen wir sicherstellen, dass wir keine Funktionen ab react >= 16.8.1 in gatsby-cli - Es ist also mehr Forschung erforderlich, aber es ist vielversprechend

Update: Die Route createRequireFromPath funktioniert nicht, da npm die node_modules Hierarchie bei dependencies und peerDependencies nicht "richtig" auflösen kann. ink und gatsby-cli .

Eine "schnelle" Änderung besteht darin, die Versionsanforderungen für react (https://github.com/gatsbyjs/gatsby/pull/21522) zu senken, um die Anzahl der Szenarien zu verringern, in denen dieses Problem auftreten wird.

Aber es behebt das nicht vollständig. Dafür haben wir wahrscheinlich Appropiate bündeln react Version in gatsby-cli Umgehung npm zu Unfähigkeit , richtig erstellen node_modules Hierarchie (oder außer Kraft setzen Node.js Modul Auflösung, aber Dies ist ein Hack, der unvorhergesehene Konsequenzen haben kann. Ich würde das gerne vermeiden, wenn es andere Lösungen gibt.

Ein weiteres Update - wir haben einige Updates für gatsby , um die davon betroffenen Projekte einzuschränken - es wurde in [email protected] - aber möglicherweise müssen Sie package-lock.json zurücksetzen / löschen.

Wenn das Problem dadurch immer noch nicht behoben wird, ist es wahrscheinlich, dass Sie react / react-dom in Ihrem package.json festgesteckt haben und die Version niedriger als [email protected] - Wir haben noch keine Lösung dafür, prüfen dies jedoch als nächsten Schritt. Eine mögliche Problemumgehung besteht darin, derzeit yarn anstelle von npm zu verwenden (nicht verifiziert).

Wenn jemand an technischen Dingen interessiert ist, überprüfen Sie bitte den Kommentar zu der ersten Pull-Anfrage, die ich versucht habe, zu beheben - https://github.com/gatsbyjs/gatsby/pull/21508#issuecomment -586753917. Derzeit ist geplant, einen Bundler zu verwenden (wahrscheinlich microbundle ), um react in gatsby-cli zu bündeln, damit nicht versucht wird, react von node_modules zu verwenden, sondern nur diese direkt in gatsby-cli )

Ich habe viele dieser Kommentare ausprobiert, aber als jemand, der npm für keinen Teil des Prozesses verwendet hat, dachte ich, ich würde aufschreiben, was speziell für mich funktioniert.

Mein Setup:

Win10, Garn installiert über .msi, Gatsby über yarn global . Verwenden von yarn für alle Gatsby-Projekte.

Problem:

Jedes gatsby {command} würde den Fehler StoreStateProvider , aber npx gatsby {command} funktioniert.

Lösung:

  1. Löschen Sie .cache und /node_modules falls vorhanden.
  2. Bestätigen Sie, dass react und react-dom aktualisiert wurden, "^16.13.0" zum Zeitpunkt dieses Schreibens.
  3. Führen Sie yarn global remove gatsby gatsby-cli , um die fehlerhafte CLI zu entfernen.
  4. Führen Sie yarn global add gatsby gatsby-cli , um die CLI neu zu installieren.
  5. Führen Sie gatsby -v oder ein anderes gatsby {command} und es sollte funktionieren.

Ausgabe:

> gatsby -v
Gatsby CLI version: 2.9.0
Gatsby version: 2.19.23

Hiya!

Dieses Problem ist behoben. Gruselige Stille. 👻

Wir haben viele Probleme, daher schließen wir Probleme derzeit nach 30 Tagen Inaktivität. Seit dem letzten Update hier sind mindestens 20 Tage vergangen.
Wenn wir dieses Problem verpasst haben oder wenn Sie es offen halten möchten, antworten Sie bitte hier. Sie können auch das Label "not stale" hinzufügen, um dieses Problem offen zu halten!
Zur freundlichen Erinnerung: Der beste Weg, um dieses oder ein anderes behobenes Problem zu erkennen, ist das Öffnen einer Pull-Anfrage. Check out gatsby.dev/contribute für weitere Informationen über PRs Öffnen Selektierung Fragen, und einen Beitrag!

Vielen Dank, dass Sie Teil der Gatsby-Community sind! 💪💜

Obwohl dies nicht viel Aktivität hat, denke ich nicht, dass es abgestanden ist

Ich hatte das gleiche Problem. Ich habe meine Datei json.lock gelöscht und den Befehl yarn ausgeführt, um die Abhängigkeiten zu aktualisieren. und alles funktionierte wieder normal.

Ich habe das gleiche Problem festgestellt, das ich gelöst habe, indem ich den Ordner "node_modules" und die Datei "package-lock.json" und dann den Befehl "npm install" gelöscht habe.

Hiya!

Dieses Problem ist behoben. Gruselige Stille. 👻

Wir haben viele Probleme, daher schließen wir Probleme derzeit nach 30 Tagen Inaktivität. Seit dem letzten Update hier sind mindestens 20 Tage vergangen.
Wenn wir dieses Problem verpasst haben oder wenn Sie es offen halten möchten, antworten Sie bitte hier. Sie können auch das Label "not stale" hinzufügen, um dieses Problem offen zu halten!
Zur freundlichen Erinnerung: Der beste Weg, um dieses oder ein anderes behobenes Problem zu erkennen, ist das Öffnen einer Pull-Anfrage. Check out gatsby.dev/contribute für weitere Informationen über PRs Öffnen Selektierung Fragen, und einen Beitrag!

Vielen Dank, dass Sie Teil der Gatsby-Community sind! 💪💜

Hallo nochmal!

Es ist 30 Tage her, seit irgendetwas in dieser Angelegenheit passiert ist, also wird unser freundlicher Nachbarschaftsroboter (das bin ich!) Es schließen.
Bitte denken Sie daran, dass ich nur ein Roboter bin. Wenn ich dieses Problem also irrtümlich geschlossen habe, bin ich HUMAN_EMOTION_SORRY . Bitte öffnen Sie diese Ausgabe erneut oder erstellen Sie eine neue, wenn Sie etwas anderes benötigen.
Zur freundlichen Erinnerung: Der beste Weg, um dieses oder ein anderes behobenes Problem zu erkennen, ist das Öffnen einer Pull-Anfrage. Check out gatsby.dev/contribute für weitere Informationen über PRs Öffnen Selektierung Fragen, und einen Beitrag!

Nochmals vielen Dank, dass Sie Teil der Gatsby-Community sind! 💪💜

: leicht_frowning_face: Ich verwende immer noch yurnalist als meinen Standardlogger. Ich habe hier nie ein Update gesehen, dass dies behoben wurde.

Verzweifelte Entwickler, die nach Problemen suchen, die überhaupt nicht existieren sollten:

-Entfernen Sie den Ordner node_modules
-delete package.lock.json
-run npm i

Das hat bei mir funktioniert ...

Das Deinstallieren und erneute Installieren von gatsby (v 2.23.11) hat bei mir funktioniert.

Verwenden Sie Garn installieren, das sollte funktionieren

Also habe ich (nachdem ich bisher alles gelesen hatte) die Version in der package.json-Datei von Gatsby 2.18.7 geändert und npm i Es hat funktioniert

Immer noch auf dieses Problem stoßen.

$: gatsby -v
Gatsby CLI version: 2.12.66
Gatsby version: 2.23.12

Schritte zum Reproduzieren:

  1. Verwenden Sie gatsby new , um ein neues Projekt zu erstellen
  2. Installiere sass mit npm i --save node-sass gatsby-plugin-sass
  3. Führen Sie gatsby develop

Ergebnis

$ gatsby develop

 ERROR

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a fun  ction component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as Reac  t DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix   this problem.

  - react.development.js:1465 resolveDispatcher
    [bug]/[gatsby]/[react]/cjs/react.development.js:1465:13

  - react.development.js:1496 useState
    [bug]/[gatsby]/[react]/cjs/react.development.js:1496:20

  - context.js:21 StoreStateProvider
    [bug]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:21:49

  - react-reconciler.development.js:6036 renderWithHooks
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

Dies wurde behoben, indem die Anweisungen wie oben beschrieben wie folgt implementiert wurden:

Also habe ich (nachdem ich alles bisher gelesen hatte) die Version in der Datei package.json von Gatsby 2.18.7 geändert und ausgeführt
npm i Es hat funktioniert

Das Entfernen der Ordner .cache und node_modules sowie der Datei package-lock.json und die anschließende Neuinstallation haben bei mir funktioniert.

Ich gab ein Garn-Upgrade und es funktionierte für mich.

Das Entfernen von node_modules , des npm-Cache und der package-lock.json -Dateien ist eine unpraktische Lösung für eine grundlegende Änderung, wenn jedes Mal ein Plugin oder eine Abhängigkeit hinzugefügt wird.

Das zugrunde liegende Problem in meinem Fall war, dass ein neues Projekt, das mit gatsby new [path] [starter] bereitgestellt wurde, implizit yarn um die Abhängigkeiten zu booten, wenn yarn installiert und verfügbar ist ( which yarn return) eine nicht leere Zeichenfolge). Nachfolgende Versuche, Plugins / Abhängigkeiten mit npm zu installieren, schlagen mit den oben angegebenen kryptischen Fehlern fehl, da npm und yarn sich gegenseitig ausschließende Paketverwaltungslösungen sind.

Es wäre vorzuziehen, wenn die Gatsby-CLI nicht standardmäßig yarn ohne dass eine Befehlszeilenoption dies anfordert. Die Lösung für mich war, Garn zu npm ausschließlich verwendet werden konnte.

https://github.com/gatsbyjs/gatsby/pull/26887 (gestern zusammengeführt und heute veröffentlicht), das react aus Abhängigkeiten von gatsby-cli und es stattdessen bündelt, wenn wir Pakete veröffentlichen - was das ist Das heißt, es sollte nicht zu seltsamen Mehrfachkopien von react in node_modules die alle möglichen Probleme verursachen.

@ duchess-toffee Vielleicht finden Sie https://github.com/gatsbyjs/gatsby/pull/26856 interessant (noch nicht zusammengeführt / veröffentlicht) - während es nicht automatisch von yarn auf npm als Standardpaketmanager - Sie können gatsby options set pm npm ausführen

Ich hatte ein Problem, das anscheinend mit diesem Problem # 26998 zusammenhängt

Gelöst mit einer benutzerdefinierten Webpack-Konfiguration, um react aufzulösen:

`` `` js
// Datei: gatsby-node.js
const path = require ('path')

module.exports = {
onCreateWebpackConfig: ({Aktionen}) => {
action.setWebpackConfig ({
Entschlossenheit: {
alias: {
'reagieren': path.resolve (path.join (__ dirname, 'node_modules', 'react'))
}}
}}
})
}}
}}
`` ``

json // file: package.json { "dependencies": { "@mdx-js/mdx": "^1.6.18", "@mdx-js/react": "^1.6.18", "gatsby": "^2.24.64", "gatsby-plugin-layout": "^1.3.11", "gatsby-plugin-mdx": "^1.2.40", "gatsby-plugin-sass": "^2.3.12", "gatsby-source-filesystem": "^2.3.30", "gatsby-telemetry": "^1.3.35", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-ionicons-v5": "^1.2.0", "three": "^0.120.1" } }

Jetzt läuft alles reibungslos.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

timbrandin picture timbrandin  ·  3Kommentare

ghost picture ghost  ·  3Kommentare

brandonmp picture brandonmp  ·  3Kommentare

magicly picture magicly  ·  3Kommentare

mikestopcontinues picture mikestopcontinues  ·  3Kommentare