Gatsby: Erro ambíguo "StoreStateProvider" para todos os comandos gatsby

Estou tendo o mesmo problema após a atualização de 2.17.10 para 2.18.4

Obrigado por relatar!

Você também poderia tentar atualizar o gatsby-cli? Se isso não ajudar, seria muito útil se você pudesse nos fornecer um repositório de reprodução.

Obrigado! :coração roxo:

Na verdade, não tenho o CLI instalado globalmente. O projeto conta com npm run <command> comandos que, por sua vez, executam gatsby <command> , usando a versão de Gatsby instalada localmente.

Usando esse padrão, as pessoas não precisam sujar sua máquina com uma dependência global. (O que pode ficar feio se você trabalhar em vários projetos, que potencialmente requerem versões diferentes)

Eu tive um problema semelhante hoje cedo, o que funcionou para mim foi atualizar o react, react-dom e gatsby, erase node_modules e package-lock.json. Finalmente, executei o npm install novamente e tudo funcionou bem

Atualizar react e react-dom , assim como Gatsby, parece funcionar. Gatsby não deveria listar as versões corretas do React com as quais ele é compatível?

Ontem eu gastei meio dia apenas para descobrir que no meu caso o gatsby build / development está funcionando bem quando os deps são instalados com yarn.

Parece que tem a ver com um problema de compatibilidade entre React e Gatsby. Se você estiver instalando dependências do zero (sem um arquivo de bloqueio), seu gerenciador de pacotes (yarn ou npm) apenas obterá a versão mais recente (permitida por restrições em package.json).

No meu caso, a versão react foi bloqueada em meu package-lock.json , portanto, não foi atualizada junto com Gatsby, mesmo em uma nova instalação.

Estou tendo o mesmo problema. Eu atualizei gatsby, gatsby-cli, react e react-dom sem sucesso. Existe uma solução definitiva?

EDIT: Eu removi gatsby e gatsby-cli e reinstalei-os individualmente e isso parece ter corrigido. Problema estranho.

Eu acertei esse problema. É porque existem duas versões do react instaladas. Execute um npm ls react para vê-los. Eu tenho uma versão de react especificada em meu package.json e parece que gatsby / gatsby-cli 2.18.5 tem uma versão diferente de react.

Eu soube do problema através desta página .

Ainda tentando corrigir o problema ...

Resolvi o problema! Usei o npm para desinstalar e (re) instalar react , react-dom e gatsby . Fiz isso nessa ordem exata (não acredito que o pedido importaria, mas para sua informação, caso importe).

npm ls react mostra duas versões, mas são iguais e marcadas como "desduplicadas":

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

Embora esteja desbloqueado por enquanto, ainda tenho preocupações:
1) Duas versões do react ainda existem? (Não tenho certeza), mesmo que sejam da mesma versão agora
2) As atualizações futuras do gatsby causarão esse problema novamente?

Não tenho respostas, mas expressando minhas preocupações para que a equipe gatsby considere.

Tenho certeza de que npm ls apenas uma ferramenta para ajudá-lo a entender a árvore de dependências do seu projeto. Provavelmente há apenas uma cópia do react instalada. Você poderia entrar na pasta node_modules para se certificar ...

Tive o mesmo problema depois de atualizar o gatsby. Fiz o downgrade para minha versão anterior "gatsby": "^ 2.13.73", que está em várias versões, mas corrigiu o problema.

Resolvi o problema! Usei o npm para desinstalar e (re) instalar react , react-dom e gatsby . Fiz isso nessa ordem exata (não acredito que o pedido importaria, mas para sua informação, caso importe).

npm ls react mostra duas versões, mas são iguais e marcadas como "desduplicadas":

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

Isso funcionou para mim. Obrigado!

Resolvi o problema! Usei o npm para desinstalar e (re) instalar react , react-dom e gatsby . Fiz isso nessa ordem exata (não acredito que o pedido importaria, mas para sua informação, caso importe).

npm ls react mostra duas versões, mas são iguais e marcadas como "desduplicadas":

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

