[Storyblok, Gatsby] ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (Big announcement is coming this June, stay tuned😎)

I have a free online programming learning community called Lilac, with free hands-on Frontend e-books👩‍💻

Who is this article for?

• Anyone got the error - "ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'"
• Anyone uses Gatsby.js project with npm
• Anyone who enjoys Storyblok: "Add a headless CMS to Gatsby.js in 5 minutes" hands-on tutorial blog post

Storyblok: "Add a headless CMS to Gatsby.js in 5 minutes" hands-on tutorial blog post

What was the error?

Well, actually, it looks very similar to my previous blog post.

[Gatsby, Storyblok] "Can't resolve 'fs' in x"

No no no, it's not😅

This time is "prop-types" instead of fs.

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve 'prop-types' in '/Users/.../gatsby-storyblok-project/node_modules/gatsby-react-router-scroll'

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.

My environment is here👇

• npm: 6.14.11
• Node.js: 14.16.0

  "dependencies": {
    "gatsby": "^3.4.1",
    "gatsby-plugin-gatsby-cloud": "^2.4.1",
    "gatsby-plugin-image": "^1.4.0",
    "gatsby-plugin-manifest": "^3.4.0",
    "gatsby-plugin-offline": "^4.4.0",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-sharp": "^3.4.1",
    "gatsby-source-filesystem": "^3.4.0",
    "gatsby-source-storyblok": "^3.0.1",
    "gatsby-transformer-sharp": "^3.4.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "storyblok-js-client": "^4.0.9",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },

How this error occurred?

Installed by npm was the gotcha in this case.

I didn't realize that until I saw the solutions below.

A solution

It was dead simple.

GIF

Install with yarn instead of npm as Gatsby suggested in these sources.

It works totally fine as you find in Gatsby GitHub issue below👍

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

Error: Cannot find module 'react' - after installing Plugin

Hope you found some relevant info from what you're looking for!