Storybook在Replit中组件预览卡加载状态的排查求助

排查与解决步骤 #

• 校验Storybook iframe核心配置
  检查.storybook/main.js中的iframe相关参数，显式配置基础参数避免自动适配异常：

  module.exports = {
    // 保留原有配置
    iframeHeight: 800,
    features: {
      storyStoreV7: true,
      buildStoriesJson: true
    }
  };
  

• 调整Replit端口与跨域策略
  Replit内嵌预览的跨域限制可能阻断iframe资源加载，修改启动命令指定端口并关闭自动打开：

  start-storybook -p 3000 --no-open
  

  同时在.storybook/preview.js中添加跨域允许配置：

  export const parameters = {
    // 保留原有参数
    server: {
      cors: { origin: "*" }
    }
  };
  

• 禁用冲突特性
  关闭可能与Replit预览容器不兼容的Storybook特性，比如自动视口适配：

  // .storybook/main.js
  module.exports = {
    // 保留原有配置
    features: {
      viewport: false
    }
  };
  

• 清理缓存重建项目
  执行命令清理Storybook缓存与Replit临时文件，避免缓存导致的加载异常：

  npm run build-storybook -- --clean
  rm -rf node_modules/.cache
  

  清理完成后重新启动服务。
• 切换预览模式
  将Replit的预览方式从内嵌切换为新窗口打开，嵌套iframe的层级限制可能是加载卡住的核心原因，新窗口模式下可规避该问题。

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