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

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?

• Anyone got stuck when you were trying Storyblok with Gatsby
• Anyone who got the same error in the blog post title
• Anyone who follows the tutorial from Storyblok to use Gatsby

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

It was actually dead simple, so no worries!

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"
  }
}

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.

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

$ npm i prop-types --save

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'
      }
    },
    ...
  ]
}

Run $ gatsby develop

It won't fail👍

Hope this blog post was something you were looking for!

Sources:

• The Complete Guide to Build a Full-Blown Multilanguage Website with Gatsby.js
• prop-types: npm