gatsby: install gatsby-transformer-remark breaks 'gatsby develop'

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® Core™ 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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 11
  • Comments: 45 (14 by maintainers)

Commits related to this issue

Most upvoted comments

Had this problem today, required delete of package-lock.json and also the commands below:

rm -rf node_modules
npm install

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?

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:

  • create a new app with default starter (gatsby new myProject) if I do gatsby develop here, everything works as it should
  • install the plugin (npm i gatsby-source-github-api) if I do gatsby develop now, it shows the Error: Cannot find module 'react'
  • install the packages so react and react-dom are installed/updated (npm i) if I do 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

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

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

After a little bit of investigation, I found that the problem started occurring at gatsby@2.16.4. #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.

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.

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!

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.

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!

@trkohler try yarn-deduplicate (https://www.npmjs.com/package/yarn-deduplicate)

If this won’t help, open a new issue. This one is closed for a while and we would need more information about your error messages to help you

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.

Switching to yarn wasn’t an option for me. Updating react and react-dom to 16.11.0 fixed this.

@axe312ger

Thanks for your valuable time and insights.

@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.

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.

Occurred for me after upgrading a few gatsby dependencies. Deleting node_modules && yarn.lock helped