Ambiguous "StoreStateProvider" error for all gatsby commands #19827

jessevdp · 2019-11-27T07:59:55Z

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

The text was updated successfully, but these errors were encountered:

simonzsolt89 · 2019-11-27T08:25:03Z

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

freiksenet · 2019-11-27T08:28:09Z

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 · 2019-11-27T10:29:37Z

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 · 2019-11-27T22:44:40Z

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 · 2019-11-28T07:23:52Z

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 · 2019-11-28T07:55:26Z

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 · 2019-11-28T09:47:45Z

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 · 2019-11-29T14:32:28Z

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 · 2019-11-30T00:13:02Z

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 · 2019-11-30T00:19:57Z

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

gatsby-starter-default@0.1.0 <redacted the filepath>
├─┬ gatsby@2.18.5
│ └─┬ gatsby-cli@2.8.14
│   └── react@16.12.0  deduped
└── react@16.12.0

matthewlwang · 2019-11-30T00:23:29Z

While I'm unblocked for now, I still have concerns:

Two versions of react still exist? (I'm not sure), even if they're the same version now
Will future gatsby updates cause this problem again?

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

jessevdp · 2019-11-30T09:18:59Z

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 · 2019-12-02T11:47:31Z

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 · 2019-12-05T04:22:46Z

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":
gatsby-starter-default@0.1.0 <redacted the filepath>
├─┬ gatsby@2.18.5
│ └─┬ gatsby-cli@2.8.14
│   └── react@16.12.0  deduped
└── react@16.12.0

This worked for me. Thanks!

soluml · 2019-12-06T02:17:54Z

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":
gatsby-starter-default@0.1.0 <redacted the filepath>
├─┬ gatsby@2.18.5
│ └─┬ gatsby-cli@2.8.14
│   └── react@16.12.0  deduped
└── react@16.12.0

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

clarmso · 2019-12-08T04:40:00Z

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 · 2019-12-09T20:17:31Z

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

stephangriesel · 2019-12-12T05:07:38Z

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 · 2019-12-12T10:48:26Z

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 · 2019-12-12T16:51:15Z

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":
gatsby-starter-default@0.1.0 <redacted the filepath>
├─┬ gatsby@2.18.5
│ └─┬ gatsby-cli@2.8.14
│   └── react@16.12.0  deduped
└── react@16.12.0

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 · 2019-12-12T18:29:28Z

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 · 2019-12-16T04:56:49Z

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 · 2019-12-16T17:09:05Z

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 · 2019-12-17T16:36:28Z

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":
gatsby-starter-default@0.1.0 <redacted the filepath>
├─┬ gatsby@2.18.5
│ └─┬ gatsby-cli@2.8.14
│   └── react@16.12.0  deduped
└── react@16.12.0

Thank you, it's worked for me 🍾

LouisBertin · 2019-12-24T06:58:04Z

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 · 2020-04-11T16:46:44Z

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 · 2020-04-26T02:39:51Z

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 · 2020-05-16T12:03:20Z

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 · 2020-05-26T12:04:54Z

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 · 2020-05-26T15:30:14Z

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

soji-opa · 2020-06-01T13:43:42Z

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 · 2020-06-26T00:36:51Z

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

ammarmangala · 2020-07-01T04:37:16Z

use yarn install, that should work

kirilchristov · 2020-07-18T00:54:21Z

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 · 2020-07-27T09:43:31Z

Still running into this issue.

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

Steps to reproduce:

use gatsby new to create new project
install sass using npm i --save node-sass gatsby-plugin-sass
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 · 2020-07-28T18:01:10Z

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

jcfreitass · 2020-08-17T20:56:35Z

Dei uma yarn upgrade e deu certo pra mim.

duchess-toffee · 2020-09-02T00:02:00Z

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 · 2020-09-16T11:24:29Z

#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 · 2020-09-23T13:06:52Z

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.

gatsbyjs/gatsby#19827 (comment)

When attempting to run the website in development, after making no changes, I was greeted with the following error message: > The above error occurred in the <StoreStateProvider> component: > in StoreStateProvider > in App After some digging, I dsocvered I needed to update React, React DOM, and Gatsby. See: gatsbyjs/gatsby#19827 Then after resolving the above issue, I found this error message when actually viewing the development server: > Error: React-Hot-Loader: AppContainer should be patched See: gatsbyjs/gatsby#26979

tomwrankmore · 2021-02-15T09:45:38Z

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, react@17.0.1

rawestmoreland · 2021-02-15T19:43:07Z

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, react@17.0.1

bmajev · 2021-03-15T17:11:23Z

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, react@17.0.1

freiksenet added status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. type: bug An issue or pull request relating to a bug in Gatsby labels Nov 27, 2019

vladar mentioned this issue Nov 28, 2019

Update to gatsby@2.18.5 getting Error: Invalid hook call. in StoreStateProvider #19864

Closed

LekoArts mentioned this issue Dec 2, 2019

install gatsby-transformer-remark breaks 'gatsby develop' #19064

Closed

akanshgulati mentioned this issue Dec 25, 2019

New Gatsby-Theme-Ghost Project won't run on develop akanshgulati/gatsby-theme-ghost#7

Open

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label May 16, 2020

LekoArts mentioned this issue May 18, 2020

Installing module in gatsby removing some gatsby dependent modules. #24176

Closed

raunofreiberg mentioned this issue May 21, 2020

fix(website): update lock file reach/reach-ui#599

Merged

10 tasks

github-actions bot closed this as completed May 26, 2020

incompl mentioned this issue Jul 13, 2020

Update dependencies so running the gatsby portfolio example will work takeshape/takeshape-samples#33

Merged

shadcn mentioned this issue Aug 5, 2020

Typeface fonts not working reflexjs/reflexjs#31

Closed

shadcn mentioned this issue Sep 14, 2020

Error on build after install blog component - The above error occurred in the <StoreStateProvider> component reflexjs/reflexjs#80

Closed

pieh mentioned this issue Sep 14, 2020

chore(gatsby-cli): bundle ink logger #26887

Merged

ascorbic mentioned this issue Sep 23, 2020

Invalid Hook Call when using gatsby-starter-mdx-basic #26998

Closed

johnnyoshika added a commit to jobcast/jobcast-www that referenced this issue Oct 7, 2020

Re-install gatsby and react due to version conflicts

072bac0

gatsbyjs/gatsby#19827 (comment)

bmajev mentioned this issue Mar 15, 2021

Error on npm run dev sanity-io/sanity-template-gatsby-blog#148

Open

Ambiguous "StoreStateProvider" error for all gatsby commands #19827

Ambiguous "StoreStateProvider" error for all gatsby commands #19827

Comments

jessevdp commented Nov 27, 2019

Description

Environment

simonzsolt89 commented Nov 27, 2019

freiksenet commented Nov 27, 2019

jessevdp commented Nov 27, 2019

gabo2192 commented Nov 27, 2019

jessevdp commented Nov 28, 2019

orelmax commented Nov 28, 2019

jessevdp commented Nov 28, 2019

tmskrtsz commented Nov 29, 2019 • edited

matthewlwang commented Nov 30, 2019

matthewlwang commented Nov 30, 2019

matthewlwang commented Nov 30, 2019 • edited

jessevdp commented Nov 30, 2019

pieterbergmans commented Dec 2, 2019

jeromedagustin commented Dec 5, 2019

soluml commented Dec 6, 2019

clarmso commented Dec 8, 2019

AlbertVilaCalvo commented Dec 9, 2019

stephangriesel commented Dec 12, 2019 • edited

ludobit commented Dec 12, 2019

tr1s commented Dec 12, 2019 • edited

stephangriesel commented Dec 12, 2019

Hillsie commented Dec 16, 2019 • edited

ebkn commented Dec 16, 2019 • edited

PashaSchool commented Dec 17, 2019

LouisBertin commented Dec 24, 2019

renansjs commented Apr 11, 2020

gamusta commented Apr 26, 2020

github-actions bot commented May 16, 2020

github-actions bot commented May 26, 2020

olingern commented May 26, 2020 • edited

soji-opa commented Jun 1, 2020

theship commented Jun 26, 2020

ammarmangala commented Jul 1, 2020

kirilchristov commented Jul 18, 2020

bgoyarts commented Jul 27, 2020 • edited

JohanAltamar commented Jul 28, 2020

jcfreitass commented Aug 17, 2020

duchess-toffee commented Sep 2, 2020

pieh commented Sep 16, 2020

Titou325 commented Sep 23, 2020 • edited

tomwrankmore commented Feb 15, 2021 • edited

rawestmoreland commented Feb 15, 2021

bmajev commented Mar 15, 2021 • edited

tmskrtsz commented Nov 29, 2019 •

edited

matthewlwang commented Nov 30, 2019 •

edited

stephangriesel commented Dec 12, 2019 •

edited

tr1s commented Dec 12, 2019 •

edited

Hillsie commented Dec 16, 2019 •

edited

ebkn commented Dec 16, 2019 •

edited

olingern commented May 26, 2020 •

edited

bgoyarts commented Jul 27, 2020 •

edited

Titou325 commented Sep 23, 2020 •

edited

tomwrankmore commented Feb 15, 2021 •

edited

bmajev commented Mar 15, 2021 •

edited