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

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

[T04435]

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

[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!