升级至Storybook 7（Webpack 5）后页面循环刷新问题求助

升级至Storybook 7搭配Webpack 5后，页面出现循环重载问题。

项目为私有仓库，相关配置如下：

main.js 配置 #

framework: {
    name: '@storybook/web-components-webpack5',
    options: {
      fastRefresh: true,
      builder: { lazyCompilation: true },
    },
  },
  features: {
    postcss: false,
    /* 按需加载stories的代码拆分标识 */
    storyStoreV7: true,
    /* 生成stories.json用于按需加载 */
    buildStoriesJson: true,
  },
  docs: {
    autodocs: true, // 下方有替代方案
    defaultName: 'Docs', // 用于修改生成的文档条目名称
  },

package.json 依赖片段 #

"@etchteam/storybook-addon-status": "^4.2.4",
  "@spectrum-css/component-builder": "^4.0.9",
  "@storybook/addon-a11y": "^7.0.12",
  "@storybook/addon-actions": "^7.0.12",
  "@storybook/addon-console": "^1.2.3",
  "@storybook/addon-docs": "^7.0.12",
  "@storybook/addon-essentials": "^7.0.12",
  "@storybook/api": "^7.0.12",
  "@storybook/client-api": "^7.0.12",
  "@storybook/components": "^7.0.12",
  "@storybook/core-events": "^7.0.12",
  "@storybook/manager-api": "^7.0.12",
  "@storybook/preview-api": "^7.0.12",
  "@storybook/theming": "^7.0.12",
  "@storybook/web-components-webpack5": "^7.0.12",
  "storybook": "^7.0.12",
  "lit": "^2.7.4",
  "lit-html": "^2.7.4",
  "style-loader": "3.3.3",
  "webpack": "^5.83.1"

测试仓库：Rajdeepc/test-story

针对该循环重载问题，可按以下步骤排查修复：

• 关闭Lazy Compilation：Webpack 5的lazyCompilation特性与Storybook 7的组合可能触发重载循环，修改配置为lazyCompilation: false后重启服务：

  framework: {
    name: '@storybook/web-components-webpack5',
    options: {
      fastRefresh: true,
      builder: { lazyCompilation: false },
    },
  },
  

• 禁用Fast Refresh：Fast Refresh在Web Components场景下存在适配风险，将fastRefresh设为false测试。
• 排查Addon兼容性：@storybook/addon-console版本较旧（v1.2.3），可能与Storybook 7不兼容，暂时移除该addon或升级至适配版本后验证。
• 关闭buildStoriesJson：buildStoriesJson配合storyStoreV7可能引发文件监听异常，改为buildStoriesJson: false后重启。
• 清理缓存：执行npx storybook clean清理缓存，再重新启动项目。

内容的提问来源于stack exchange，提问作者deepwork productions