将 Webpack5 与 Next.JS 应用程序 + Typescript 一起使用时出现 Storybook 错误

Question

我正在尝试使用 Typescript 和 Storybook 建立一个新的 next.js 应用程序。

遵循一些在线指南让我相当接近，但我注意到渲染的“主页”故事缺少样式

与我简单跑步时得到的结果相比

next dev

根据我发现的讨论，我认为这与使用 Webpack4 与 Webpack5 的故事书有关（第一次使用 SB，所以不是 100% 确定）。

安装依赖项并更新 .storybook/main.js 以使用 webpack5，然后运行 ​​Yarn Storybook 会导致以下错误。

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$/,
    },
},
}

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

重现步骤：

1. npx create-next-app@latest --typescript
2. cd 我的应用程序
3. npx sb 初始化
4. n 用于 eslint-plugin-storybook 插件修复
5. 纱线添加@storybook/builder-webpack5 @storybook/manager-webpack5 --dev
6. 更新 .storybook/main.js 以包含 "core": { builder: "webpack5" }
7. 纱线故事书和命中错误

除了这个过程之外，我还尝试过：

• 使用 Storybook 创建 React 应用程序，然后使用 Typescript 迁移到 next.js
• 使用 Storybook 创建下一个应用程序，然后引入 Typescript

两者都会导致相同的错误......

有趣的是，当按照步骤使用非 typescript next.js 应用程序进行重现时，一切似乎都工作正常，并且“HomePage”故事渲染正确，所以 Storybook 与 Typescript 完美配合可能存在一些问题？或者可能缺少依赖项？

任何正确方向的输入/点将不胜感激。

Answer 1

在这里找到答案 - > https://github.com/storybookjs/storybook/issues/15336

解决方案只需将以下内容添加到 .storybook\main.js

reactDocgen: false

结果 .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",
   typescript: {
      check: false,
      checkOptions: {},
      reactDocgen: false,
      reactDocgenTypescriptOptions: {
         shouldExtractLiteralValuesFromEnum: true,
         propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
      },
   },
}

Answer 2

通过安装 webpack 解决了这个问题。

如果没有安装 webpack^5.xx，只需安装npm i -D webpack@^5.x.x.