Idem ao anterior, essa solução também corrigiu as coisas para mim.

Resolvi o problema com sucesso atualizando o react e react-dom para 16.12.0 e, em seguida, atualizei o gatsby para 2.18.7.

Importante: certifique-se de executar "gatsby clean" após atualizar o react, react-dom e gatsby.

Atualizar gatsby para 2.18.7 conforme sugerido por @clarmso funcionou para mim (a reação é em 16.12.0).

Também tendo esse mesmo problema. Reagir e gatsby atualizados, mas ainda com os mesmos problemas. Também tentei limpar após a atualização, o problema persiste.

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

Também tendo esse mesmo problema. Reagir e gatsby atualizados, mas ainda com os mesmos problemas. Também tentei limpar após a atualização, o problema persiste.

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

O mesmo para mim. Até ontem funcionou bem

Resolvi o problema! Usei o npm para desinstalar e (re) instalar react , react-dom e gatsby . Fiz isso nessa ordem exata (não acredito que o pedido importaria, mas para sua informação, caso importe).

npm ls react mostra duas versões, mas são iguais e marcadas como "desduplicadas":

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

Isso funcionou para mim também. Isso está sendo resolvido para uma correção permanente?

Por causa dessas atualizações, estou recebendo avisos mais estranhos de StoreStateProvider e coisas aleatórias em Contentful voltando como nulas, embora estejam lá.

Não tenho certeza do que está acontecendo, mas vou ter que manter isso em um branch por enquanto

Também tendo esse mesmo problema. Reagir e gatsby atualizados, mas ainda com os mesmos problemas. Também tentei limpar após a atualização, o problema persiste.

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

Removida a pasta node_modules e o arquivo package-lock.json. Executei npm install e tudo bem novamente.

Minha experiência foi uma combinação dos comentários acima. Como eu excluí a pasta node_modules e tinha plug-ins do gatsby, o npm não funcionava. Yarn install finalmente consertou.

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

antes

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

depois de

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

Resolvi o problema! Usei o npm para desinstalar e (re) instalar react , react-dom e gatsby . Fiz isso nessa ordem exata (não acredito que o pedido importaria, mas para sua informação, caso importe).

npm ls react mostra duas versões, mas são iguais e marcadas como "desduplicadas":

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

Obrigado, funcionou para mim 🍾

Pessoalmente, tenho que excluir a pasta node_modules e package-lock.json
Então, eu atualizo react , react-dom e gatsby :

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

Não se esqueça de atualizar gatsby-cli para a versão mais recente e executar um gatsby clean
Depois disso, gatsby develop funciona perfeitamente!

Descobri que o problema ocorre apenas quando o logger gatsby padrão é usado. O logger específico que será usado é controlado pelo env do processo GATSBY_LOGGER . O problema não é reproduzível se o logger padrão for alterado, por exemplo, com o logger json.

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

Mudar para yurnalist / json gatsby logger corrige o problema para mim

export GATSBY_LOGGER=["yurnalist"]

Encontrei esse problema hoje ao executar gatsby develop em um projeto mais antigo (a última vez que executei o gatsby Develop foi no outono)

Consertei fazendo uma combinação das sugestões acima (muito úteis!).

Pode confirmar que funcionou:

1. gatsby clean - comece com isso para ver se resolve
2. excluindo node_modules
3. npm install

Não foi resolvido neste ponto, então segui o conselho para fazer isso:

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

Funcionou perfeitamente.

excluiu package-lock.json
node_modules deletados
correu npm i

funcionou para mim: D

Resolvi o problema! Usei o npm para desinstalar e (re) instalar react , react-dom e gatsby . Fiz isso nessa ordem exata (não acredito que o pedido importaria, mas para sua informação, caso importe).

npm ls react mostra duas versões, mas são iguais e marcadas como "desduplicadas":

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

Obrigado pela solução! Este foi um grande bloqueador para mim. Inicialmente não funcionou, mas eu reinstalei gatsby-cli também. Depois disso, está funcionando bem.

