gatsby: Ambiguous "StoreStateProvider" error for all gatsby commands

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 36
  • Comments: 61 (14 by maintainers)

Commits related to this issue

Most upvoted comments

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
+113
matthewlwang on Nov 30, 2019

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

+81
gabo2192 on Nov 27, 2019

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.

+49
orelmax on Nov 28, 2019

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.

+45
jonathanprozzi on Jan 14, 2020

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

+8
olingern on Apr 1, 2020

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

+8
MelMacaluso on Jan 28, 2020

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.

+8
clarmso on Dec 8, 2019

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.

+7
soluml on Dec 6, 2019

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.

+6
Titou325 on Sep 23, 2020

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!

+5
LouisBertin on Dec 24, 2019

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.

+4
stephangriesel on Dec 12, 2019

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”

+4
stephangriesel on Dec 12, 2019

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

+3
tomwrankmore on Feb 15, 2021

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
+3
Fatme on Jan 7, 2020

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.

+3
jessevdp on Nov 28, 2019

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

+2
bgoyarts on Jul 27, 2020

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

+2
kirilchristov on Jul 18, 2020

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
+2
delster on Mar 2, 2020

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)

+2
pieh on Feb 15, 2020

deleted package-lock.json deleted node_modules ran npm i

worked for me 😄

+2
milkymura on Jan 14, 2020

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

+2
AlbertVilaCalvo on Dec 9, 2019

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…

+2
matthewlwang on Nov 30, 2019

Another update - we made some updates to gatsby to limit projects affected by it - it was published in gatsby@2.19.18 - 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 react@16.8.0 - 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)

+1
pieh on Feb 17, 2020
Read more comments on GitHub
← gatsby: All pages except index do not pre-render
gatsby: Anchor links don't work →