Module Federation+React项目中React Router Dom非根路由不生效问题

核心问题1：webpack资源加载路径错误 #

你未在webpack配置中指定output.publicPath，且historyApiFallback配置有误，导致非根路径访问时，js bundle资源加载路径错误：

• 访问/auth时，webpack会尝试从/auth/[bundle名].js加载资源，而非根路径下的js文件，资源加载失败但未触发明显报错（返回的404页面为html格式，被当作js解析后无明显控制台输出）

核心问题2：Module Federation共享依赖配置不规范 #

你直接将整个dependencies作为共享依赖，未为react、react-dom、react-router-dom这类全局单例依赖指定singleton: true，可能导致依赖多实例加载，路由上下文失效。

额外兼容问题 #

你安装的@types/react-router-dom为v5版本，与实际使用的react-router-dom v6不匹配，v6已内置类型定义，无需额外安装类型包。

具体修复步骤 #

1. 修改webpack.dev.js配置 #

添加output.publicPath，修正historyApiFallback，优化共享依赖配置：

const { merge } = require("webpack-merge");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const commonConfig = require("./webpack.common");
const { dependencies } = require("../package.json");

const devConfig = {
  mode: "development",
  // 新增output配置指定公共路径
  output: {
    publicPath: "http://localhost:3000/",
  },
  devServer: {
    port: 3000,
    // 修正historyApiFallback配置，直接设为true即可默认回退到/index.html
    historyApiFallback: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {},
      // 优化共享依赖配置，单例依赖强制单例
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
        "react-router-dom": {
          singleton: true,
          requiredVersion: dependencies["react-router-dom"],
        }
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);

2. 移除冗余的类型依赖 #

执行以下命令卸载v5版本的react-router-dom类型包：

npm uninstall @types/react-router-dom
# 或yarn remove @types/react-router-dom

3. 验证修复 #

重启webpack devServer，访问/auth路径即可正常渲染对应组件。

内容的提问来源于stack exchange，提问作者Diego Davincci