Gatsby: Error ambiguo "StoreStateProvider" para todos los comandos de gatsby

Estoy experimentando el mismo problema después de la actualización de 2.17.10 a 2.18.4

¡Gracias por informar!

¿También podrías intentar actualizar gatsby-cli? Si esto no ayuda, sería muy útil si nos pudiera proporcionar un depósito de reproducción.

¡Gracias! :corazón Purpura:

En realidad, no tengo la CLI instalada a nivel mundial. El proyecto se basa en los comandos npm run <command> que, a su vez, ejecutan gatsby <command> , utilizando la versión de Gatsby instalada localmente.

Usando ese patrón, las personas no están obligadas a ensuciar su máquina con una dependencia global. (Lo que puede ponerse feo si trabaja en varios proyectos, que potencialmente requieren diferentes versiones)

Hoy tuve un problema similar, lo que funcionó para mí fue actualizar react, react-dom y gatsby, borrar node_modules y package-lock.json. Finalmente ejecuto npm install nuevamente y todo funcionó bien

La actualización de react y react-dom , así como Gatsby, parece funcionar. ¿No debería Gatsby enumerar las versiones correctas de React con las que es compatible?

Ayer pasé medio día solo para descubrir que, en mi caso, gatsby build / development funciona bien cuando se instalan deps con hilo.

Parece que tiene que ver con un problema de compatibilidad entre React y Gatsby. Si está instalando dependencias desde cero (sin un archivo de bloqueo), su administrador de paquetes (ya sea yarn o npm) obtendrá la última versión (permitida por las restricciones en package.json).

En mi caso, la versión de reacción estaba bloqueada en mi package-lock.json , por lo tanto, no se actualizó junto con Gatsby incluso en una instalación nueva.

Estoy experimentando el mismo problema. He actualizado gatsby, gatsby-cli, react y react-dom sin éxito. ¿Existe una solución definitiva?

EDITAR: Eliminé gatsby y gatsby-cli y los reinstalé individualmente y eso parece haberlo solucionado. Extraño problema.

Golpeé este problema. Es porque hay dos versiones de react instaladas. Ejecute un npm ls react para verlos. Tengo una versión de react especificada en mi package.json, y parece que gatsby / gatsby-cli 2.18.5 tiene una versión diferente de react.

Me enteré del problema a través de esta página .

Sigo intentando solucionar el problema ...

¡Arreglé el problema! Usé npm para desinstalar, luego (re) instalar react , react-dom y gatsby . Lo hice en ese orden exacto (no creo que el pedido importe, pero para su información en caso de que lo haga).

npm ls react muestra dos versiones, pero son iguales y están marcadas como "deducidas":

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

Aunque estoy desbloqueado por ahora, todavía tengo preocupaciones:
1) ¿Todavía existen dos versiones de react? (No estoy seguro), incluso si ahora son la misma versión
2) ¿Las futuras actualizaciones de gatsby volverán a causar este problema?

No tengo respuestas, pero expreso mis preocupaciones para que el equipo de gatsby las considere.

Estoy bastante seguro de que npm ls solo una herramienta para ayudarlo a comprender el árbol de dependencias de su proyecto. Es probable que solo haya una copia de react instalada. Podrías entrar en la carpeta node_modules para asegurarte ...

Tuve el mismo problema después de actualizar gatsby. Bajé a mi versión anterior "gatsby": "^ 2.13.73", que es varias versiones anteriores, pero solucionó el problema.

¡Arreglé el problema! Usé npm para desinstalar, luego (re) instalar react , react-dom y gatsby . Lo hice en ese orden exacto (no creo que el pedido importe, pero para su información en caso de que lo haga).

npm ls react muestra dos versiones, pero son iguales y están marcadas como "deducidas":

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

Esto funcionó para mí. ¡Gracias!

¡Arreglé el problema! Usé npm para desinstalar, luego (re) instalar react , react-dom y gatsby . Lo hice en ese orden exacto (no creo que el pedido importe, pero para su información en caso de que lo haga).

npm ls react muestra dos versiones, pero son iguales y están marcadas como "deducidas":

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

Lo mismo ocurre con lo anterior, esta solución también solucionó las cosas para mí.

