Gatsby: Install react and react-dom globally? When installing the cli.

Created on 14 Oct 2019  路  15Comments  路  Source: gatsbyjs/gatsby

When I clean install the cli I get this weird prompts on the absence of react and react-dom.
When I add them globally it works. Are they set as peer dependencies?

Is this normal? Or am I missing something...

npm install -g gatsby-cli
/usr/local/bin/gatsby -> /usr/local/lib/node_modules/gatsby-cli/lib/index.js

> [email protected] postinstall /usr/local/lib/node_modules/gatsby-cli/node_modules/core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry
> node src/postinstall.js


> [email protected] postinstall /usr/local/lib/node_modules/gatsby-cli
> node scripts/postinstall.js

+ [email protected]
added 350 packages from 181 contributors in 22.172s


gatsby new myPersonalBlog
/usr/local/lib/node_modules/gatsby-cli/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Cannot find module 'react-dom'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/gatsby-cli/node_modules/react-redux/lib/utils/reactBatchedUpdates.js:6:17)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

npm install -g react-dom
npm WARN [email protected] requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 7 packages from 3 contributors in 1.537s

gatsby new myPersonalBlog
\/usr/local/lib/node_modules/gatsby-cli/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: Cannot find module 'react'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at /usr/local/lib/node_modules/react-dom/cjs/react-dom.development.js:18:13
    at Object.<anonymous> (/usr/local/lib/node_modules/react-dom/cjs/react-dom.development.js:27925:5)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

npm install -g react
+ [email protected]
added 6 packages from 3 contributors in 0.862s

gatsby new myPersonalBlog
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into 'myPersonalBlog'...
confirmed bug

Most helpful comment

Published in [email protected]

All 15 comments

I ran into the same issue, also resolved with installing globally

We are also seeing this issue - rolling back to 2.7.58 seems to have fixed the issue.

Without these installed globally none of the CLI commands work and you see an error saying react-dom is missing.

Also seeing this issue and had to downgrade

Having exact same error as well.

Opening PR with fix soon. Thanks for report!

Can you try installing gatsby-cli@cli-react-dom and let me know if that fixes it for you? I did reproduce the issue and seems like my fix in https://github.com/gatsbyjs/gatsby/pull/18607 work for me, just want to check with you too

This seems like a bug in react-redux. We should also file an issue there (in addition to unblocking ourselves).

Yeah - react-redux imports react-dom in https://unpkg.com/browse/[email protected]/lib/utils/reactBatchedUpdates.js , but react-dom is not dep or peerDep of react-redux ( https://unpkg.com/browse/[email protected]/package.json ). I will open issue there once we hot fix it in our side

Can you try installing gatsby-cli@cli-react-dom and let me know if that fixes it for you? I did reproduce the issue and seems like my fix in #18607 work for me, just want to check with you too

worked for me..

Same issue lie for me while installing react and react dom global it is resolved

npm install -g react
npm install -g react-dom

Can you try installing gatsby-cli@cli-react-dom and let me know if that fixes it for you? I did reproduce the issue and seems like my fix in #18607 work for me, just want to check with you too

Works :smile:

We are getting some failing tests on PR with fix (which is what I used for gatsby-cli@cli-react-dom version), so I'll hold off with merging and releasing it in stable channel until I investigate those

Published in [email protected]

Yeah, the reasoning for this is:

  • React-Redux v7 relies on importing unstable_batchedUpdates
  • But, that is a renderer-specific function, so it has to come from ReactDOM or React Native, not the core React package
  • We specify ReactDOM in our imports, but have a fallback file that Reat Native's bundler will pull in instead that imports from React Native
  • If we specified either of those as direct dependencies, that'd screw up everybody
  • If we specified either directly as peer dependencies, that'd also cause warnings for everybody
  • Technically, it's also possible to use React-Redux without either, _if_ you import from our react-redux/alternate-renderers entry point

So, since the standard use case is that folks will have ReactDOM or React Native loaded already, we don't actually specify a dependency or peer dependency on either.

It sounds like there may be some new kind of "optional peer dependencies" metadata that NPM and Yarn are starting to support, so we might end up declaring those.

Thanks for your response here! I lacked context around decision to not include either react-dom nor react-native and definitely we are just limited about what we can currently declare in package.json.

Was this page helpful?
0 / 5 - 0 ratings