Descrição

Depois de atualizar o Gatsby de 2.17.7 para 2.18.4, a execução de qualquer tipo de comando gatsby causa um erro. No entanto, literalmente não há 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:

...

Meio Ambiente

Infelizmente, não posso executar gatsby info --clipboard , pois ele trava com o mesmo erro StateStoreProvider dos outros comandos. Eu reverti minha versão de Gatsby novamente e executei este comando. Observe que a versão de Gatsby na saída abaixo está incorreta .

  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

Eu enfrentei o mesmo problema! A solução que me ajuda é instalar o yarn e adicionar o campo de resoluções ao seu package.json
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

O erro foi resultado de gatsby-cli internamente usando react com ink para renderizar a nova interface. Uma incompatibilidade de versão entre a versão react um projeto e aquela necessária por gatsby é o que estava causando isso.

A instalação de gatsby-cli globalmente (que recomendamos) deve evitar esses problemas, tanto quanto eu sei. No entanto, fechando isso porque não há nada que precise ser corrigido em gatsby com relação a isso.

Muito obrigado a todos vocês! 💜

Ontem eu gastei meio dia apenas para descobrir que no meu caso o gatsby build / development está funcionando bem quando os deps são instalados com yarn.

Efetivamente, usar fios resolveu o problema para mim também

Apenas executar npm update resolveu o problema para mim

Instalar o gatsby-cli globalmente (o que recomendamos) deve evitar esses problemas, tanto quanto eu sei. No entanto, fechando isso porque não há nada que precise ser corrigido no gatsby em relação a isso.

Isto não funcionou para mim. Mudar o logger para yurnalist ou json conforme mencionado acima. Eu também removi as pastas public , .cache e node_modules .

Saída da versão gatsby:

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

Aqui estão minhas dependências, se estiver curioso:

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

Aqui está o erro que recebo:

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 desenvolvedores desesperados em busca de problemas que não deveriam existir, apenas:

-remove a pasta node_modules
-delete package.lock.json
-run npm i

Depois de conseguir as mãos na caixa de reprodução para ele:

Isso parece vir do caso de instalações do npm em que a versão definida pelo usuário de react instala em node_modules , enquanto a versão gatsby-cli do react será instalada em node_modules/gatsby/node_modules .

Porque ink parece ter sido instalado em node_modules suas react importações usarão importações diferentes de gatsby-cli , o que leva ao caso:

1. Você pode ter mais de uma cópia do React no mesmo aplicativo
   Consulte https://fb.me/react-invalid-hook-call para dicas sobre como depurar e corrigir esse problema.

E https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react explica isso muito bem, mas apenas a sugestão aí (usar yarn resolutions não funcionará porque é um problema com como npm parece decidir node_modules estrutura e não fio)

A única solução (muito hacky nisso) que vem à minha mente agora é substituir a resolução do módulo Node.js e o código react para um definido por gatsby-cli . Pode ser bom fazer isso (é assim que o PnP é implementado, pelo menos no yarn v1)