Resolví con éxito el problema actualizando react y react-dom a 16.12.0 y luego actualizo gatsby a 2.18.7.

Importante: asegúrese de ejecutar "gatsby clean" después de actualizar react, react-dom y gatsby.

Actualizar gatsby a 2.18.7 como lo sugirió @clarmso funcionó para mí (reaccionar está en 16.12.0).

También teniendo este mismo problema. Reaccionar y gatsby actualizado pero aún teniendo los mismos problemas. También intentó limpiar después de la actualización, el problema persiste.

"gatsby": "^ 2.18.11"
"reaccionar": "^ 16.12.0"
"react-dom": "^ 16.12.0"

También teniendo este mismo problema. Reaccionar y gatsby actualizado pero aún teniendo los mismos problemas. También intentó limpiar después de la actualización, el problema persiste.

"gatsby": "^ 2.18.11"
"reaccionar": "^ 16.12.0"
"react-dom": "^ 16.12.0"

Lo mismo para mi. Hasta ayer ha funcionado bien

¡Arreglé el problema! Usé npm para desinstalar, luego (re) instalar react , react-dom y gatsby . Lo hice en ese orden exacto (no creo que el pedido importe, pero para su información en caso de que lo haga).

npm ls react muestra dos versiones, pero son iguales y están marcadas como "deducidas":

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

Esto funcionó para mí también. ¿Se está trabajando en esto para una solución permanente?

Debido a estas actualizaciones, ahora recibo más advertencias extrañas de StoreStateProvider y cosas aleatorias en Contentful que vuelven como nulas a pesar de que están allí.

No estoy seguro de lo que ha estado sucediendo, pero tendré que mantener esto en una rama por ahora.

También teniendo este mismo problema. Reaccionar y gatsby actualizado pero aún teniendo los mismos problemas. También intentó limpiar después de la actualización, el problema persiste.

"gatsby": "^ 2.18.11"
"reaccionar": "^ 16.12.0"
"react-dom": "^ 16.12.0"

Se eliminaron la carpeta node_modules y el archivo package-lock.json. Ejecutó npm install y todo bien de nuevo.

Mi experiencia fue una combinación de los comentarios anteriores. Como eliminé la carpeta node_modules y tenía complementos de gatsby, el npm no funcionaría. La instalación de hilo finalmente lo arregló.

