Gatsby: Ambiguous "StoreStateProvider" error for all gatsby commands

[jessevdp]

Description

After updating Gatsby from 2.17.7 to 2.18.4, running any kind of gatsby command causes an error. There is literally no context though.

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

...

Environment

Unfortunately, I can't run gatsby info --clipboard, since it crashes with the same StateStoreProvider error as the other commands. I reverted my Gatsby version again and ran this command. Note that the Gatsby version in the output below is incorrect.

  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

[simonzsolt89]

I am experiencing the same issue after the update from 2.17.10 to 2.18.4

[freiksenet]

Thank you for reporting!

Could you also try upgrading gatsby-cli? If this doesn't help, it'd be really helpful if you could provide us with a reproduction repository.

Thank you! :purple_heart:

[jessevdp]

I don't actually have the CLI installed globally. The project relies on npm run <command> commands that in turn execute gatsby <command>, using the locally installed version of Gatsby.

Using that pattern people aren't required to litter their machine with a global dependency. (Which may get ugly if you work on several projects, which potentially require different versions)

[gabo2192]

I had a similar problem earlier today, what worked for me was to update react, react-dom and gatsby, erase node_modules and package-lock.json. Finally I run npm install again and everything worked fine

[jessevdp]

Updating react and react-dom, as well as Gatsby, seems to work. Shouldn't Gatsby list the correct versions of React that it's compatible with?

[orelmax]

Yesterday I've spent half day just to find out that In my case gatsby build/develop is working fine when deps are installed with yarn.

[jessevdp]

Seems like it has to do with a compatibility issue between React and Gatsby. If you're installing dependencies from scratch (without a lock file) your package manager (either yarn or npm) will just get the latest (allowed by restraints in package.json) version.

In my case, the react version was locked down in my package-lock.json, therefore it was not updated alongside Gatsby even on a fresh install.

[tmskrtsz]

I'm experiencing the same issue. I've updated gatsby, gatsby-cli, react and react-dom with no success. Is there a definitive solution?

EDIT: I removed gatsby and gatsby-cli and reinstalled them individually and that seems to have fixed it. Weird issue.

[matthewlwang]

I hit this issue. It's because there's two versions of react installed. Run an npm ls react to see them. I have a version of react specified in my package.json, and looks like gatsby/gatsby-cli 2.18.5 has a different version of react.

I learned of the issue through this page.

Still trying to fix the issue...

[matthewlwang]

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).

npm ls react shows two versions, but they're the same and marked as "deduped":

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

[matthewlwang]

While I'm unblocked for now, I still have concerns:
1) Two versions of react still exist? (I'm not sure), even if they're the same version now
2) Will future gatsby updates cause this problem again?

Don't have answers, but voicing my concerns for the gatsby team to consider.

[jessevdp]

I’m pretty sure npm ls just a tool to help you understand the dependency tree of your project. Likely there’s only one copy of react installed. You could into the node_modules folder to make sure...

[pieterbergmans]

I had the same issue after updating gatsby. I downgraded to my previous version "gatsby": "^2.13.73" which is several versions back but it fixed the issue.

[jeromedagustin]

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).

npm ls react shows two versions, but they're the same and marked as "deduped":

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

This worked for me. Thanks!

[soluml]

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).

npm ls react shows two versions, but they're the same and marked as "deduped":

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

Ditto to the above, this solution fixed things for me as well.

[clarmso]

I've successfully resolve the issue by upgrading react and react-dom to 16.12.0 and then upgrade gatsby to 2.18.7.

Important: Make sure you run "gatsby clean" after upgrading react, react-dom and gatsby.

[AlbertVilaCalvo]

Upgrading gatsby to 2.18.7 as suggested by @clarmso did the trick for me (react is at 16.12.0).

[stephangriesel]

Also having this same issue. Updated react and gatsby but still having the same issues. Also tried to clean after update, issue persists.

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

[ludobit]

Also having this same issue. Updated react and gatsby but still having the same issues. Also tried to clean after update, issue persists.

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

Same for me. Until yestarday has worked fine

[tr1s]

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).

npm ls react shows two versions, but they're the same and marked as "deduped":

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

This worked for me as well. Is this being worked on for a permanent fix?

Because of these updates I'm now getting more weird warnings of StoreStateProvider and random things in Contentful coming back as null even though they are there.

Not sure what's been going but I'm going to have to keep this on a branch for now

[stephangriesel]

Also having this same issue. Updated react and gatsby but still having the same issues. Also tried to clean after update, issue persists.

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

Removed node_modules folder & package-lock.json file. Ran npm install and all good again.

[Hillsie]

My experience was a combination of the above comments. Since I deleted the node_modules folder and I had gatsby plugins, the npm wouldn't work. Yarn install finally fixed it.

[ebkn]

