升级Storybook至v7.6.x后出现「exports is not defined」错误求助

碰到这种升级后突然炸锅的模块错误真的挺闹心的，我之前帮同事排查过类似的问题，结合你的场景（Webpack5 + TS/React），给你几个排查方向试试看：

1. 检查Storybook的Webpack配置是否存在模块格式冲突 #

Storybook v7.6.x对Webpack的默认配置可能做了调整，如果你之前在.storybook/main.ts的webpackFinal里手动设置过模块输出格式，比如libraryTarget: 'commonjs2'，这在浏览器环境里会直接导致exports is not defined的错误——因为浏览器原生不支持CommonJS的exports对象。

你可以打开.storybook/main.ts，看看有没有类似下面的配置，要是有的话先注释掉或者调整：

export default {
  // ... 其他已有配置
  webpackFinal: async (config) => {
    // 👇 找到这类配置，先注释掉试试
    // config.output.libraryTarget = 'commonjs2';
    return config;
  },
};

2. 核对TypeScript编译配置（tsconfig.json） #

确保你的TS配置是输出ES模块，而不是CommonJS模块——后者在浏览器环境下会被Webpack转译，但如果配置不对，可能和Storybook的新构建逻辑冲突。

打开项目根目录或者.storybook文件夹下的tsconfig.json，检查这几个关键配置：

{
  "compilerOptions": {
    "module": "ESNext", // 或者ES6，不要用CommonJS
    "moduleResolution": "bundler", // 适配Webpack5的模块解析逻辑
    "target": "ES6" // 确保目标环境支持ES模块
    // ... 其他配置
  }
}

3. 排查第三方依赖的转译问题 #

虽然你的示例组件只用了classnames、React这些常用包，但不排除某个依赖的模块格式不兼容Webpack5的新处理逻辑。你可以尝试在Storybook配置里把相关依赖加入转译列表：

// .storybook/main.ts
export default {
  // ... 其他配置
  transpilePackages: ['classnames'], // 可以先加这个试试，有其他可疑依赖也加上
};

4. 尝试重置Storybook配置 #

如果上面的方法都没用，可能是旧配置和新版本的Storybook存在隐性冲突。你可以先备份.storybook文件夹，然后执行命令重新初始化配置：

npx storybook@latest init

之后再逐步把之前的自定义配置（比如addons、webpack调整）加回去，看看加到哪一步出问题，就能定位到具体原因了。

另外，你的示例故事和组件代码都是标准的ES模块写法，本身应该没问题，所以问题大概率出在构建配置层面，先从上面几个方向排查应该能解决~

备注：内容来源于stack exchange，提问作者emerson.marini