Nx Storybook(Webpack5)报exports未定义及无限加载问题求助

问题根源 #

Webpack5对ES模块和CommonJS模块的区分更严格，你遇到的exports is not defined错误以及导出警告，都是因为生成的Asset_pb_service.js（CommonJS格式）被Webpack当作ES模块处理导致的模块格式不兼容，进而引发Storybook页面无限加载。

具体修复步骤 #

1. 调整Webpack配置，兼容CommonJS模块
   在应用级的Storybook配置（../.storybook/main.js）的webpackFinal中添加规则，指定proto生成的JS文件按CommonJS处理：

webpackFinal: async (config, { configType }) => {
  if (rootMain.webpackFinal) {
    config = await rootMain.webpackFinal(config, { configType });
  }

  // 新增：处理proto生成的CommonJS文件
  config.module.rules.push({
    test: /\.pb_service\.js$/, // 匹配你的proto生成文件后缀
    type: 'javascript/auto', // 让Webpack自动识别模块格式，兼容CommonJS
  });

  return config;
},

这个配置会告诉Webpack不要强制将这些JS文件当作ES模块解析，解决exports is not defined的错误。

2. 同步Nx与Storybook相关依赖版本
   确保Nx的Storybook插件版本和Nx主版本一致，避免兼容性问题：

npm install @nrwl/storybook@14.7.5 --save-dev

3. 检查Proto文件生成配置
   如果是用protobuf工具生成的Asset_pb_service.js，尝试调整生成参数，直接生成ES模块格式的文件：

• 例如使用protobufjs时，添加--es6参数：

  pbjs --es6 --out=Asset_pb_service.js Asset.proto
  

生成ES模块格式的文件后，Webpack5可以直接解析，不会出现导出警告。

4. 排查无限加载问题
   无限加载通常是模块加载失败导致的连锁反应，解决上述exports错误后大概率会自动修复。如果仍有问题：

• 暂时禁用storybook-dark-mode等第三方addon，排查是否是addon兼容性问题
• 查看Storybook终端日志，确认是否有其他未捕获的模块加载错误

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