I fixed this problem by reinstalling react,react-dom and gatsby. (https://github.com/gatsbyjs/gatsby/issues/19827#issuecomment-559898690)

before

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

after

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

[PashaSchool]

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).

npm ls react shows two versions, but they're the same and marked as "deduped":

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

Thank you, it's worked for me 🍾

[LouisBertin]

Personally I have to delete node_modules folder and package-lock.json
Then, I upgrade react, react-dom and gatsby :

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

Don't forget to update gatsby-cli to the latest version and run a gatsby clean
After that, gatsby develop works like a charm!

[Fatme]

I found that the issue happens only when the default gatsby logger is used. The particular logger that will be used is controlled via GATSBY_LOGGER process env. The issue is not reproducible if the default logger is changed for example with json logger.

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

[Perfect7M]

Switching to yurnalist / json gatsby logger fix issue for me

export GATSBY_LOGGER=["yurnalist"]

[jonathanprozzi]

I ran into this issue today when running gatsby develop on an older project (last time running gatsby develop was in the Fall)

I fixed by doing a combination of the above (very helpful!) suggestions.

Can confirm this worked:

1. gatsby clean - started with this to see if it resolved
2. deleting node_modules
3. npm install

It wasn't resolved at this point so I followed the advice to do this:

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

This worked perfectly.

[milkymura]

deleted package-lock.json
deleted node_modules
ran npm i

worked for me :D

[jennypriley]

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).

npm ls react shows two versions, but they're the same and marked as "deduped":

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

Thanks for the solution! This was a major blocker for me. It initially didn't work, but I reinstalled gatsby-cli as well. After that, it's been working just fine.

[ganushkevychv]

Description

After updating Gatsby from 2.17.7 to 2.18.4, running any kind of gatsby command causes an error. There is literally no context though.

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

...

Environment

Unfortunately, I can't run gatsby info --clipboard, since it crashes with the same StateStoreProvider error as the other commands. I reverted my Gatsby version again and ran this command. Note that the Gatsby version in the output below is incorrect.

  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

I faced with the same problem! Solution which helps me is to install yarn and add resolutions field to your package.json
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

[sidharthachatterjee]

The error was a result of gatsby-cli internally using react with ink to render the new interface. A mis match of versioning between a project's react version and the one needed by gatsby is what was causing this.

Installing gatsby-cli globally (which we recommend) should prevent these issues as far as I know. Nonetheless, closing this as there isn't anything that needs to be fixed in gatsby in regards to this.

Thank you so much all of you! 💜

[Epotignano]

Yesterday I've spent half day just to find out that In my case gatsby build/develop is working fine when deps are installed with yarn.

Effectively, using yarn solved the problem for me too

[Cali93]

Just running npm update solved the issue for me

[olingern]

Installing gatsby-cli globally (which we recommend) should prevent these issues as far as I know. Nonetheless, closing this as there isn't anything that needs to be fixed in gatsby in regards to this.

This did not work for me. Switching the logger to yurnalist or json as mentioned above did. I also removed public, .cache, and node_modules folders.

Output of gatsby version:

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

Here are my dependencies if curious:

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

Here's the error I receive:

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

[MelMacaluso]

To desperate devs looking for problems that should not exist in the first place just:

-remove node_modules folder
-delete package.lock.json
-run npm i

[pieh]

After getting hands on reproduction case for it:

This seems to come from case with npm installs that user defined version of react installs in node_modules, while gatsby-cli version of react will install in node_modules/gatsby/node_modules.

Because ink seems to get installed in node_modules its react imports will use different imports than gatsby-cli ones which leads to case:

1. 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.

