React 17 gatsby won't start

[theskillwithin]

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

[wardpeet]

Hi @theskillwithin!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[RebootGG]

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.

[pantaley]

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

[mikeyfe6]

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

[AleC77]

I have the same error using NPM

[ivan512t]

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

[hrishikesh-k]

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

[wardpeet]

Sorry, seems to be an issue with npm and dependency management. Please try yarn in the mean time

[pieh]

Can you try using gatsby@ink-compiled with npm and see if that fixes those errors? And if they don't introduce other problems?

[hrishikesh-k]

Can you try using gatsby@ink-compiled with npm and see if that fixes those errors? And if they don't introduce other problems?

Is that to be installed as global or a dev module, or does it not matter?

[pieh]

Is that to be installed as global or a dev module, or does it not matter?

In your project (so not the global one), because those errors are very likely caused by the way npm installs react in your project (and not the global one). But trying out gatsby-cli@ink-compiled as global is welcome too (tho it shouldn't matter)

[hrishikesh-k]

@pieh This is what I did:

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"

[tomdewildt]

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.

[taikn]

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

[pieh]

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:

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

[hrishikesh-k]

@pieh Thank you. That works great.

Another question though, do we need to keep using this ink-compiled version now, or it would be safe to revert to the normal version after a few days?

[pieh]

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

[Defite]

Guys, you DON'T need yarn install, just yarn ;) It'll do install work by itself.

[pieh]

Updates ( #27057 and #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)

[labnol]

Thanks. The issue is now resolved!

[mikeyfe6]

Why is this issue closed, it's still not working with NPM... or did I missed the whole fix?

[axe312ger]

@mikeyfe6 either one of your dependencies or your lock file forces probably create issues.

Regenerate your lock file and/or update your dependencies. That should help.

React v17 does not work for me as well, I get: react-hot-loader.development.js:2446 Uncaught Error: React-Hot-Loader: AppContainer should be patched

I suspect this to be because of gatsby-plugin-loadable-components-ssr as it still requires react 16:

$ yarn why react-dom
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "react-dom"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "react-dom@17.0.1"
info Has been hoisted to "react-dom"
info Reasons this module exists
   - "workspace-aggregator-1629d5a8-1ae2-4497-9572-583abcfd9d88" depends on it
   - ...
info Disk size without dependencies: "2.93MB"
info Disk size with unique dependencies: "3.19MB"
info Disk size with transitive dependencies: "3.22MB"
info Number of shared dependencies: 4
=> Found "gatsby-plugin-loadable-components-ssr#react-dom@16.13.1"
info This module exists because "_project_#...#gatsby-plugin-loadable-components-ssr" depends on it.
info Disk size without dependencies: "2.96MB"
info Disk size with unique dependencies: "3.36MB"
info Disk size with transitive dependencies: "3.44MB"
info Number of shared dependencies: 6
✨  Done in 1.07s.

[emt-mocha]

I use NPM to install all my package.

I follow the steps at below:

npm install -g npm-check-updates
ncu - u // to update all the package to latest version
npm install // install the package

//during the npm package installations u will notice many warnings. Just ignore it.

// once the package update done, you need to delete the node_modules folder again from your root directory. DO NOT DELETE "package-lock.json" !!!!

// final steps_

npm ci // once package updates completes, use the normal gatsby commands to start your development server.

// in future if you use ncu -u again then you need to follow the entire steps.
// HOPE THIS HELPS :)