Storybook error when using Webpack5 with Next.JS app + Typescript

Question

I am trying to set up a fresh next.js app using Typescript and Storybook.

Following some guides online gets me fairly close but I note that the rendered 'HomePage' story is missing styling

compared with what I get when I simply run

next dev

Based on discussions I found, I thought that it was something to do with storybook using Webpack4 vs Webpack5 (first time working with SB so not 100% sure).

Installing dependencies and updating .storybook/main.js to use webpack5, then running yarn storybook results in the following error.

yarn storybook
yarn run v1.22.10
$ start-storybook -p 6006 -s ./public
info @storybook/react v6.4.9
info
(node:2020) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ././public at /
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
9% setup compilation DocGenPlugininternal/modules/cjs/loader.js:892
throw err;
^

Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Require stack:
- .\node_modules\@storybook\react-docgen-typescript-plugin\dist\dependency.js
- .\node_modules\@storybook\react-docgen-typescript-plugin\dist\plugin.js
- .\node_modules\@storybook\react-docgen-typescript-plugin\dist\index.js
- .\node_modules\@storybook\react\dist\cjs\server\framework-preset-react-docgen.js
- .\node_modules\@storybook\core-common\dist\cjs\presets.js
- .\node_modules\@storybook\core-common\dist\cjs\index.js
- .\node_modules\@storybook\core-server\dist\cjs\index.js
- .\node_modules\@storybook\core\dist\cjs\server.js
- .\node_modules\@storybook\core\server.js
- .\node_modules\@storybook\react\dist\cjs\server\index.js
- .\node_modules\@storybook\react\bin\index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (.\node_modules\@storybook\react-docgen-typescript-plugin\dist\dependency.js:6:55)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at .\node_modules\@storybook\react-docgen-typescript-plugin\dist\plugin.js:108:42
    at _next2 (eval at create (.\node_modules\@storybook\builder-webpack5\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:247:1)
    at Hook.eval [as call] (eval at create (.\node_modules\@storybook\builder-webpack5\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:365:1)
    at Hook.CALL_DELEGATE [as _call] (.\node_modules\@storybook\builder-webpack5\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (.t\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\Compiler.js:1055:26) {
code: 'MODULE_NOT_FOUND',
requireStack: [
    '.\\@storybook\\react-docgen-typescript-plugin\\dist\\dependency.js',
    '.\\@storybook\\react-docgen-typescript-plugin\\dist\\plugin.js',
    '.\\@storybook\\react-docgen-typescript-plugin\\dist\\index.js',
    '.\\@storybook\\react\\dist\\cjs\\server\\framework-preset-react-docgen.js',
    '.\\@storybook\\core-common\\dist\\cjs\\presets.js',
    '.\\@storybook\\core-common\\dist\\cjs\\index.js',
    '.\\@storybook\\core-server\\dist\\cjs\\index.js',
    '.\\@storybook\\core\\dist\\cjs\\server.js',
    '.\\@storybook\\core\\server.js',
    '.\\@storybook\\react\\dist\\cjs\\server\\index.js',
    '.\\@storybook\\react\\bin\\index.js'
]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

.storybook/main.js

module.exports = {
    "core": {
        builder: "webpack5"
    },
    "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
    ],
    "framework": "@storybook/react"
}

.storybook/preview.js

import "../styles/globals.css";
import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
    configurable: true,
    value: (props) => <OriginalNextImage {...props} unoptimized />,
});

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
    matchers: {
    color: /(background|color)$/i,
    date: /Date$/,
    },
},
}

package.json

{
  "name": "client",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "start-storybook -p 6006 -s ./public",
    "build-storybook": "build-storybook  -s ./public"
  },
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/builder-webpack5": "^6.4.9",
    "@storybook/manager-webpack5": "^6.4.9",
    "@storybook/react": "^6.4.9",
    "@types/node": "17.0.8",
    "@types/react": "17.0.38",
    "babel-loader": "^8.2.3",
    "eslint": "8.6.0",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-storybook": "^0.5.5",
    "typescript": "4.5.4"
  }
}

Steps to reproduce:

1. npx create-next-app@latest --typescript
2. cd my-app
3. npx sb init
4. n for eslint-plugin-storybook plugin fix
5. yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
6. Update .storybook/main.js to include "core": { builder: "webpack5" }
7. yarn storybook and hit error

Other than this process, I have tried:

• Creating react apps with Storybook, then migrating to next.js with typescript
• Creating next apps with Storybook, then introducing Typescript

Both result in the same error...

Interestingly, when following the steps to reproduce with a non-typescript next.js app, everything seems to work fine and the 'HomePage' story is rendered correctly, so maybe some issue with Storybook playing nicely with Typescript? Or maybe missing dependencies?

Any input / point in the right direction would be greatly appreciated.

Answer 1

Found the answer here -> https://github.com/storybookjs/storybook/issues/15336

The solution is simply to add the following to .storybook\main.js

reactDocgen: false

Resulting .storybook\main.js looks like so

module.exports = {
   "core": {
      builder: "webpack5"
   },
   "stories": [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
      "@storybook/addon-links",
      "@storybook/addon-essentials"
   ],
   "framework": "@storybook/react",
   typescript: {
      check: false,
      checkOptions: {},
      reactDocgen: false,
      reactDocgenTypescriptOptions: {
         shouldExtractLiteralValuesFromEnum: true,
         propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
      },
   },
}

Answer 2

Resolved this by installing webpack.

If webpack^5.x.x is not installed, just install with npm i -D webpack@^5.x.x.