Depois de mais alguns pensamentos - a outra opção é usar createRequireFromPath de gatsby-core-utils (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/README Md # createrequirefrompath) e usar isso em gatsby-cli para carregar mesma versão de reagir como ink faz (isso é significativamente menos hacky e com menos chance de problemas potenciais que vêm sobrecarregando resolução módulo Node.js) .

O único problema seria se usarmos componentes ink terceiros ( ink-spinner é apenas um que usamos agora) e eles serão instalados em um diretório diferente de ink .

Poderíamos contornar esses problemas potenciais vendendo ink-spinner dentro de gatsby-cli e certificando-se de não usar componentes de terceiros como pacotes (e vender todos eles)

---editado:
precisa ter cuidado com o acima - ink requer node >= 16.8.0 então precisaríamos ter certeza de que não usaremos recursos de react >= 16.8.1 em diante em gatsby-cli então mais pesquisas são necessárias, mas é promissor

Atualização: a rota createRequireFromPath não funcionará, porque npm simplesmente não pode resolver "corretamente" node_modules hierarquia dada dependencies e peerDependencies fornecido por ink e gatsby-cli .

A mudança "rápida" é reduzir o requisito de versão react (https://github.com/gatsbyjs/gatsby/pull/21522) para reduzir a quantidade de cenários onde esse problema vai acontecer.

Mas isso não corrige completamente. Para isso, provavelmente agruparemos a versão react apropriada em gatsby-cli para contornar npm incapacidade de criar corretamente a hierarquia node_modules (ou substituir a resolução do módulo Node.js, mas este é um hack que pode ter consequências imprevistas, então gostaria de evitar fazer isso se houver alguma outra solução)

Outra atualização - fizemos algumas atualizações em gatsby para limitar os projetos afetados por ela - foi publicada em [email protected] - mas ainda pode exigir que você reinicie / exclua package-lock.json .

Se isso ainda não resolver o problema - é provável que você tenha react / react-dom fixado em seu package.json e a versão é inferior a [email protected] - não temos uma correção para isso ainda, mas estamos analisando isso como a próxima etapa - uma possível solução alternativa é usar yarn vez de npm por enquanto (não verificado).

Se alguém estiver interessado em coisas técnicas, verifique o comentário sobre a solicitação inicial de pull que tentei consertar - https://github.com/gatsbyjs/gatsby/pull/21508#issuecomment -586753917 e o plano agora é usar algum bundler (provavelmente microbundle ) para empacotar react em gatsby-cli para que não tente usar react de node_modules e terá apenas isso incluído diretamente em gatsby-cli )

Tentei muitos desses comentários, mas como alguém que não usou npm em nenhuma parte do processo, pensei em escrever o que funcionou especificamente para mim.

Minha configuração:

Win10, Yarn instalado via .msi, Gatsby via yarn global . Usando yarn para todos os projetos Gatsby.

Problema:

Qualquer gatsby {command} geraria o erro StoreStateProvider , mas npx gatsby {command} funcionou.

Solução:

1. Exclua .cache e /node_modules se eles existirem.
2. Confirme se react e react-dom estão atualizados, "^16.13.0" momento desta redação.
3. Execute yarn global remove gatsby gatsby-cli para remover o CLI quebrado.
4. Execute yarn global add gatsby gatsby-cli para reinstalar a CLI.
5. Execute gatsby -v ou outro gatsby {command} e deve funcionar.

Resultado:

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

Hiya!

Este problema ficou quieto. Silêncio assustador. 👻

Temos muitos problemas, então atualmente fechamos os problemas após 30 dias de inatividade. Já se passaram pelo menos 20 dias desde a última atualização aqui.
Se perdemos esse problema ou se você deseja mantê-lo em aberto, responda aqui. Você também pode adicionar o rótulo "não obsoleto" para manter este problema aberto!
Como um lembrete amigável: a melhor maneira de ver esse problema, ou qualquer outro, corrigido é abrir uma solicitação pull. Verifique gatsby.dev/contribute para obter mais informações sobre como abrir PRs, fazer a triagem de problemas e contribuir!

Obrigado por fazer parte da comunidade Gatsby! 💪💜

Mesmo que não tenha muita atividade, não acho que esteja obsoleto

Eu estava tendo o mesmo problema, o que fiz foi deletar meu json.lock e executar o comando yarn para atualizar as dependências. e tudo voltou a funcionar normalmente.

Encontrei o mesmo problema que resolvi excluindo a pasta "node_modules" e o arquivo "package-lock.json" e o comando "npm install".

Hiya!

Este problema ficou quieto. Silêncio assustador. 👻

Temos muitos problemas, então atualmente fechamos os problemas após 30 dias de inatividade. Já se passaram pelo menos 20 dias desde a última atualização aqui.
Se perdemos esse problema ou se você deseja mantê-lo em aberto, responda aqui. Você também pode adicionar o rótulo "não obsoleto" para manter este problema aberto!
Como um lembrete amigável: a melhor maneira de ver esse problema, ou qualquer outro, corrigido é abrir uma solicitação pull. Verifique gatsby.dev/contribute para obter mais informações sobre como abrir PRs, fazer a triagem de problemas e contribuir!

Obrigado por fazer parte da comunidade Gatsby! 💪💜

Olá de novo!

Já se passaram 30 dias desde que algo aconteceu sobre esse problema, então nosso amigável robô da vizinhança (sou eu!) Vai fechá-lo.
Lembre-se de que sou apenas um robô, portanto, se fechei este problema por engano, sou HUMAN_EMOTION_SORRY . Sinta-se à vontade para reabrir este problema ou criar um novo se precisar de mais alguma coisa.
Como um lembrete amigável: a melhor maneira de ver esse problema, ou qualquer outro, corrigido é abrir uma solicitação pull. Verifique gatsby.dev/contribute para obter mais informações sobre como abrir PRs, fazer a triagem de problemas e contribuir!

Obrigado novamente por fazer parte da comunidade Gatsby! 💪💜

: ligeiramente_frowning_face: Ainda estou usando yurnalist como meu registrador padrão. Eu nunca vi uma atualização aqui que isso tenha sido corrigido.

Para desenvolvedores desesperados em busca de problemas que não deveriam existir, apenas:

-remove a pasta node_modules
-delete package.lock.json
-run npm i

Isso funcionou para mim ...

Desinstalar e reinstalar gatsby (v 2.23.11) funcionou para mim.

use yarn install, que deve funcionar

Então o que eu fiz (depois de ler tudo até agora) foi mudar a versão no arquivo package.json do Gatsby 2.18.7 e executei npm i Funcionou

Ainda com esse problema.

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

Passos para reproduzir:

1. use gatsby new para criar um novo projeto
2. instale o Sass usando npm i --save node-sass gatsby-plugin-sass
3. execute 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

Isso foi corrigido com a implementação das instruções ao fazer o seguinte, conforme descrito acima ☝️

Então o que eu fiz (depois de ler tudo até agora) foi mudar a versão no arquivo package.json do Gatsby 2.18.7 e executar
npm i Funcionou

Remover as pastas .cache e node_modules e package-lock.json e depois reinstalar funcionou para mim.

Dei uma yarn upgrade e deu certo pra mim.

Remover node_modules , o cache npm e os arquivos package-lock.json é uma solução impraticável para o que seria uma alteração importante cada vez que um plug-in ou qualquer dependência fosse adicionado.

O problema subjacente no meu caso era que um novo projeto provisionado usando gatsby new [path] [starter] implicitamente usa yarn para inicializar as dependências se yarn estiver instalado e disponível ( which yarn retorna uma string não vazia). Tentativas subsequentes de instalar plug-ins / dependências usando npm irão falhar com erros enigmáticos como postado acima porque npm e yarn são soluções de gerenciamento de pacotes mutuamente exclusivas.

Seria preferível que o gatsby cli não assumisse como padrão yarn sem uma opção de linha de comando solicitando isso. A resolução para mim foi desinstalar o yarn e reinicializar o projeto para que npm pudesse ser usado exclusivamente.

https://github.com/gatsbyjs/gatsby/pull/26887 (fundido ontem e lançado hoje) que remove react das dependências de gatsby-cli e, em vez disso, empacota quando publicamos pacotes - o que isso o que significa é que não deve resultar em cópias múltiplas estranhas de react em node_modules que causam todo tipo de problemas.

@ duchess-toffee Você pode achar https://github.com/gatsbyjs/gatsby/pull/26856 interessante (não fundido / lançado ainda) - embora não seja revertido automaticamente de yarn para npm como gerenciador de pacotes padrão - você poderá executar gatsby options set pm npm

Tive um problema aparentemente relacionado a este problema # 26998

Resolvido usando uma configuração de pacote web personalizado para resolver react :

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

module.exports = {
onCreateWebpackConfig: ({ações}) => {
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" } }

Tudo corre bem agora.