[Storyblok & Gatsby]A Solution to "ERROR #98124 WEBPACK. Generating development SSR bundle failed"
Tags: gatsby, storyblok, react
Published: 2021-04-19 23:38:49

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing [Lilac](https://note.com/frontendlifeinde/m/m9b8feda1d547), 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](https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial)

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

![gif](https://media.giphy.com/media/ZFnb8G00YssucZnVvf/giphy.gif)

And here's my environment👇

```javascript
{
  "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"](https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#connect-storyblok) in Storyblok's official documentation to build Gatsby multilingual blog demo. 

# A solution

As I said, it was dead simple.

![gif](https://media.giphy.com/media/dhXoICpiBaGLRBzi9C/giphy.gif)

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

```shell
$ npm i prop-types --save
```

> [https://www.npmjs.com/package/prop-types](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` 

```javascript
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](https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#the-complete-guide-to-build-a-full-blown-multilanguage-website-w)
- [prop-types: npm](https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#the-complete-guide-to-build-a-full-blown-multilanguage-website-w)