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! 💜

[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. (#19827 (comment))

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!

[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]

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]

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]

🙁 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]

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

// 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'))
                }
            }
        })
    }
}

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

[tomwrankmore]

Even though I am a developer noob, I've got to share how I fixed this incase it helps anyone else:

I was trying to spin up Gatsby/Sanity blog from
https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog
StoreStateProvider error was harassing me.

I went into the /web directory and checked the React versions using npm ls react, there was two different versions in gatsby and gatsby-cli.

FIX: npm install gatsby-cli in the web directory. Then npm ls react showed only one version of React, [email protected]

[rawestmoreland]

This worked for me!

Even though I am a developer noob, I've got to share how I fixed this incase it helps anyone else:

I was trying to spin up Gatsby/Sanity blog from
https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog
StoreStateProvider error was harassing me.

I went into the /web directory and checked the React versions using npm ls react, there was two different versions in gatsby and gatsby-cli.

FIX: npm install gatsby-cli in the web directory. Then npm ls react showed only one version of React, [email protected]

[bmajev]

Amazing... spent a couple of days trying figure things out, this worked for me.

Even though I am a developer noob, I've got to share how I fixed this incase it helps anyone else:

I was trying to spin up Gatsby/Sanity blog from
https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog
StoreStateProvider error was harassing me.

I went into the /web directory and checked the React versions using npm ls react, there was two different versions in gatsby and gatsby-cli.

FIX: npm install gatsby-cli in the web directory. Then npm ls react showed only one version of React, [email protected]