DEV Community

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

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

arisa_dev
Developer Relations Engineer at Storyblok. Love Aikido🥋 A free tech knowledge-sharing community, Lilac organizer💪 A host of Anonymous.fm https://dev.to/anonymousfm-arisa
・2 min read

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?

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"

gif

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.
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)