Storybook项目构建时runtime.js缺失问题分析与解决方案

问题现象

Storybook作为前端组件开发工具，近期在8.5.x版本中出现了一个影响构建过程的典型问题。当开发者使用Vite构建工具（包括React-Vite、Vue3-Vite等框架）时，构建过程中会出现以下关键错误：

1. 控制台报错显示无法找到runtime.js文件，错误信息为"GET http://localhost:6006/sb-preview/runtime.js net::ERR_ABORTED 404 (Not Found)"
2. 构建过程中Vite会警告"Use of eval in runtime.js is strongly discouraged"，指出存在潜在安全风险
3. 生成的静态HTML文件中包含对不存在的sb-preview/runtime.js的引用

问题根源分析

经过技术分析，这个问题主要由以下几个技术因素共同导致：

1. 预构建包问题：Storybook核心包(@storybook/core)在分发时已经预构建，其中包含了telejson包的eval用法，这在现代构建工具中会被视为安全风险

2. Vite构建策略变更：Vite 6.x版本对eval的使用采取了更严格的限制，而早期版本(Vite 5.x)对此相对宽容

3. 路径引用错误：构建系统生成的HTML文件错误地引用了不存在的运行时文件路径，而实际上该文件应该被正确打包到输出目录中

影响范围

该问题主要影响以下使用场景：

1. 使用Vite作为构建工具的项目（React-Vite、Vue3-Vite等）
2. Storybook版本8.5.0及更高版本
3. 开发环境和生产环境构建都会受到影响
4. Windows、macOS和Linux系统均报告了相同问题

临时解决方案

虽然官方正在修复此问题，但开发者可以采用以下临时解决方案：

1. 版本回退：暂时回退到8.4.7版本，该版本未出现此问题

   npm install storybook@8.4.7
   

2. 构建配置调整：在vite配置中添加以下内容，允许eval使用

   // .storybook/main.js
   export default {
     viteFinal(config) {
       config.build = {
         ...config.build,
         target: 'esnext' // 或明确设置支持eval的环境
       };
       return config;
     }
   };
   

3. 手动修复引用：构建后手动修改生成的HTML文件，移除错误的runtime.js引用

最佳实践建议

为避免类似问题，建议开发者在项目中：

1. 定期检查Storybook版本更新说明，了解已知问题
2. 在升级主要版本前，先在独立分支或沙盒环境中测试
3. 保持构建工具(Vite等)版本与Storybook版本的兼容性
4. 考虑使用更稳定的长期支持(LTS)版本而非最新版本

问题演进与官方进展

Storybook团队已经确认此问题并正在进行修复。从技术角度看，修复方向可能包括：

1. 重构telejson包的使用方式，消除eval依赖
2. 修正构建过程中的路径引用逻辑
3. 优化预构建包的生成策略

开发者可以关注Storybook的官方更新以获取修复版本。在此期间，上述临时解决方案可以帮助项目继续正常开发。