Rspack结合联邦模块时Hot Module Replacement (HMR)失效问题求助

核心排查与修复步骤 #

1. 补全模块联邦的HMR专属配置 #

Rspack的模块联邦对HMR有特殊依赖要求，需在联邦插件配置中显式共享HMR相关依赖并开启单例模式：

// rspack.config.js
const ModuleFederationPlugin = require('@rspack/core').ModuleFederationPlugin;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'your_app_id',
      filename: 'remoteEntry.js',
      exposes: { /* 你的暴露模块配置 */ },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
        'react-refresh': { singleton: true, requiredVersion: '^0.14.0' },
        'react-refresh/runtime': { singleton: true, requiredVersion: '^0.14.0' }
      }
    })
  ]
};

2. 适配Rsbuild的HMR配置逻辑 #

不要直接修改顶层hmr/hot选项，需在Rspack工具链配置中精细化调整开发服务器参数：

// rsbuild.config.js
module.exports = {
  tools: {
    rspack: (config) => {
      config.devServer = {
        ...config.devServer,
        hot: true,
        client: {
          webSocketURL: { hostname: 'localhost', port: 3000, pathname: '/ws' },
          overlay: false // 禁用错误弹窗避免干扰HMR逻辑
        }
      };
      return config;
    }
  }
};

3. 移除Webpack生态冲突插件 #

react-refresh-webpack-plugin与Rspack不兼容，需彻底移除并改用Rspack原生的React刷新插件：

// rspack.config.js
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh').ReactRefreshPlugin;

module.exports = {
  plugins: [new ReactRefreshPlugin()]
};

4. 修复Hot Update文件404问题 #

该问题多因更新文件路径与服务根目录不匹配，需调整输出路径并确保开发服务器正确映射静态资源：

// rsbuild.config.js
module.exports = {
  output: {
    distPath: { root: 'dist', js: 'js' } // 避免嵌套过深导致路径解析错误
  },
  dev: {
    assetPrefix: '/', // 确保静态资源根路径正确
  }
};

5. 解决页面无限重载问题 #

无限重载多因HMR触发全局刷新，需在入口文件添加局部更新逻辑：

// src/index.js
import { render } from 'react-dom';
import App from './App';

const renderApp = () => render(<App />, document.getElementById('root'));
renderApp();

if (module.hot) {
  // 仅接受App模块更新，不触发页面全局刷新
  module.hot.accept('./App', renderApp);
}

内容的提问来源于stack exchange，提问作者Stefan Moraru