升级至Storybook V7后执行storybook dev命令报错求助

第一步：获取详细编译日志 #

原错误信息过于笼统，先执行带调试参数的启动命令，拿到具体错误点：

storybook dev -p 6006 --debug-webpack

输出日志里会显示具体的编译失败原因（比如模块缺失、语法错误、loader不兼容等），这是定位问题的核心。

常见排查与修复步骤 #

• 清理缓存与重新安装依赖
  执行Storybook官方清理命令，再彻底重置依赖：

  pnpm dlx storybook@latest clean
  rm -rf node_modules pnpm-lock.yaml
  pnpm install
  

  重新启动Storybook，看问题是否解决。

• 检查Webpack版本冲突
  用pnpm查看Webpack相关依赖版本，确保没有强制引入Webpack 4的情况：

  pnpm ls webpack
  

  Storybook V7要求Webpack 5，若存在版本冲突，可在package.json的pnpm.overrides中锁定Webpack 5版本。

• 验证Storybook配置文件
  检查.storybook/main.js/ts配置：

  • 确认addons配置符合V7规范，不再支持旧版的@storybook/addons聚合包，需单独引入所需addon
  • 若有自定义Webpack配置，检查是否与Storybook默认配置冲突（比如重复的loader规则、别名冲突）

• 检查TypeScript配置（若使用TS）
  确保tsconfig.json的compilerOptions与Storybook V7兼容：

  • 推荐target: ES2020或更高版本
  • 确保moduleResolution: "node16"或"nodenext"（若使用ES模块）
  • 可开启skipLibCheck: true避免第三方类型定义冲突

• 排查故事文件与组件代码

  • 替换旧版API：storiesOf已废弃，改用CSF 3格式的默认导出
  • 检查组件/故事中的导入路径是否正确，避免相对路径错误或导入不存在的模块

内容的提问来源于stack exchange，提问作者matuyama