Solucioné este problema reinstalando react , react-dom y gatsby . (https://github.com/gatsbyjs/gatsby/issues/19827#issuecomment-559898690)

antes de

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

después

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

¡Arreglé el problema! Usé npm para desinstalar, luego (re) instalar react , react-dom y gatsby . Lo hice en ese orden exacto (no creo que el pedido importe, pero para su información en caso de que lo haga).

npm ls react muestra dos versiones, pero son iguales y están marcadas como "deducidas":

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

Gracias, me ha funcionado 🍾

Personalmente tengo que borrar la carpeta node_modules y package-lock.json
Luego, actualizo react , react-dom y gatsby :

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

No olvide actualizar gatsby-cli a la última versión y ejecutar gatsby clean
¡Después de eso, gatsby develop funciona como un encanto!

Descubrí que el problema ocurre solo cuando se usa el registrador gatsby predeterminado. El registrador particular que se utilizará se controla a través del proceso env de GATSBY_LOGGER . El problema no se puede reproducir si el registrador predeterminado se cambia, por ejemplo, con json logger.

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

Cambiar a yurnalist / json gatsby logger solucionó el problema por mí

export GATSBY_LOGGER=["yurnalist"]

Me encontré con este problema hoy al ejecutar gatsby develop en un proyecto anterior (la última vez que ejecuté gatsby Develop fue en el otoño)

Lo arreglé haciendo una combinación de las sugerencias anteriores (¡muy útiles!).

Puedo confirmar que esto funcionó:

1. gatsby clean - comenzó con esto para ver si se resolvió
2. eliminando node_modules
3. npm install

No se resolvió en este punto, así que seguí el consejo para hacer esto:

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

Esto funcionó perfectamente.

paquete-lock.json eliminado
módulos_nodo eliminados
corrí npm i

funcionó para mí: D

¡Arreglé el problema! Usé npm para desinstalar, luego (re) instalar react , react-dom y gatsby . Lo hice en ese orden exacto (no creo que el pedido importe, pero para su información en caso de que lo haga).

npm ls react muestra dos versiones, pero son iguales y están marcadas como "deducidas":

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

¡Gracias por la solución! Este fue un gran obstáculo para mí. Inicialmente no funcionó, pero reinstalé gatsby-cli también. Después de eso, ha funcionado bien.

Descripción

Después de actualizar Gatsby de 2.17.7 a 2.18.4, ejecutar cualquier tipo de comando gatsby provoca un error. Sin embargo, literalmente no hay contexto.

> 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:

...

Medio ambiente

Desafortunadamente, no puedo ejecutar gatsby info --clipboard , ya que se bloquea con el mismo error StateStoreProvider que los otros comandos. Revertí mi versión de Gatsby nuevamente y ejecuté este comando. Tenga en cuenta que la versión de Gatsby en el resultado a continuación es incorrecta .

  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

¡Me enfrenté al mismo problema! La solución que me ayuda es instalar hilo y agregar un campo de resoluciones a su package.json
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

El error fue el resultado de gatsby-cli usando internamente react con ink para representar la nueva interfaz. Una mala coincidencia de versiones entre la versión react un proyecto y la que necesita gatsby es lo que estaba causando esto.

La instalación de gatsby-cli globalmente (que recomendamos) debería evitar estos problemas hasta donde yo sé. No obstante, cerrando esto ya que no hay nada que deba arreglarse en gatsby con respecto a esto.

¡Muchas gracias a todos! 💜

Ayer pasé medio día solo para descubrir que, en mi caso, gatsby build / development funciona bien cuando se instalan deps con hilo.

Efectivamente, usar hilo también resolvió el problema para mí.

Simplemente ejecutando npm update resolvió el problema por mí

La instalación de gatsby-cli globalmente (que recomendamos) debería prevenir estos problemas hasta donde yo sé. No obstante, cerrando esto ya que no hay nada que deba arreglarse en gatsby con respecto a esto.

Esto no funcionó para mí. Cambiar el registrador a yurnalist o json como se mencionó anteriormente lo hizo. También eliminé las carpetas public , .cache y node_modules .

Salida de la versión de gatsby:

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

Aquí están mis dependencias si tienes curiosidad:

    "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"
    },

Aquí está el error que recibo:

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

Para los desarrolladores desesperados que buscan problemas que no deberían existir en primer lugar, simplemente:

-eliminar la carpeta node_modules
-eliminar package.lock.json
-ejecutar npm i

Después de poner las manos en el estuche de reproducción:

Esto parece provenir del caso con instalaciones npm que la versión definida por el usuario de react instala en node_modules , mientras que la versión gatsby-cli de react se instalará en node_modules/gatsby/node_modules .

Debido a que ink parece instalarse en node_modules sus importaciones de react utilizarán importaciones diferentes a las de gatsby-cli , lo que lleva al caso:

1. Es posible que tenga más de una copia de React en la misma aplicación
   Consulte https://fb.me/react-invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.

Y https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react explica esto bastante bien, pero solo hay una sugerencia (usar yarn resolutions no funcionará porque este es un problema con cómo npm parece decidir la estructura de node_modules y no el hilo)

La única solución (muy mala en eso) que me viene a la mente en este momento es anular la resolución del módulo Node.js y el código duro react a uno definido por gatsby-cli . Podría estar bien hacerlo (así es como se implementa PnP al menos en yarn v1)

