gatsby: React 17 gatsby won't start

After upgrading to React 17, gatsby develop and gatsby clean does not run successfully

➜  schwayweb git:(master) ✗ npm start

> schwayweb@0.1.0 start /Users/Austin/Projects/schwayweb
> npm run develop


> schwayweb@0.1.0 develop /Users/Austin/Projects/schwayweb
> gatsby develop

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.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! schwayweb@0.1.0 develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the schwayweb@0.1.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Austin/.npm/_logs/2020-10-21T17_47_27_007Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! schwayweb@0.1.0 start: `npm run develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the schwayweb@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Austin/.npm/_logs/2020-10-21T17_47_27_039Z-debug.log
➜  schwayweb git:(master) ✗ 
➜  schwayweb git:(master) ✗ gss
 M gatsby-config.js
 M package-lock.json
 M package.json
➜  schwayweb git:(master) ✗ git diff
➜  schwayweb git:(master) ✗ 
➜  schwayweb git:(master) ✗ gss
 M gatsby-config.js
 M package-lock.json
 M package.json
➜  schwayweb git:(master) ✗ npm run clean

> schwayweb@0.1.0 clean /Users/Austin/Projects/schwayweb
> 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.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! schwayweb@0.1.0 clean: `gatsby clean`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the schwayweb@0.1.0 clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Environment

> schwayweb@0.1.0 info /Users/Austin/Projects/schwayweb
> gatsby info --clipboard

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.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! schwayweb@0.1.0 info: `gatsby info --clipboard`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the schwayweb@0.1.0 info script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Austin/.npm/_logs/2020-10-21T18_11_00_179Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/Austin/.nvm/versions/node/v12.19.0/bin/node',
1 verbose cli   '/Users/Austin/.nvm/versions/node/v12.19.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'info'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.19.0
4 verbose run-script [ 'preinfo', 'info', 'postinfo' ]
5 info lifecycle schwayweb@0.1.0~preinfo: schwayweb@0.1.0
6 info lifecycle schwayweb@0.1.0~info: schwayweb@0.1.0
7 verbose lifecycle schwayweb@0.1.0~info: unsafe-perm in lifecycle true
8 verbose lifecycle schwayweb@0.1.0~info: PATH: /Users/Austin/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/Austin/Projects/schwayweb/node_modules/.bin:/Users/Austin/.nvm/versions/node/v12.19.0/bin:/Users/Austin/google-cloud-sdk/bin:/Users/Austin/.cargo/bin:/Users/Austin/.rbenv/shims:/Users/Austin/.rbenv/bin:/Users/austin/.composer/vendor/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin:/Users/Austin/.rvm/bin
9 verbose lifecycle schwayweb@0.1.0~info: CWD: /Users/Austin/Projects/schwayweb
10 silly lifecycle schwayweb@0.1.0~info: Args: [ '-c', 'gatsby info --clipboard' ]
11 silly lifecycle schwayweb@0.1.0~info: Returned: code: 1  signal: null
12 info lifecycle schwayweb@0.1.0~info: Failed to exec info script
13 verbose stack Error: schwayweb@0.1.0 info: `gatsby info --clipboard`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/Austin/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/Austin/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid schwayweb@0.1.0
15 verbose cwd /Users/Austin/Projects/schwayweb
16 verbose Darwin 19.6.0
17 verbose argv "/Users/Austin/.nvm/versions/node/v12.19.0/bin/node" "/Users/Austin/.nvm/versions/node/v12.19.0/bin/npm" "run" "info"
18 verbose node v12.19.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error schwayweb@0.1.0 info: `gatsby info --clipboard`
22 error Exit status 1
23 error Failed at the schwayweb@0.1.0 info script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

npm version: 6.14.8 node version: 12.19.0 gatsby version: 2.24.84

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 15
  • Comments: 23 (12 by maintainers)

Commits related to this issue

Most upvoted comments

Updates ( https://github.com/gatsbyjs/gatsby/pull/27057 and https://github.com/gatsbyjs/gatsby/pull/27058) were released:

  • gatsby-cli@2.12.113
  • gatsby-recipes@0.2.34
  • gatsby@2.24.87 ( this part You’d need to update ).

If you used gatsby@ink-compiled - you should be able to use stable / latest now again (starting with gatsby@2.24.87)

@wardpeet A way to reproduce

OS: macos catalina 10.15.7 Node: v14.8.0 NPM: 6.14.8

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
cd gatsby-site

update versions in package.json

 gatsby     ^2.24.79  →  ^2.24.85   
 react      ^16.12.0  →   ^17.0.1   
 react-dom  ^16.12.0  →   ^17.0.1  

remove package-lock.json and node_modules

rm -rf package-lock.json node_modules

clean install

npm i && npm run start

the 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.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

I found a quick workaround using yarn:

  1. Delete package-lock.json and the node_modules folder.
  2. Run npx yarn.
  3. Run npx synp --source-file /path/to/yarn.lock to convert the yarn.lock file back into package-lock.json.

Now you can keep using npm to manage your dependencies.

Hey ! I encountered the same problem.

Deleting the node_modules folder, package-lock.json and redoing the install with yarn install made it work.

I had the problem on 2 projects, that fixed it for both of them.

We do plan to merge it soonish, but we also did similar attempt once before and it broke things for a lot of users, so we are taking more precautions this time around and much more manual testing

I prefer using NPM, should I wait for a stable Gatsby update that integrates without issues?

Guys, you DON’T need yarn install, just yarn 😉 It’ll do install work by itself.

With all my current setup just like it is, in my project, I ran npm i gatsby-cli@ink-compiled and once it installed, I ran, gatsby develop. If I have done it right, the problem sadly still exists. The version that got installed: "gatsby-cli": "^2.12.112-ink-compiled.24"

Don’t install gatsby-cli in the project - only gatsby@ink-compiled - so the package.json should look something like (of course you will have different other things, but relevant parts here are react(-dom) and gatsby: Screenshot 2020-10-23 at 14 35 57

—edit Explanation for above - gatsby-cli is dependency of gatsby so it will still install non-canary gatsby-cli in your node_modules if you use non-canary gatsby

I can confirm that gatsby@2.24.86-ink-compiled.12 works with react@17.0.1 when installing through npm

I have the same error, however, when I push the same code to Netlify, it works and builds fine.

I have the same error and it works only when used yarn.