Gatsby: ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types' in 'C:\Users\MYNAME\node_modules\react-typography\dist'

[C2-now]

Description

I'm very new to GatsbyJS, so I'm doing official tutorial.
In chapter 3, I imported the typography plugin as the tutorial, but Gatsby returned errors like this title.

Step to procedure

Everything I did was following the tutorial like follows.

1. Create a new Gatsby project
   In shell, I executed follow

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

1. Install plugins
   In shell, I executed follow

npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

1. Edit the file gatsby-config.js at the hello-world folder(hello-world/gatsby-config.js)
   I edited the config-file like...

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

1. Make typography.js (hello-world/src/utils/typography.js)

import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography

1. Start the development server
   I executed gatsby develop in shell.

Expected result

The project should compile fine.

Actual result

Gatsby returned following errors.

 ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'prop-types' in 'C:\Users\MYNAME\node_modules\react-typography\dist'

If you're trying to use a package make sure that 'prop-types' is installed. If you're trying to use a local file make sure that the path is correct.

File: ..\..\node_modules\react-typography\dist\GoogleFont.js



If you're trying to use a package make sure that 'prop-types' is installed. If you're trying to use a local file make sure that the path is correct.

File: ..\..\node_modules\react-typography\dist\TypographyStyle.js

What I did (it did not make sense)

I've tried deleting the node-modules folder and the package-lock.json file and executed npm i in shell with this comment as guide.

Environment

  System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.5
  Browsers:
    Chrome: 84.0.4147.135
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^2.24.47 => 2.24.50
  npmGlobalPackages:
    gatsby-cli: 2.12.87

[rajprakash00]

Have you tried updating node version to 13+ version?
You can try installing prop-types package & see if it works.

[C2-now]

Have you tried updating node version to 13+ version?
You can try installing prop-types package & see if it works.

Thank you for your advise, RAJPRAKASH.

I've updated node to 14.8.0 (the latest version) and installed prop-types.
However, Gatsby still returns the same error. 😭

I have confirmed that the prop-types exists in C:/Users/MYNAME/AppData/Local/Microsoft/TypeScript/3.9/node_modules/@types/.

[vladar]

Hi @chinamini

Sorry to hear you're running into an issue. I followed your steps exactly and couldn't reproduce it. Can you publish your local project on github and post a link here so that we could try it with your exact setup?

What looks suspicious to me is that it looks for node_modules in your Windows user folder (not in project folder): C:\Users\MYNAME\node_modules\react-typography\dist. Make sure you've installed all dependencies in the project folder.

When we have a reproduction we can take another look.

Thanks for using Gatsby 💜

[C2-now]

Thank you for taking an interest in my problems, @vladar.

Here is my local project.
I wasn't sure which file was causing the problem, so I made a repository with everything that looks suspicious.

The Gatsby project is hoge under my_gatsby_environment/gatsby.

[C2-now]

I've just done the part3 of the tutorial again, and Gatsby has made my tutorial site normally with plugin.
However, the cause of the error is still unknown.

[LekoArts]

I think this is a duplicate of https://github.com/gatsbyjs/gatsby/issues/18048 - npm most likely screwed up your installation. Your other descriptions also point to that problem. Sorry for the troubles it caused you though!

[T04435]

I runned into similar issue after I deleted the /public forlder the solution was to also delete the /.cache folder