gatsby: Error: Cannot find module 'react' - after installing Plugin

Description

When i followed the documentation i get an error. as @marcysutton suggested in https://github.com/gatsbyjs/gatsby/pull/17318#discussion_r330466492 i file a new issue about this.

Steps to reproduce

i followed the receipt (in draft) in https://github.com/gatsbyjs/gatsby/pull/17318

steps i have done:

npm install -g gatsby-cli
gatsby new gatsby-site-contentful2
cd gatsby-site-contentful2/
gatsby develop
gatsby build
gatsby serve
# in this case leave off the contentful cli commands
npm install --save gatsby-source-contentful
nano gatsby-config.js  # add tokens
gatsby develop         # error
npm install
gatsby develop

Expected result

no error - i should be able to run gatsby develop

Actual result

here is got the error:

 ERROR                                                                                                                                                                                                   
                                                                                                                                                                                                         
There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"? Cannot find module 'react'                                                    
                                                                                                                                                                                                         
                                                                                                                                                                                                         
                                                                                                                                                                                                         
  Error: Cannot find module 'react'                                                                                                                                                                      
                                                                                                                                                                                                         
  - loader.js:582 Function.Module._resolveFilename                                                                                                                                                       
    internal/modules/cjs/loader.js:582:15                                                                                                                                                                
                                                                                                                                                                                                         
  - loader.js:508 Function.Module._load                                                                                                                                                                  
    internal/modules/cjs/loader.js:508:25 

	[...]

i could solved it with npm install - should we add it in this receipt to avoid confusing error messages?

(after the install of the starter in Prerequisites i was able to run gatsby develop without error - we should add if after the step which requires a new npm install)

Workaround

runnning npm install

the npm install gives me this output and i see there are new packages installed and changed:

npm install
                                                                                                                                                                                                                                                                                                     
> gatsby@2.15.28 postinstall /Users/muescha/Work/gatsby/gatsby-site-contentful2/node_modules/gatsby                                                                                                                                                                                                  
> node scripts/postinstall.js                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                     
npm WARN eslint-config-react-app@4.0.1 requires a peer of eslint-plugin-flowtype@2.x but none is installed. You must install peer dependencies yourself.                                                                                                                                             
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.                                  
                                                                                                                                                                                                                                                                                                     
added 5 packages from 2 contributors, removed 5 packages, updated 13 packages and audited 28684 packages in 17.208s                                                                                                                                                                                  
found 0 vulnerabilities

Environment

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 77.0.3865.90
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.15.28 => 2.15.28 
    gatsby-image: ^2.2.23 => 2.2.23 
    gatsby-plugin-manifest: ^2.2.20 => 2.2.20 
    gatsby-plugin-offline: ^3.0.11 => 3.0.11 
    gatsby-plugin-react-helmet: ^3.1.10 => 3.1.10 
    gatsby-plugin-sharp: ^2.2.27 => 2.2.27 
    gatsby-source-contentful: ^2.1.44 => 2.1.44 
    gatsby-source-filesystem: ^2.1.28 => 2.1.28 
    gatsby-transformer-sharp: ^2.2.19 => 2.2.19 
  npmGlobalPackages:
    gatsby-cli: 2.7.53

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 37 (14 by maintainers)

Links to this issue

Commits related to this issue

updating the install dependency instructions npm install with yarn creates this issues: https://github.com/gatsbyjs/gatsby/issues/18048 using `yarn add` allows for an error free set up. — committed to ahujamoh/gatsby by ahujamoh 4 years ago

Most upvoted comments

This occurred for me when I added gatsby-plugin-sass via npm. The following steps helped fix the issue:

rm -Rf node_modules package-lock.json
yarn install

Seemed to bring it back to life. The docs mention npm everywhere (Dec 2019), but I’m guessing we need to use yarn for plugin installation.

+118

richardhealy on Dec 6, 2019

This is still an issue.

Fresh install of Gatsby Default Starter, then npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Produces the same errors as described above.

yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components does not produce the error.

+12

ghost on Jan 22, 2020

This is a massive productivity killer. I’ve spent the last hour trying to bring my STARTER to life, just to add styled components! Docs need to reflect this IMO.

+10

hcgaron on Mar 4, 2020

But now the users have this problem.

I think we should add a note to the docs (maybe as hint) so that new users don’t get confused and not have a bad onboarding experience.

If this is fixed by npm we can remove this hint later.

muescha on Nov 4, 2019

I would just like say that while it’s an issue with npm, it is still a potential roadblock for new users.

Consider this flow:

❯ gatsby new
✔ What is your project called? … my-very-first-gatsby
✔ What starter would you like to use? › gatsby-starter-hello-world
...
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd my-very-first-gatsby
  gatsby develop

❯ cd my-very-first-gatsby
❯ gatsby develop

# (...Great! Works! let's add some images)

❯ npm install gatsby-image
❯ gatsby develop

**ERROR ERROR**

There was a problem loading the local develop command.
Gatsby may not be installed.
Perhaps you need to run "npm install"? Cannot find module 'react'

**Error: Cannot find module 'react'**

#(hmm...ok let's do what it says, run `npm install`)

❯ npm install
...
❯ gatsby develop

**Error: 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
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

# wtf
#?!?#!

That’s a terrible experience.

skube on Jul 9, 2020

I also had the same issue, probably after installing the plugin gatsby-plugin-sass.

My workaround was this:

npm install npm audit fix npm run develop

Cheers!

xansibar on May 8, 2020

This occurred for me when I added gatsby-plugin-sass via npm. The following steps helped fix the issue:

rm -Rf node_modules package-lock.json

yarn install

Seemed to bring it back to life. The docs mention npm everywhere (Dec 2019), but I’m guessing we need to use yarn for plugin installation.

This worked for me. Thanks! I guess the onboarding/tutorial document needs to be updated to support both npm and yarn.

zedrickvillas on Feb 14, 2020

just pointing it out, to provide some more context.

jonniebigodes on Oct 2, 2019

Just tested it and the error pops up. But it does not pop up when using yarn.

jonniebigodes on Oct 2, 2019

I’m having the problem even if I use yarn. Created new hello-world project, deleted node_modules and package-lock.json, ran yarn install and then yarn add with these packages:

gatsby-plugin-sass
gatsby-plugin-root-import
gatsby-plugin-react-helmet
gatsby-plugin-web-font-loader
gatsby-plugin-google-tagmanager

Now I’m getting around by copying another project’s files (without node_modules folder), installing the dependencies and modifying it. Problem seems to be when a package is added, not in the installation step.

bruno-vaz on Nov 14, 2019

but docs all in npm 😕

muescha on Oct 2, 2019

I will fix it - npm install core-js@3

KVexcavator on Feb 9, 2020