將 Webpack5 與 Next.JS 應用程序一起使用時出現 Storybook 錯誤 + Typescript

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

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

重現步驟：

1. npx create-next-app@latest --typescript
2. cd 我的應用程序
3. npx 某人初始化
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

兩者都會導致相同的錯誤...

有趣的是，當按照步驟使用非打字稿 next.js 應用程序進行重現時，一切似乎都工作正常並且“主頁”故事被正確呈現，所以 Storybook 與 Typescript 一起播放時可能存在一些問題？ 或者可能缺少依賴項？

任何正確方向的輸入/點將不勝感激。

Answer 1

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

解決方案是簡單地將以下內容添加到 .storybook\main.js

reactDocgen: false

Resulting.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.xx