And https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react explains this pretty well, but only suggestion there (to use yarn resolutions won't work because this is issue with how npm seems to decide node_modules structure and not yarn)

Only solution (very hacky at that) that comes to my mind right now is to override Node.js module resolution and hardcode react to one defined by gatsby-cli. It might be ok to do so (that's how PnP is implemented at least in yarn v1)

[pieh]

After few more thoughts - the other option is to use createRequireFromPath from gatsby-core-utils ( https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/README.md#createrequirefrompath ) and use that in gatsby-cli to load same version of react as ink does (this is significantly less hacky and with less chance of potential problems that would come from overloading Node.js module resolution).

Only problem with that would be if we use 3rd party ink components (ink-spinner is only one we use right now) and those will be installed in different directory than ink.

We could work around those potential problems by vendoring ink-spinner inside gatsby-cli and making sure to not use 3rd party components as packages (and vendor all of them)

---edited:
need to be careful about above - ink requires node >= 16.8.0 so we would need to make sure that we don't use features from react >= 16.8.1 onwards in gatsby-cli - so more research required, but it is promising

[pieh]

Update: the createRequireFromPath route won't work, because npm just can't "properly" resolve node_modules hierarchy given dependencies and peerDependencies provided by ink and gatsby-cli.

"Quick" change is to lower react version requirement ( https://github.com/gatsbyjs/gatsby/pull/21522 ) to lower amount of scenarios where this issue will happen.

But it doesn't fix this completely. For that we will likely bundle appropiate react version in gatsby-cli to workaround npm inability to properly create node_modules hierarchy (or override Node.js module resolution, but this is hack that can have unforeseen consequences so I'd like to avoid doing that if there are any other solutions)

[pieh]

Another update - we made some updates to gatsby to limit projects affected by it - it was published in [email protected] - but it still might require you to reset/delete package-lock.json.

If that still doesn't fix the issue - it's likely that you have react/react-dom pinned in your package.json and the version is lower than [email protected] - we don't have fix for that yet but are looking into it as next step - possible workaround is using yarn instead of npm for now (not verified).

If anyone is interested technical stuff please check comment on the initial Pull Request I tried to get it fixed - https://github.com/gatsbyjs/gatsby/pull/21508#issuecomment-586753917 and the plan right now is to use some bundler (probably microbundle) to bundle react in gatsby-cli so it doesn't try to use react from node_modules and will just have this included directly in gatsby-cli)

[delster]

I tried a lot of these comments, but as someone who hasn't used npm for any part of the process I thought I would write up what specifically worked for me.

My Setup:

Win10, Yarn installed via .msi, Gatsby via yarn global. Using yarn for all Gatsby projects.

Problem:

Any gatsby {command} would yield the StoreStateProvider error, but npx gatsby {command} worked.

Solution:

1. Delete .cache and /node_modules if they exist.
2. Confirm react and react-dom are updated, "^16.13.0" as of this writing.
3. Run yarn global remove gatsby gatsby-cli to remove the broken CLI.
4. Run yarn global add gatsby gatsby-cli to reinstall the CLI.
5. Run gatsby -v or another gatsby {command} and it should work.

Output:

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

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[olingern]

Even though this doesn't have much activity, I don't think it's stale

[renansjs]

I was having this same problem, what I did was delete my json.lock and run the yarn command to update the dependencies. and everything went back to working normally.

[gamusta]

I encountered the same problem that I solved by deleting the "node_modules" folder and "package-lock.json" file then "npm install" command.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[olingern]

:slightly_frowning_face: I'm still using yurnalist as my default logger. I never saw an update here that this has been fixed.

[soji-opa]

To desperate devs looking for problems that should not exist in the first place just:

-remove node_modules folder
-delete package.lock.json
-run npm i

This worked for me...

[theship]

Uninstalling and re-installing gatsby (v 2.23.11) worked for me.

[ammarmangala]

use yarn install, that should work

[kirilchristov]

So what I did (after reading everything so far) was I changed the version in the package.json file of Gatsby 2.18.7 and ran npm i It worked

[bgoyarts]

Still running into this issue.

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

Steps to reproduce:

1. use gatsby new to create new project
2. install sass using npm i --save node-sass gatsby-plugin-sass
3. run gatsby develop

Result

$ 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

This was fixed by implementing the instructions by doing the following as described above ☝️

So what I did (after reading everything so far) was I changed the version in the package.json file of Gatsby 2.18.7 and ran
npm i It worked

[JohanAltamar]

Removing .cache and node_modules folders, and package-lock.json and then reinstalling worked for me.

[jcfreitass]

Dei uma yarn upgrade e deu certo pra mim.

[duchess-toffee]

Removing node_modules, the npm cache, and the package-lock.json files is an impractical solution for what would be a breaking change each time a plugin or any dependency is added.

The underlying issue in my case was that a new project provisioned using gatsby new [path] [starter] implicitly uses yarn to bootstrap the dependencies if yarn is installed and available (which yarn returns a non-empty string). Subsequent attempts to install plugins/dependencies using npm will fail with cryptic errors as posted above because npm and yarn are mutually exclusive package management solutions.

It would be preferable for the gatsby cli to not default to a yarn without a command line option requesting it. The resolution for me was to uninstall yarn and re-initialize the project so that npm could be used exclusively.

[pieh]

https://github.com/gatsbyjs/gatsby/pull/26887 (merged yesterday and released today) which removes react from dependencies of gatsby-cli and instead bundles it when we publish packages - what this mean is that it shouldn't result in weird multiple copies of react in node_modules which cause all sort of problems.

@duchess-toffee You might find https://github.com/gatsbyjs/gatsby/pull/26856 interesting (not merged/released yet) - while it won't auto revert from yarn to npm as default package manager - you will be able to run gatsby options set pm npm

[Titou325]

I've had an issue seemingly linked to this problem #26998

Solved using a custom webpack config to resolve react:

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

module.exports = {
onCreateWebpackConfig: ({ actions }) => {
actions.setWebpackConfig({
resolve: {
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" } }

Everything runs smoothly now.