Next.js+TypeScript环境下Storybook构建报错：无法解析generated-stories-entry.cjs

环境信息 #

• npm版本：8.19.1
• 项目技术栈：Next.js + TypeScript
• Storybook版本：@storybook/react v6.5.13

报错日志 #

> msun@0.1.0 storybook:build
> build-storybook

info @storybook/react v6.5.13
info 
info => Cleaning outputDir: /Users/msun/Documents/msun/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using PostCSS preset with postcss@8.4.19
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
65% building 14/14 entries 18/18 dependencies 2/6 modulesinfo => Manager built (7.26 s)
ERR! ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR!  ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR! resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!   using description file: /Users/msun/Documents/msun/package.json (relative path: .)
ERR!     Field 'browser' doesn't contain a valid alias configuration
ERR!     root path /Users/msun/Documents/msun
ERR!       using description file: /Users/msun/Documents/msun/package.json (relative path: ./Users/msun/Documents/msun/generated-stories-entry.cjs)
ERR!         no extension
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!         .mjs
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.mjs doesn't exist
ERR!         .js
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.js doesn't exist
ERR!         .jsx
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.jsx doesn't exist
ERR!         .ts
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.ts doesn't exist
ERR!         .tsx
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.tsx doesn't exist
ERR!         .json
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.json doesn't exist
ERR!         .cjs
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.cjs doesn't exist
ERR!         as directory
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!     using description file: /Users/msun/Documents/msun/package.json (relative path: ./generated-stories-entry.cjs)
ERR!       no extension
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!       .mjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.mjs doesn't exist
ERR!       .js
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.js doesn't exist
ERR!       .jsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.jsx doesn't exist
ERR!       .ts
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.ts doesn't exist
ERR!       .tsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.tsx doesn't exist
ERR!       .json
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.json doesn't exist
ERR!       .cjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.cjs doesn't exist
ERR!       as directory
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
info => Loading presets
npm notice 
npm notice New major version of npm available! 8.19.1 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g npm@9.1.2 to update!
npm notice 

报错核心 #

• 无法解析文件：/Users/msun/Documents/msun/generated-stories-entry.cjs
• 附带提示：Field 'browser' doesn't contain a valid alias configuration

解决方案 #

1. 清理Storybook缓存后重建 #

执行命令：

npx storybook clean
npm run build-storybook

2. 校验Storybook配置文件 #

打开.storybook/main.js（或main.ts），确认stories字段路径与项目结构匹配：

export default {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  // 其他配置项...
};

避免使用错误的绝对路径，优先用相对路径。

3. 重装依赖 #

删除现有依赖和锁文件后重新安装：

rm -rf node_modules package-lock.json
npm install

4. 手动生成入口文件（临时 workaround） #

在项目根目录创建generated-stories-entry.cjs文件，内容如下：

module.exports = {};

之后再次执行npm run build-storybook。

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