gatsby-cli has react in package.json dependencies

[MunifTanjim]

Description

gatsby-cli's package.json has react in dependencies. It makes all kind of unwanted behavior in monorepo setups. For example:

If you have react installed in the parent directory (./) and gatsby site installed by gatsby new command on a child directory (./site) directory, it creates a nasty bug. If you use hooks in your application, this error pops up:

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

And it is specifically caused by the point number 1 described in the error message. If you remove the parent directory's node_modules (i.e. ./node_modules) everything works fine.

Steps to reproduce

1. mkdir parent && cd parent && npm init
2. npm install --save-dev react react-dom
3. npx gatsby new site
4. This will install react in ./site/node_modules (which it should not).

Expected result

react should not be installed automatically..

Actual result

react is installed because gatsby-cli has dependencies with react.

[sidharthachatterjee]

This makes sense. Want to open a PR removing it?

[MunifTanjim]

Done!

[thchia]

@MunifTanjim how did you resolve this given that the PR was not accepted in the end? I am facing a similar issue. I do understand that for the vast majority of use cases, bundling react with gatsby-cli is more convenient and in keeping with a zero-config setup. However in my monorepo it's causing the issue you mentioned.

Furthermore, I can't remove react from the parent node_modules because other siblings of site require it for development, therefore it has to remain in the parent dependencies.

Edit: The only tangible solution I can think of for this if it was moved to the peerDependencies is to update pretty much all documentation on installing gatsby-cli to include installing react :/

[MunifTanjim]

@thchia I end up using Yarn workspaces with lerna. So, I only have a single node_modules for the entire monorepo. Yarn hoists all the dependencies for all the workspaces to the root node_modules. So, I only ever have a single react & react-dom. That solves the problem.

In case you want to see the monorepo yourself: https://github.com/MunifTanjim/draft-js-hooks. Gatsby is used inside the ./site workspace and the other workspaces are inside ./packages/*. For building the gatsby site on CI/CD, I don't run yarn on the root directory. Instead I do:

cd site
npm install                # install dependencies for site only
./scripts/netlify-build.sh # install peerDependencies (react & react-dom) for site and build

So, I don't have to install all the dependencies for the entire monorepo just for building the site on CI/CD.

[wodenx]

@MunifTanjim Do you not have issues when gatsby-cli updates the version of react and react-dom on which it depends? For us (using lerna +npm, not yarn), this results in a different version of react being installed at root and for gatsby-cli unless we update the corresponding version defined at repo root.

[MunifTanjim]

@wodenx Yes. I had to switch to lerna+yarn.

[apolopena]

I have the same issue.
So this will not be fixed and must be worked around using yarn as recommended on reactjs.org?

[timhaywood]

I was experiencing a similar issue, with the multiple versions of react causing gatsby the fail to build. It was working on my mac just not on windows, and running npm ls react on macOS showed that react for gatsby-cli had been deduped.

Running

npm dedupe

on the windows machine succesfully deduped the gatsby-cli instance of react and solved the error. Hopefully this might help!

[alex-nicaise]

I was experiencing a similar issue, with the multiple versions of react causing gatsby the fail to build. It was working on my mac just not on windows, and running npm ls react on macOS showed that react for gatsby-cli had been deduped.

Running

npm dedupe

on the windows machine succesfully deduped the gatsby-cli instance of react and solved the error. Hopefully this might help!

This helped me! Using npm + gatsby on Windows