Gatsby: Adding WPGraphQL produces Error: Cannot find module 'react'

[Dave-Lindberg]

Description

When adding WPGraphQL to a working basic Gatsby install, gatsby develop produces Error: Cannot find module 'react'

Steps to reproduce

1. Create new gatsby site gatsby new test-wpgraphql and cd to that directory.
2. Run gatsby develop and confirm the site is built properly at http://localhost:8000/
3. Install WPGraphQL (npm install --save gatsby-source-graphql)
4. Update gatsby-config.json with the following:
   { resolve: 'gatsby-source-graphql', options: { typeName: 'WPGraphQL', fieldName: 'wpgraphql', url: 'https://gatsbywpsource.local/graphql', //url: 'https://www.wpgraphql.com/graphql', refetchInterval: 60 }, },
5. Run gatsby develop

Expected result

Instead of a live Gatsby site with GraphQL integration to the WordPress source, the console throws the following error:

Actual result

Error: Cannot find module 'react'
Require stack:

• /Users/dlindberg/Code/test-wpgraphql/node_modules/ink/build/instance .js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/ink/build/render.j s
• /Users/dlindberg/Code/test-wpgraphql/node_modules/ink/build/index.js - /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/node_module s/gatsby-cli/lib/reporter/loggers/ink/index.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/node_module s/gatsby-cli/lib/reporter/index.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/schema /types/type-defs.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/redux/ reducers/inference-metadata.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/redux/ reducers/index.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/redux/ index.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/utils/ gatsby-dependents.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/utils/ webpack.config.js
• /Users/dlindberg/Code/test-wpgraphql/node_modules/gatsby/dist/comman ds/develop.js
• /usr/local/lib/node_modules/gatsby-cli/lib/create-cli.js
• /usr/local/lib/node_modules/gatsby-cli/lib/index.js

Environment

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 80.0.3987.163
Safari: 13.1
npmPackages:
gatsby: ^2.20.12 => 2.20.12
gatsby-image: ^2.3.1 => 2.3.1
gatsby-plugin-manifest: ^2.3.3 => 2.3.3
gatsby-plugin-offline: ^3.1.2 => 3.1.2
gatsby-plugin-react-helmet: ^3.2.1 => 3.2.1
gatsby-plugin-sharp: ^2.5.3 => 2.5.3
gatsby-source-filesystem: ^2.2.2 => 2.2.2
gatsby-source-graphql: ^2.4.0 => 2.4.0
gatsby-transformer-sharp: ^2.4.3 => 2.4.3
npmGlobalPackages:
gatsby-cli: 2.11.8

[freiksenet]

Thank you for reporting this issue!

This is usually caused by having two different version of React inside your node_modules. It could have been caused by Gatsby version update requiring newer version of React. One way to fix it is to reinstalling React so that the version of React matches alongside the project.

[Dave-Lindberg]

Thanks for the feedback.

When I first create a new site, my node_modules directory contains React (just one version), and the package.json calls for "react": "^16.12.0", as a dependency.

After installing WPGraphQL, react is no longer in my node_modules directory:

The React dependency in package.json is unchanged.

[wardpeet]

@Dave-Lindberg this doesn't fix the bug completely bug could you try installing with yarn?

First, remove your node_modules and try to run yarn, please let us know if this fixed your issue. If so then I know what the issue is and how we can solve it.

Thanks a ton!

[Dave-Lindberg]

@wardpeet Thank you, installing with yarn fixed the issue! Gatsby develop now runs properly. :-)

[wardpeet]

ok thanks! We'll look into this problem.

[github-actions[bot]]

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[bot]]

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! 💪💜