Chromatic GitHub Action执行失败：无法解析iframe.html模块

针对你遇到的**本地正常但CI中Chromatic部署报错getResolvedModule() could not resolve module name "./node_modules/@storybook/builder-vite/input/iframe.html"**的问题，提供以下具体解决思路：

1. 排查Bun依赖安装的完整性 #

Bun的包管理在处理部分复杂依赖时可能存在缓存或文件缺失问题：

• 强制使用锁定文件安装依赖，避免版本不一致：

  - name: Install dependencies
    run: bun install --frozen-lockfile
  

  若没有lockfile，添加--no-cache参数强制重新拉取所有依赖：

  - name: Install dependencies
    run: bun install --no-cache
  

• 在CI中添加文件检查步骤，确认依赖文件是否存在：

  - name: Verify builder-vite iframe.html exists
    run: test -f node_modules/@storybook/builder-vite/input/iframe.html || echo "iframe.html missing!"
  

  如果输出“iframe.html missing!”，说明Bun未正确安装该依赖的完整文件。

2. 手动构建Storybook后再上传 #

Chromatic默认自动构建的逻辑可能和Bun环境存在兼容性冲突，改为先手动构建再上传：

• 修改GitHub Action步骤，先执行Storybook构建，再指定构建产物目录给Chromatic：

  - name: Build Storybook
    run: bun run build-storybook
  - name: Publish to Chromatic
    uses: chromaui/action@v1
    with:
      token: ${{ secrets.GITHUB_TOKEN }}
      projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
      exitOnceUploaded: true
      buildDir: storybook-static # 对应Storybook默认构建输出目录，可根据自身配置调整
  

3. 切换Node.js环境验证兼容性 #

暂时替换Bun为Node.js环境，排查是否是Bun与Storybook/Chromatic的兼容性问题：

• 修改CI中的环境配置为Node.js：

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: 20
      cache: 'npm'
  - name: Install dependencies
    run: npm ci
  

  如果Node.js环境下能正常部署，说明问题出在Bun的兼容性上，可暂时使用Node.js作为CI环境，或等待Bun后续版本修复。

4. 确认Storybook配置正确性 #

检查.storybook/main.js/ts中的builder配置是否正确：

• 确保core.builder字段指向正确的依赖，或使用预设：

  // .storybook/main.js
  export default {
    framework: '@storybook/react-vite', // 已包含builder-vite，无需单独指定core.builder
    // 或手动指定：
    // core: {
    //   builder: '@storybook/builder-vite',
    // },
    // 其他配置...
  };
  

  你的所有Storybook依赖版本统一为7.5.3，版本一致性没问题，重点确认配置中没有错误路径。

5. 升级Chromatic依赖版本 #

当前使用的chromatic@9.1.0可能存在已知兼容性问题，尝试升级到最新稳定版：

• 修改package.json中的chromatic版本为^10.0.0（或最新版），重新安装依赖后更新CI步骤。

内容的提问来源于stack exchange，提问作者Beehive Software Consultants