When I install gatsby-transformer-remark it breaks the development environment for that site. Tried this 3 times from a fresh install using npm.
1 - Install new gatsby site.
2 - Install gatsby-transformer-remark
Initial 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:636 Function.Module._resolveFilename
internal/modules/cjs/loader.js:636:15
- loader.js:562 Function.Module._load
internal/modules/cjs/loader.js:562:25
- loader.js:690 Module.require
internal/modules/cjs/loader.js:690:17
- v8-compile-cache.js:159 require
[myNewBlog]/[v8-compile-cache]/v8-compile-cache.js:159:20
- instance.js:8 Object.<anonymous>
[myNewBlog]/[ink]/build/instance.js:8:37
- v8-compile-cache.js:178 Module._compile
[myNewBlog]/[v8-compile-cache]/v8-compile-cache.js:178:30
- loader.js:787 Object.Module._extensions..js
internal/modules/cjs/loader.js:787:10
- loader.js:653 Module.load
internal/modules/cjs/loader.js:653:32
- loader.js:593 tryModuleLoad
internal/modules/cjs/loader.js:593:12
- loader.js:585 Function.Module._load
internal/modules/cjs/loader.js:585:3
Tried reinstalling package via npm i
The above error occurred in the <StoreStateProvider> component:
in StoreStateProvider
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
ERROR
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
ERROR
UNHANDLED REJECTION 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.
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.
- react.development.js:1590 resolveDispatcher
[myNewBlog]/[gatsby]/[react]/cjs/react.development.js:1590:13
- react.development.js:1618 useState
[myNewBlog]/[gatsby]/[react]/cjs/react.development.js:1618:20
- context.js:17 StoreStateProvider
[myNewBlog]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41
- react-reconciler.development.js:5671 renderWithHooks
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:5671:18
- react-reconciler.development.js:7905 mountIndeterminateComponent
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:7905:13
- react-reconciler.development.js:9049 beginWork$1
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:9049:16
- react-reconciler.development.js:10317 Object.invokeGuardedCallbackImpl
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:10317:10
- react-reconciler.development.js:10501 invokeGuardedCallback
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:10501:31
- react-reconciler.development.js:14014 beginWork$$1
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:14014:7
- react-reconciler.development.js:13008 performUnitOfWork
[myNewBlog]/[react-reconciler]/cjs/react-reconciler.development.js:13008:12
System:
OS: macOS 10.15
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 77.0.3865.120
Firefox: 70.0
Safari: 13.0.2
npmPackages:
gatsby: ^2.17.4 => 2.17.4
gatsby-image: ^2.2.29 => 2.2.29
gatsby-plugin-manifest: ^2.2.23 => 2.2.23
gatsby-plugin-offline: ^3.0.16 => 3.0.16
gatsby-plugin-react-helmet: ^3.1.13 => 3.1.13
gatsby-plugin-sharp: ^2.2.32 => 2.2.32
gatsby-source-filesystem: ^2.1.33 => 2.1.33
gatsby-transformer-remark: ^2.6.30 => 2.6.30
gatsby-transformer-sharp: ^2.3.0 => 2.3.0
npmGlobalPackages:
gatsby-cli: 2.8.5
Looks like you need to install the react and react-dom npm packages
Strangely the 'gatsby info --clipboard' cmd doesn't list the full package.lock file.
Reinstalling react and react-dom doesn't fix this issue.
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <[email protected]>",
"dependencies": {
"gatsby": "^2.17.4",
"gatsby-image": "^2.2.29",
"gatsby-plugin-manifest": "^2.2.23",
"gatsby-plugin-offline": "^3.0.16",
"gatsby-plugin-react-helmet": "^3.1.13",
"gatsby-plugin-sharp": "^2.2.32",
"gatsby-source-filesystem": "^2.1.33",
"gatsby-transformer-remark": "^2.6.30",
"gatsby-transformer-sharp": "^2.3.0",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-helmet": "^5.2.1"
},
"devDependencies": {
"prettier": "^1.18.2"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
Yes, it started happening in one of my project too. It was working until I updated to the latest version of gatsby and plugins. I am still debugging to see what changed.
Dangabit!
It's happened again. I'm just trying to get started with Gatsby so don't know where to begin...
This time I started from the hello-world repo.
Error below as soon as I had installed and configured the first change to the gatsby-config.js.
node-sass gatsby-plugin-sass
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:636 Function.Module._resolveFilename
internal/modules/cjs/loader.js:636:15
- loader.js:562 Function.Module._load
internal/modules/cjs/loader.js:562:25
- loader.js:690 Module.require
internal/modules/cjs/loader.js:690:17
- v8-compile-cache.js:159 require
[gatsby-bootcamp]/[v8-compile-cache]/v8-compile-cache.js:159:20
- instance.js:8 Object.<anonymous>
[gatsby-bootcamp]/[ink]/build/instance.js:8:37
- v8-compile-cache.js:178 Module._compile
[gatsby-bootcamp]/[v8-compile-cache]/v8-compile-cache.js:178:30
- loader.js:787 Object.Module._extensions..js
internal/modules/cjs/loader.js:787:10
- loader.js:653 Module.load
internal/modules/cjs/loader.js:653:32
- loader.js:593 tryModuleLoad
internal/modules/cjs/loader.js:593:12
- loader.js:585 Function.Module._load
internal/modules/cjs/loader.js:585:3
Not sure if adding additional insights but a plugin with no errors surfacing upon installation gives me the same "not found" result and did you forget to install message. Also have gatsby-transformer-remark
. Deleting locks and node_modules then reinstalling doesn't help.
gatsby 2.1.0
gatsby-theme-legals 1.0.0
Ignore my last comment, the gatsby-theme-legals needs the full name to be resolved in gatsby-config.json. Will take up with package maintainer.
I upgraded to Catalina and from bash to zsh over the weekend so perhaps that is part of the problem.
Though I can see that on my original error it is using bash. It took more than one restart for the OS to upgrade to zsh...
I'm not sure if I should edit the question as the issue seems to happen when installing any plugins.
Here's the repo of the newer project.
https://github.com/CloudBop/gatsby-bootcamp
This is the error I get from npm run develop
> [email protected] develop /Users/******/Documents/Sites/gatsby-sites/clonetest/gatsby-bootcamp
> gatsby develop
The above error occurred in the <StoreStateProvider> component:
in StoreStateProvider
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
0 info it worked if it ends with ok
1 verbose cli [ '/Users/********/.nvm/versions/node/v10.16.0/bin/node',
1 verbose cli '/Users/********/.nvm/versions/node/v10.16.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'develop' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predevelop', 'develop', 'postdevelop' ]
5 info lifecycle [email protected]~predevelop: [email protected]
6 info lifecycle [email protected]~develop: [email protected]
7 verbose lifecycle [email protected]~develop: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~develop: PATH: /Users/********/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/********/Documents/Sites/gatsby-sites/clonetest/gatsby-bootcamp/node_modules/.bin:/Users/********/.nvm/versions/node/v10.16.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Library/Apple/bin:/Users/********/.nvm/versions/node/v10.16.0/bin:/Users/********/.rvm/bin:/Users/********/.rvm/bin
9 verbose lifecycle [email protected]~develop: CWD: /Users/********/Documents/Sites/gatsby-sites/clonetest/gatsby-bootcamp
10 silly lifecycle [email protected]~develop: Args: [ '-c', 'gatsby develop' ]
11 silly lifecycle [email protected]~develop: Returned: code: 1 signal: null
12 info lifecycle [email protected]~develop: Failed to exec develop script
13 verbose stack Error: [email protected] develop: `gatsby develop`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/Users/********/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess.<anonymous> (/Users/********/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/********/Documents/Sites/gatsby-sites/clonetest/gatsby-bootcamp
16 verbose Darwin 19.0.0
17 verbose argv "/Users/********/.nvm/versions/node/v10.16.0/bin/node" "/Users/********/.nvm/versions/node/v10.16.0/bin/npm" "run" "develop"
18 verbose node v10.16.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] develop: `gatsby develop`
22 error Exit status 1
23 error Failed at the [email protected] develop script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Hi, this is also happening to me when trying to install the gatsby-source-github-api
plugin, the command line displays the exact same errors, I'm using Windows 10:
Steps:
gatsby develop
here, everything works as it shouldgatsby develop
now, it shows the Error: Cannot find module 'react'
gatsby develop
now, this is the output: ERROR
The above error occurred in the <StoreStateProvider> component:
in StoreStateProvider
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
ERROR
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
ERROR
UNHANDLED REJECTION 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.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for o ne 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.
- react.development.js:1590 resolveDispatcher
[myProject]/[gatsby]/[react]/cjs/react.development.js:1590:13
- react.development.js:1618 useState
[myProject]/[gatsby]/[react]/cjs/react.development.js:1618:20
- context.js:17 StoreStateProvider
[myProject]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41
- react-reconciler.development.js:5671 renderWithHooks
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:5671:18
- react-reconciler.development.js:7905 mountIndeterminateComponent
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:7905:13
- react-reconciler.development.js:9049 beginWork$1
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:9049:16
- react-reconciler.development.js:10317 Object.invokeGuardedCallbackImpl
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:10317:10
- react-reconciler.development.js:10501 invokeGuardedCallback
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:10501:31
- react-reconciler.development.js:14014 beginWork$$1
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:14014:7
- react-reconciler.development.js:13008 performUnitOfWork
[myProject]/[react-reconciler]/cjs/react-reconciler.development.js:13008:12
Don't know what could be happening with plugins maybe? I don't really know
After a little bit of investigation, I found that the problem started occurring at [email protected]. #18752 seems to have introduced the issue. But I will need to investigate a little more to know exactly what's going on.
For now I have downgraded to v2.16.3 and it's working again.
I had the same issue a couple of times. Do not get it how it comes but it seems that it is related to some issues in the node_packages.
I managed to fix it by doing
rm -rf node_packages
npm install
Had this problem today, required delete of package-lock.json
and also the commands below:
rm -rf node_modules
npm install
I also had this issue earlier and was able to fix it by deleting my node_modules and re-running npm install.
This issue may happen if you mix npm
and yarn
- if initial dependencies were installed with yarn and after that you use npm - it will leave node_modules in broken state. That's why removing node_modules and reinstalling it work
+1, and I have a super clean reproduction: I had downloaded an old version of a starter project, and tried updating to a newer version. Nothing fancy, didn't mistakenly use Yarn, and I'm using Linux.
Occurred for me after upgrading a few gatsby dependencies. Deleting node_modules
&& yarn.lock
helped
It seems to be when updating gatsby-plugin-sharp
.
dependa-bot tried to update it on my repo, and it starts to fail https://github.com/astroregulus/dicionario-astrologico/pull/12
Extending on what my colleague said:
The issue could also be an outdated Node version, I'd try upgrading to Node 12, clear your npm cache and re-install again. Furthermore from personal experience npm is sometimes really flaky in installing dependencies and leaves node_modules in a broken state. I personally have much better experiences with yarn than with npm in that regard.
I can't reproduce the problem with the given reproduction steps here so this is a system environment issue.
We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!
Sorry, I know this has been closed...
But I still get the same issue. I have had to erase and reinstall my OS this week for unrelated issues so my Catalina OS is completely fresh.
I am using NVM so have the latest Node version running.
I haven't mixed NPM or Yarn. Just tried with NPM.
Still get this issue. Will try rolling back like what The Future 2092 suggests.
Update: I didn't roll back to an older version. I just switched to using yarn. Now it seems to compile without any errors, very strange.
Apologies in advance for the noob rant, but one of the tough things is straddling the npm/yarn divide. There is so much info out there. Yarn seems buttery smooth and trouble free until something like this comes along. Is there any golden rule one should be using as a non-expert?
For example, the advice on this problem recommends reinstalling using npm. Then that requires sticking with npm for the foreseeable future?
@weisisheng
From my experience, both tend to mess up node_modules an their own lock files every once and a while. NPM does this more often.
What in most cases helped, no matter if GatsbyJS related or not:
Delete lock file, delete node_modules, install again. No matter if using npm or yarn.
@axe312ger
Thanks for your valuable time and insights.
"For example, the advice on this problem recommends reinstalling using npm. Then that requires sticking with npm for the foreseeable future?"
NPM never worked for me in this scenario, I'm pretty sure the future hits nail on head as it looks like it gets confused between a Redux Store/Provider and the new Context Hook. I wonder if there are multiple issues with same outcome.
Yarn is very similar to NPM but I think it is more reliable regarding semver and dependencies. Which perhaps makes it more versatile for deployment strategy. Though I may well be wrong and this isn't what this thread is about. I am joining the communities LekoArts mentioned and suggest everyone else does as well.
I just deleted node_modules and package.lock. Then reinstall with Yarn.
FWIW I have found NPM more reliable than Yarn for certain projects in the past. But worth remembering personal cognitive bias is very strong...
It seems to be when updating
gatsby-plugin-sharp
.
dependa-bot tried to update it on my repo, and it starts to fail astroregulus/dicionario-astrologico#12
I'm using netlify, and it fails to build it. I don't have control over the process there. Is there any suggestion?
Fixed on netlify running the option to build clearing the cache.
Switching to yarn wasn't an option for me. Updating react
and react-dom
to 16.11.0
fixed this.
This is what fixed it for me: update gatsby and react to the latest version
npm install gatsby@latest react@latest react-dom@latest
Remove node_modules and package.json
rm -rf node_modules
rm package.json
Install everything from scratch
npm install
@frankdilo - by "removing package.json" you meant "removing package-lock.json", didn't you?
I was having the same issue, my case was because of I was mixing yarn and npm. I re-installed everything and it is ok.
Here to say that after upgrading to [email protected]
my app crashed because it wasn't able to find gatsby and react files under node_modules
. So the solution, as it was said above, was to remove package-lock.json
and run npm install
.
The same Error has just occurred to me when running the script: npm run develop
to restart my local gatsby dev server, the solution is still the same: just remove the package-lock.json
and node_modules
folder and then run the command: npm i
That should be it.
I think I am having the same issue. Tried on multiple systems.
gatsby develop
ERROR
The above error occurred in the
in StoreStateProvider
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
ERROR
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
ERROR
UNHANDLED REJECTION 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:
gatsby info
System:
OS: macOS 10.15.1
CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.21.0 - /usr/local/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 78.0.3904.108
Safari: 13.0.3
npmPackages:
gatsby: ^2.0.7 => 2.18.6
gatsby-cli: ^2.7.8 => 2.8.15
gatsby-image: ^2.0.8 => 2.2.34
gatsby-plugin-favicon: ^3.1.4 => 3.1.6
gatsby-plugin-google-analytics: ^2.0.6 => 2.1.29
gatsby-plugin-offline: ^2.0.5 => 2.2.10
gatsby-plugin-react-helmet: ^3.0.0 => 3.1.16
gatsby-plugin-segment-js: ^2.0.1 => 2.1.2
gatsby-plugin-sharp: ^2.0.5 => 2.3.5
gatsby-plugin-styled-components: ^3.0.0 => 3.1.14
gatsby-plugin-typography: ^2.2.0 => 2.3.18
gatsby-source-contentful: ^2.0.1 => 2.1.66
gatsby-source-filesystem: ^2.0.1 => 2.1.40
gatsby-transformer-remark: ^2.1.3 => 2.6.39
gatsby-transformer-sharp: ^2.1.1 => 2.3.6
npmGlobalPackages:
gatsby-cli: 2.8.15
Your problem seems related to this: https://github.com/gatsbyjs/gatsby/issues/19827
Worked for me
I had the same issue as people before so i just removed the package.json.lock file, performed npm install, and then gatsby develop and now i can access the site again
gee willickers, this frightened me! I also had to use npm 11, delete package-lock, rm -rf node-modules
and then npm i
. Works now for me though. 👍
This is what fixed it for me: update gatsby and react to the latest version
npm install gatsby@latest react@latest react-dom@latest
Remove node_modules and package.json
rm -rf node_modules rm package.json
Install everything from scratch
npm install
Works here! thanks
Had this problem today, required delete of
package-lock.json
and also the commands below:rm -rf node_modules npm install
Save my day! Thanks!
just fighting it for last 6 hours, and my finding is use yarn right from the binging for package installation. only #yarn is real.
Hi guys i have the same problem a lot.
i'm installed the react-carousel plugin and everything brokes down.
First i try delete node_modules and yarn.lock and re-install with npm i. Not success!
So again i deleted node_modules and i tryied this command yarn add all
And everything is ok so now.
@didia
For now I have downgraded to v2.16.3 and it's working again.
This worked for me, thank you.
Same problem happened to me as soon as I installed gatsby-plugin-sass
and node-sass
. If I rolled back those installs, it worked fine, so the problem clearly had something to do with using plugins. To solve this, I deleted yarn.lock
, package-lock.json
, node_modules
, then re-installed everything via npm install
and it worked again.
Just ran into this issue while trying to install gatsby-plugin-sass. To fix, I removed package.json lockfile and yarn installed. Everything worked for me.
Additional information:
Using yarn instead of NPM can work well.
Most helpful comment
Had this problem today, required delete of
package-lock.json
and also the commands below: