DEV Community

loading...
Cover image for [Storyblok & Gatsby]A Solution to "ERROR #98124  WEBPACK. Generating development SSR bundle failed"

[Storyblok & Gatsby]A Solution to "ERROR #98124 WEBPACK. Generating development SSR bundle failed"

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 freelance Full Stack Developer living in Germany🇩🇪

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

Who is this article for?

What was the error?

Here is the actual error log I got.

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve 'prop-types' in '/Users/.../gatsbyjs-multilanguage-website/.cache'

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: .cache/gatsby-browser-entry.js:2:0
Enter fullscreen mode Exit fullscreen mode

It was actually dead simple, so no worries!

gif

And here's my environment👇

{
  "dependencies": {
    "gatsby": "^3.2.1",
    "gatsby-plugin-gatsby-cloud": "^2.2.0",
    "gatsby-plugin-image": "^1.2.1",
    "gatsby-plugin-manifest": "^3.2.0",
    "gatsby-plugin-offline": "^4.2.0",
    "gatsby-plugin-react-helmet": "^4.2.0",
    "gatsby-plugin-sharp": "^3.2.1",
    "gatsby-source-filesystem": "^3.2.0",
    "gatsby-source-storyblok": "^2.0.0",
    "gatsby-transformer-sharp": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Simply, I just got this error in the step of "Connect Storyblok" in Storyblok's official documentation to build Gatsby multilingual blog demo.

A solution

As I said, it was dead simple.

gif

Just follow what the error says, install prop-types.

$ npm i prop-types --save
Enter fullscreen mode Exit fullscreen mode

https://www.npmjs.com/package/prop-types

Well, of course, you need to configure right to link Storyblok with your Gatsby project by writing this config into your gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: 'gatsby-source-storyblok',
      options: {
        accessToken: 'YOUR_PREVIEW_TOKEN',
        homeSlug: 'home',
        version: process.env.NODE_ENV === 'production' ? 'published' : 'draft'
      }
    },
    ...
  ]
}
Enter fullscreen mode Exit fullscreen mode

Run $ gatsby develop

It won't fail👍

Hope this blog post was something you were looking for!

Sources:

Discussion (0)