Installing Gatsby plugins breaks entire app

Question

Whenever I install any gatsby plugins or typography files, and then attempt to run gatsby develop, I am thrown an error sying that 'react' can't be found. Example:

I create a new gatsby site using gatsby new example-site https://github.com/gatsbyjs/gatsby-starter-hello-world

I install the gatsby-plugin-sass using npm install --save node-sass gatsby-plugin-sass

I follow the instructions on the plugin page, adding the plugin to my gatsby-config.js file.

When I now attempt to run gatsby develop I receive the following errors:

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'

As well as a list of files that the errors are being thrown in, most of them in internal files.

Clearly I have the Gatsby-cli installed, as well as react. I'm also receiving a ton of warnings about deprecated related to core-js and optional dependencies not being installed.

In my research, I have found people saying that using yarn instead of npm solves the issue, but with Gatsby being as large of a project as it is, and with the documentation itself saying to use npm, that doesn't seem like a solution but rather a work around. Is there any other info on this that I just can't seem to find?

What happens when you run npm install in your project directory? Any errors there? (also note that gatsby-cli is not the same as the gatsby dependency. You need the second to run a Gatsby project) — Robin Métral
When running npm install, I don't receive any outright errors, just several warnings about files not being removed because they weren't installed by other node-modules, and then warnings about skipping optional dependencies. Also, when running gatsby -v I am shown both a cli version and a gatsby version as well. Thanks for the clarification. — Josh Bangle

Robin Métral Robin Métral · Accepted Answer · 2020-01-28T07:40:55

I reprodued your error, and after looking around I found several issues on the Gatsby GitHub repo with the same behavior.

It seems that this is a problem with npm itself, which is why the community is increasingly switching to yarn.

If you'd like to stick with npm, the solution is to clear your node_modules and package-lock.json, then reinstall your dependencies (source):

rm -rf node_modules/ package-lock.json
npm install

Installing Gatsby plugins breaks entire app

1 Answers