Gatsby: Failed to 'gatsby develop' after installing typography plugin

[tounsoo]

Description

Failed to 'gatsby develop' after installing typography plugin when following gatsyby tutorial(https://www.gatsbyjs.org/tutorial/part-three/)

Steps to reproduce

Literally, I followed exact steps on the gatsby tutorial and up until part-two it was all working fine. But once I did this step(https://www.gatsbyjs.org/tutorial/part-three/#-install-and-configure-gatsby-plugin-typography) it gave me error.

Actual result

  gatsby develop
success open and validate gatsby-configs - 0.035s
success load plugins - 0.082s
success onPreInit - 0.002s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.024s
success copy gatsby files - 0.070s
success onPreBootstrap - 0.010s
success createSchemaCustomization - 0.002s
success source and transform nodes - 0.036s
success building schema - 0.197s
success createPages - 0.001s
success createPagesStatefully - 0.043s
success onPreExtractQueries - 0.001s
success update schema - 0.024s
success extract queries from components - 0.049s
success write out requires - 0.009s
success write out redirect data - 0.002s
success onPostBootstrap - 0.001s
⠀
info bootstrap finished - 4.088 s
⠀
success run queries - 0.024s - 2/2 83.41/s

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't resolve '/Users/benho/anvil-gatsby/src/utils/typography' in '/Users/benho/anvil-gatsby/node_modules/gatsby-plugin-typography/.cache'

File: node_modules/gatsby-plugin-typography/.cache/typography.js

Environment

System:
    OS: macOS 10.15.1
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.13.2 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.79
    Safari: 13.0.3
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-plugin-typography: ^2.3.20 => 2.3.20
  npmGlobalPackages:
    gatsby-cli: 2.8.20

[jjcav84]

Do you have the code in a repository? If not then what does your typography.js config file and your gatsby-config.js file look like? Perhaps you made a mistaking of using a module path instead of the relative path in your config?

[skcele]

I also ran into issues after installing this step, but had a different set of errors:

gatsby develop

 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 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
    [tutorial-part-three]/[gatsby]/[react]/cjs/react.development.js:1590:13

  - react.development.js:1618 useState
    [tutorial-part-three]/[gatsby]/[react]/cjs/react.development.js:1618:20

  - context.js:17 StoreStateProvider
    [tutorial-part-three]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41

  - react-reconciler.development.js:6036 renderWithHooks
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [tutorial-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

[AlexanderMelox]

I got this error when doing the tutorial here -> https://www.gatsbyjs.org/tutorial/part-three/#-install-and-configure-gatsby-plugin-typography

After installing the typography packages and running gatsby develop it crashes and gives me this error.

$ gatsby develop
internal/modules/cjs/loader.js:800
    throw err;
    ^

Error: Cannot find module 'react'
Require stack:
- /Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/instance.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/render.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/index.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/loggers/ink/index.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/create-cli.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js
- /Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/dist/bin/gatsby.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/instance.js:8:37)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/instance.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/render.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/ink/build/index.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/loggers/ink/index.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/reporter/index.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/create-cli.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js',
    '/Users/melo/Desktop/tutorial-part-three/node_modules/gatsby/dist/bin/gatsby.js'
  ]
}
error Command failed with exit code 1.

[Behinder]

Same here, also I notice during build that lot of dependent modules for typographyjs relies on core-js ^2.* which is deprecated and not secure.
So the Gatsby tutorial currently offers buggy solution :(

[LekoArts]

Thank you for opening this!

Please see this issue: https://github.com/gatsbyjs/gatsby/issues/19064
npm is messing up your dependency tree. Another run of npm install (and removal of node_modules beforehand) should fix your issue.

core-js ^2.* which is deprecated and not secure.

We'll upgrade soon. In the meantime you don't have to fear any security issues.

So the Gatsby tutorial currently offers buggy solution :(

Have a look at the solutions in the mentioned issue, then it'll work :)

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!

[tounsoo]

Sorry for the really late response, after posting this, I have tried npm install after removing node_modules and failed and erased them. But after a week or so later, I cloned again and it worked that time just following the tutorial, not sure if something has changed since then but its working now.

[Behinder]

The solution suggested worked for me, big thanks :)

[rewired]

Hi there,
I'm trying the tutorial and still got these issues. I removed node_modules and run a npm install after.

`$ gatsby develop

ERROR

The above error occurred in the 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 fol lowing 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
  [tut_gatsby-part-three]/[gatsby]/[react]/cjs/react.development.js:1590:13

• react.development.js:1618 useState
  [tut_gatsby-part-three]/[gatsby]/[react]/cjs/react.development.js:1618:20

• context.js:17 StoreStateProvider
  [tut_gatsby-part-three]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41

• react-reconciler.development.js:6036 renderWithHooks
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

• react-reconciler.development.js:8570 mountIndeterminateComponent
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

• react-reconciler.development.js:9938 beginWork$1
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

• react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

• react-reconciler.development.js:11740 invokeGuardedCallback
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

• react-reconciler.development.js:15778 beginWork$$1
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

• react-reconciler.development.js:14696 performUnitOfWork
  [tut_gatsby-part-three]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12`

[muescha]

can you check which packageManager is used?

cat ~/.config/gatsby/config.json

if yarn then you have to type

yarn

before you can call gatsby develop

[BenQuirk]

Having the same issue as described in opening post, same error messages and error #, when following the tutorial and trying to run gatsby develop after setting up the typography.js gatsby plugin.

Was not able to get it to work by deleting node_modules and re-installing. Tried multiple times.

Any other solution ideas?

[muescha]

did you check if npm is used? (See #21990)