Después de algunos pensamientos más, la otra opción es usar createRequireFromPath de gatsby-core-utils (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/README .md # createrequirefrompath) y utilícelo en gatsby-cli para cargar la misma versión de react que lo hace ink (esto es significativamente menos hacky y con menos posibilidades de problemas potenciales que vendrían por sobrecargar la resolución del módulo Node.js) .

El único problema con eso sería si usamos componentes ink terceros ( ink-spinner es solo uno de los que usamos en este momento) y esos se instalarán en un directorio diferente de ink .

Podríamos solucionar esos problemas potenciales vendiendo ink-spinner dentro de gatsby-cli y asegurándonos de no utilizar componentes de terceros como paquetes (y vendiéndolos todos)

--- editado:
Debe tener cuidado con lo anterior: ink requiere node >= 16.8.0 por lo que deberíamos asegurarnos de no usar funciones desde react >= 16.8.1 en adelante en gatsby-cli - por lo que se requiere más investigación, pero es prometedor

Actualización: la ruta createRequireFromPath no funcionará, porque npm simplemente no puede resolver "correctamente" la jerarquía de node_modules dada dependencies y peerDependencies proporcionado por ink y gatsby-cli .

El cambio "rápido" consiste en reducir el requisito de la versión react (https://github.com/gatsbyjs/gatsby/pull/21522) a una menor cantidad de escenarios donde sucederá este problema.

Pero no soluciona esto por completo. Para eso, probablemente agrupemos la versión apropiada react en gatsby-cli para solucionar npm incapacidad para crear correctamente la jerarquía node_modules (o anular la resolución del módulo Node.js, pero este es un truco que puede tener consecuencias imprevistas, así que me gustaría evitar hacerlo si hay otras soluciones)

Otra actualización: hicimos algunas actualizaciones en gatsby para limitar los proyectos afectados por ella; se publicó en [email protected] , pero aún puede requerir que restablezca / elimine package-lock.json .

Si eso aún no soluciona el problema, es probable que tenga react / react-dom anclado en su package.json y la versión sea inferior a [email protected] - todavía no tenemos una solución para eso, pero lo estamos considerando como el próximo paso; una posible solución es usar yarn lugar de npm por ahora (no verificado).

Si alguien está interesado en cuestiones técnicas, consulte el comentario sobre la solicitud de extracción inicial. Intenté solucionarlo: https://github.com/gatsbyjs/gatsby/pull/21508#issuecomment -586753917 y el plan en este momento es usar algún paquete (probablemente microbundle ) para agrupar react en gatsby-cli para que no intente usar react de node_modules y solo tenga esto incluido directamente en gatsby-cli )

Probé muchos de estos comentarios, pero como alguien que no ha usado npm para ninguna parte del proceso, pensé en escribir lo que funcionó específicamente para mí.

Mi configuración:

Win10, Yarn instalado a través de .msi, Gatsby a través de yarn global . Usando yarn para todos los proyectos de Gatsby.

Problema:

Cualquier gatsby {command} produciría el error StoreStateProvider , pero npx gatsby {command} funcionó.

Solución:

1. Elimine .cache y /node_modules si existen.
2. Confirme que react y react-dom estén actualizados, "^16.13.0" al momento de escribir este artículo.
3. Ejecute yarn global remove gatsby gatsby-cli para eliminar la CLI rota.
4. Ejecute yarn global add gatsby gatsby-cli para reinstalar la CLI.
5. Ejecute gatsby -v u otro gatsby {command} y debería funcionar.

Salida:

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

Hola

Este tema se ha silenciado. Silencio espeluznante. 👻

Tenemos muchos problemas, por lo que actualmente cerramos los problemas después de 30 días de inactividad. Han pasado al menos 20 días desde la última actualización aquí.
Si nos perdimos este problema o si desea mantenerlo abierto, responda aquí. ¡También puede agregar la etiqueta "no obsoleto" para mantener este problema abierto!
Como recordatorio amistoso: la mejor manera de ver este problema, o cualquier otro, solucionado es abrir una solicitud de extracción. Consulte gatsby.dev/contribute para obtener más información sobre la apertura de relaciones públicas, la clasificación de problemas y la contribución.

¡Gracias por ser parte de la comunidad de Gatsby! 💪💜

Aunque esto no tiene mucha actividad, no creo que esté rancio

Estaba teniendo este mismo problema, lo que hice fue eliminar mi json.lock y ejecutar el comando yarn para actualizar las dependencias. y todo volvió a funcionar con normalidad.

Encontré el mismo problema que resolví al eliminar la carpeta "node_modules" y el archivo "package-lock.json" y luego el comando "npm install".

Hola

Este tema se ha silenciado. Silencio espeluznante. 👻

Tenemos muchos problemas, por lo que actualmente cerramos los problemas después de 30 días de inactividad. Han pasado al menos 20 días desde la última actualización aquí.
Si nos perdimos este problema o si desea mantenerlo abierto, responda aquí. ¡También puede agregar la etiqueta "no obsoleto" para mantener este problema abierto!
Como recordatorio amistoso: la mejor manera de ver este problema, o cualquier otro, solucionado es abrir una solicitud de extracción. Consulte gatsby.dev/contribute para obtener más información sobre la apertura de relaciones públicas, la clasificación de problemas y la contribución.

¡Gracias por ser parte de la comunidad de Gatsby! 💪💜

¡Hola de nuevo!

Han pasado 30 días desde que sucedió algo sobre este tema, por lo que nuestro amigable robot del vecindario (¡ese soy yo!) Lo cerrará.
Tenga en cuenta que solo soy un robot, por lo que si cerré este problema por error, soy HUMAN_EMOTION_SORRY . No dude en volver a abrir este problema o crear uno nuevo si necesita algo más.
Como recordatorio amistoso: la mejor manera de ver este problema, o cualquier otro, solucionado es abrir una solicitud de extracción. Consulte gatsby.dev/contribute para obtener más información sobre la apertura de relaciones públicas, la clasificación de problemas y la contribución.

¡Gracias nuevamente por ser parte de la comunidad de Gatsby! 💪💜

: mild_frowning_face: sigo usando yurnalist como mi registrador predeterminado. Nunca vi una actualización aquí de que esto se haya solucionado.

Para los desarrolladores desesperados que buscan problemas que no deberían existir en primer lugar, simplemente:

-eliminar la carpeta node_modules
-eliminar package.lock.json
-ejecutar npm i

Esto funcionó para mí ...

Desinstalar y reinstalar gatsby (v 2.23.11) funcionó para mí.

usar instalación de hilo, eso debería funcionar

Entonces, lo que hice (después de leer todo hasta ahora) fue cambiar la versión en el archivo package.json de Gatsby 2.18.7 y ejecuté npm i Funcionó

Todavía me encuentro con este problema.

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

Pasos para reproducir:

1. use gatsby new para crear un nuevo proyecto
2. instalar sass usando npm i --save node-sass gatsby-plugin-sass
3. ejecutar gatsby develop

Resultado

$ 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

Esto se solucionó implementando las instrucciones haciendo lo siguiente como se describe arriba ☝️

Entonces, lo que hice (después de leer todo hasta ahora) fue cambiar la versión en el archivo package.json de Gatsby 2.18.7 y ejecutar
npm i Funcionó

Eliminar las carpetas .cache y node_modules, y package-lock.json y luego reinstalar funcionó para mí.

Le di una actualización de hilo y funcionó para mí.

Eliminar node_modules , la caché npm y los archivos package-lock.json es una solución poco práctica para lo que sería un cambio importante cada vez que se agrega un complemento o cualquier dependencia.

El problema subyacente en mi caso fue que un nuevo proyecto aprovisionado usando gatsby new [path] [starter] implícitamente usa yarn para arrancar las dependencias si yarn está instalado y disponible ( which yarn devuelve una cadena no vacía). Los intentos posteriores de instalar complementos / dependencias usando npm fallarán con errores crípticos como se publicó anteriormente porque npm y yarn son soluciones de administración de paquetes mutuamente excluyentes.

Sería preferible que gatsby cli no tenga un yarn predeterminado de desinstalar hilo y reinicializar el proyecto para que npm pudieran usarse exclusivamente.

https://github.com/gatsbyjs/gatsby/pull/26887 (fusionado ayer y lanzado hoy) que elimina react de las dependencias de gatsby-cli y, en su lugar, lo agrupa cuando publicamos paquetes, lo que Lo que significa es que no debería resultar en extrañas copias múltiples de react en node_modules que causen todo tipo de problemas.

@ duchess-toffee Puede encontrar https://github.com/gatsbyjs/gatsby/pull/26856 interesante (aún no fusionado / lanzado), aunque no se revertirá automáticamente de yarn a npm como administrador de paquetes predeterminado: podrá ejecutar gatsby options set pm npm

Tuve un problema aparentemente relacionado con este problema # 26998

Resuelto usando una configuración de paquete web personalizado para resolver react :

`` `` js
// archivo: gatsby-node.js
const ruta = require ('ruta')

module.exports = {
onCreateWebpackConfig: ({acciones}) => {
actions.setWebpackConfig ({
resolver: {
alias: {
'react': 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" } }

Ahora todo funciona sin problemas.