模块联邦微前端宿主加载微应用依赖返回404错误如何解决？

问题根因 #

你的问题由两个配置问题共同导致：

1. 模块联邦共享依赖加载逻辑：你在宿主和微应用的ModuleFederationPlugin中都配置了shared: [deps]，该写法会默认把package.json的dependencies中所有包声明为共享依赖。当微应用在宿主环境运行时，会优先从宿主的共享依赖中加载自己需要的包，而宿主没有安装react-redux和@reduxjs/toolkit，导致模块联邦无法找到对应依赖，触发资源加载请求。
2. 微应用资源路径解析错误：微应用的output.publicPath配置为相对路径/，当在宿主的4000端口环境下触发资源请求时，相对路径会自动拼接当前页面的域名端口，导致请求发到4000端口而不是微应用的4001端口，最终出现404报错。

解决方案 #

第一步：修改微应用的publicPath为绝对路径 #

将微应用webpack配置的output字段改为绝对路径，确保微应用的资源请求始终指向自己的端口：

// 微应用 webpack.config.js
const config: Configuration = {
    mode: 'development',
    output: {
        // 开发环境写微应用的实际访问地址，生产环境替换为对应线上域名
        publicPath: 'http://localhost:4001/'
    },
    // 其余配置保持不变
}

第二步：调整共享依赖配置（二选一即可） #

方案1：优化共享依赖配置（推荐，不增加宿主冗余依赖）

将两侧的shared配置从数组形式改为对象形式，明确指定共享依赖的规则，允许微应用在宿主没有对应依赖时 fallback 到自身的依赖：

// 微应用 webpack.config.js
new ModuleFederationPlugin({
    name: 'mf1',
    filename: 'remoteEntry.js',
    library: {type: 'var', name: 'mf1'},
    exposes: {
        './Mf1App': './src/bootstrap'
    },
    shared: {
        // 展开所有依赖，单独配置公共框架的共享规则
        ...deps,
        react: {
            singleton: true,
            requiredVersion: deps.react
        },
        'react-dom': {
            singleton: true,
            requiredVersion: deps['react-dom']
        },
        'react-redux': {
            singleton: true,
            requiredVersion: deps['react-redux']
        },
        '@reduxjs/toolkit': {
            singleton: true,
            requiredVersion: deps['@reduxjs/toolkit']
        }
    }
}),

宿主的shared配置可以保持不变，或者也对应配置react和react-dom的共享规则即可，不需要安装额外依赖。

方案2：宿主安装对应依赖（简单但不推荐）

如果后续宿主也需要用到redux相关能力，可以直接在宿主项目安装对应依赖，版本尽量和微应用保持一致：

npm i react-redux @reduxjs/toolkit

修改完成后重启两个应用即可正常运行。

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