React Storybook修改文件不自动重载，如何启用热模块重载？

我经常碰到CRA集成Storybook后HMR不工作的情况，大多是版本兼容或者配置细节的问题，给你几个靠谱的解决步骤，按顺序试试：

1. 优先更新Storybook相关依赖到最新稳定版 #

旧版本的Storybook和CRA的webpack配置（尤其是webpack5）可能存在HMR兼容问题，先执行更新命令：

yarn upgrade @storybook/react @storybook/core @storybook/preset-create-react-app --latest

2. 调整.storybook/main.js配置 #

确保你的配置文件正确使用了CRA预设，并且启用了webpack5构建器（CRA现在默认用webpack5），同时优化HMR插件设置：

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app", // 必须保留这个预设，才能和CRA配置对齐
  ],
  core: {
    builder: "webpack5", // 指定webpack5构建，避免和CRA的webpack版本冲突
  },
  webpackFinal: async (config) => {
    // 优化HMR插件的超时设置，避免因构建延迟导致重载失败
    config.plugins.forEach(plugin => {
      if (plugin.constructor.name === 'HotModuleReplacementPlugin') {
        plugin.options = { ...plugin.options, fullBuildTimeout: 200 };
      }
    });
    return config;
  },
};

3. 清除Storybook缓存 #

有时候缓存会导致HMR逻辑异常，删除缓存目录后重启Storybook：

• Mac/Linux：

rm -rf node_modules/.cache/storybook

• Windows：

rd /s /q node_modules\.cache\storybook

4. 启动Storybook时禁用管理器缓存 #

在package.json的启动命令里添加--no-manager-cache参数，避免Storybook管理器端的缓存阻止页面刷新：

{
  "scripts": {
    "storybook": "start-storybook -p 6006 --no-manager-cache"
  }
}

完成以上步骤后，重启Storybook，修改组件或stories文件应该就能触发自动重载了。如果还是不行，可以检查是否有其他第三方依赖干扰了webpack配置，但90%的情况上面的方法都能解决。

内容的提问来源于stack exchange，提问作者Jim Jeffries