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

> [email protected] start /Users/Austin/Projects/schwayweb
> npm run develop


> [email protected] 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! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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! [email protected] start: `npm run develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

> [email protected] 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! [email protected] clean: `gatsby clean`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

> [email protected] 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! [email protected] info: `gatsby info --clipboard`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'preinfo', 'info', 'postinfo' ]
5 info lifecycle [email protected]~preinfo: [email protected]
6 info lifecycle [email protected]~info: [email protected]
7 verbose lifecycle [email protected]~info: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~info: CWD: /Users/Austin/Projects/schwayweb
10 silly lifecycle [email protected]~info: Args: [ '-c', 'gatsby info --clipboard' ]
11 silly lifecycle [email protected]~info: Returned: code: 1  signal: null
12 info lifecycle [email protected]~info: Failed to exec info script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] info: `gatsby info --clipboard`
22 error Exit status 1
23 error Failed at the [email protected] 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

[tusnolobov]

@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

```shell
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_
```shell
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 [email protected] works with[email protected] 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 ( https://github.com/gatsbyjs/gatsby/pull/27057 and https://github.com/gatsbyjs/gatsby/pull/27058) were released:

• [email protected]
• [email protected]
• [email protected] ( 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 [email protected])

[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 "[email protected]"
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#[email protected]"
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.