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:

npx create-next-app@latest --typescript
cd my-app
npx sb init
n for eslint-plugin-storybook plugin fix
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
Update .storybook/main.js to include "core": { builder: "webpack5" }
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.

Did you ever find an answer? I think I have the same problem. — James Bender
– James Bender, Commented Feb 6, 2022 at 20:09

Seb W · Accepted Answer · 2022-02-08 19:42:08Z

21

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),
      },
   },
}

edited Feb 8, 2022 at 19:42

answered Feb 8, 2022 at 9:09

Seb W

5712 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jmdavalos Over a year ago

it is said to be a bad fix as you will lose some vital storybook controls if you disable reactDocgen (github.com/storybookjs/storybook/issues/…)

Loki · Accepted Answer · 2022-05-08 23:47:28Z

6

Resolved this by installing webpack.

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

answered May 8, 2022 at 23:47

Loki

1,2334 gold badges31 silver badges67 bronze badges

2 Comments

Sergey Lukin Over a year ago

This answer makes more sense as it provides the missing piece rather than disabling a feature that requres it (poiting at stackoverflow.com/a/71031198/1832729)

José Jesús Ochoa Torres Over a year ago

I prefer to install webpack as dev dependency in order to generate automatically your Storybook documentation, taking this info from your typescript types or comments.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related