[Bug] umi 4 使用 MF v2 插件问题

[wenghongtian]

umi4中在chainWebpack中使用moduleFederationPlugin启动时报错

What happens?

在.umirc.ts中添加以下配置

import { defineConfig } from "umi";
import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";

const shared = {
  react: {
    singleton: true,
    eager: true,
  },
  "react-dom": {
    singleton: true,
    eager: true,
  },
};

export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: "yarn",
  mfsu: false,
  chainWebpack(memo) {
    memo.plugin("module-federation").use(ModuleFederationPlugin, [
      {
        name: "host",
        filename: "remote.js",
        exposes: {
          "./Button": "./src/exposes/Button/index",
        },
        shared,
      },
    ]);
  },
});

yarn dev运行时出现错误
fatal - Error: Cannot find module '/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/lib/ModuleNotFoundError'
Require stack:

• /Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/resolveMatchedConfigs.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/ConsumeSharedPlugin.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/SharePlugin.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/container/ModuleFederationPlugin.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/wrapper/ModuleFederationPlugin.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/webpack.js
• /Users/wenghongtian/code/umi-federation/host/.umirc.ts
• /Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/core/dist/config/config.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/core/dist/index.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/service/service.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/cli/forkedDev.js
• /Users/wenghongtian/code/umi-federation/host/node_modules/umi/bin/forkedDev.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
  at mod._resolveFilename (/Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/service/requireHook.js:13:26)
  at mod._resolveFilename (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/dist/requireHook.js:47:26)
  at Module._load (node:internal/modules/cjs/loader:984:27)
  at Module.require (node:internal/modules/cjs/loader:1231:19)
  at require (node:internal/modules/helpers:179:18)
  at Object. (/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/resolveMatchedConfigs.js:9:29)
  at Module._compile (node:internal/modules/cjs/loader:1369:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
  at Module.load (node:internal/modules/cjs/loader:1206:32)
  at Module._load (node:internal/modules/cjs/loader:1022:12)
  at Module.require (node:internal/modules/cjs/loader:1231:19)
  at require (node:internal/modules/helpers:179:18)
  at Object. (/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/ConsumeSharedPlugin.js:12:33)
  at Module._compile (node:internal/modules/cjs/loader:1369:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
  at Module.load (node:internal/modules/cjs/loader:1206:32)
  at Module._load (node:internal/modules/cjs/loader:1022:12)
  at Module.require (node:internal/modules/cjs/loader:1231:19)
  at require (node:internal/modules/helpers:179:18)
  at Object. (/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/SharePlugin.js:11:47)
  at Module._compile (node:internal/modules/cjs/loader:1369:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
  at Module.load (node:internal/modules/cjs/loader:1206:32)
  at Module._load (node:internal/modules/cjs/loader:1022:12)
  at Module.require (node:internal/modules/cjs/loader:1231:19)
  at require (node:internal/modules/helpers:179:18)
  at Object. (/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/container/ModuleFederationPlugin.js:14:39)
  at Module._compile (node:internal/modules/cjs/loader:1369:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
  at Module.load (node:internal/modules/cjs/loader:1206:32)
  at Module._load (node:internal/modules/cjs/loader:1022:12)
  at Module.require (node:internal/modules/cjs/loader:1231:19)
  at require (node:internal/modules/helpers:179:18)
  at ModuleFederationPlugin.apply (/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/wrapper/ModuleFederationPlugin.js:16:44)
  at createCompiler (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:177463:12)
  at /Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:177431:48
  at Array.map ()
  at createMultiCompiler (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:177431:33)
  at create (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:177521:16)
  at webpack (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:177554:32)
  at f (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:128966:16)
  at createServer (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/dist/server/server.js:98:47)
  at Proxy.dev (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/bundler-webpack/dist/dev.js:64:40)
  at async Command.fn (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/preset-umi/dist/commands/dev/dev.js:391:9)
  at async Service.run (/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/core/dist/service/service.js:328:15)
  at async Service.run2 (/Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/service/service.js:65:12)
  at async /Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/cli/forkedDev.js:23:5 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/resolveMatchedConfigs.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/ConsumeSharedPlugin.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/sharing/SharePlugin.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/lib/container/ModuleFederationPlugin.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/wrapper/ModuleFederationPlugin.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@module-federation/enhanced/dist/src/webpack.js',
  '/Users/wenghongtian/code/umi-federation/host/.umirc.ts',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/core/dist/config/config.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/@umijs/core/dist/index.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/service/service.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/umi/dist/cli/forkedDev.js',
  '/Users/wenghongtian/code/umi-federation/host/node_modules/umi/bin/forkedDev.js'
  ]
  }
  fatal - A complete log of this run can be found in:
  fatal - /Users/wenghongtian/code/umi-federation/host/node_modules/.cache/logger/umi.log
  fatal - Consider reporting a GitHub issue on https://github.com/umijs/umi/issues

期望：

chainWebpack中支持modulefederation插件使用

Context

• Umi Version: 4.1.10
• Node Version: 20.12.2
• Platform: macos

[lisleyang]

对，我这也是。上个月modulefederation 2.0版本发布了，umi不支持，相同报错。

附上仓库地址：https://github.com/lisleyang/umi-mf2-issue

[fz6m]

你说的对，我在 mf v1.5 的时候就尝试了，目前有两个问题阻碍 umi 4 使用 mf v2 ：

1、umi 4 是预打包了很多依赖，包括 webpack ，而 mf v2 插件内部使用了大量 webpack 的导入，这不受支持。

2、我在源码里调试发现，貌似即使 1 问题解决了，还是打包出来空的 module ，我还没仔细研究为什么。

要解决 2 必须先解决 1 ，解决方案我的想法是新增一个环境变量允许使用自己的 webpack （因为 Nextjs 也预打包了 webpack ，使用 mf v2 就需要使用一个环境变量来跳过内置的，从而使用自己的 webpack），更多信息见 #12358 (comment) 。

解决问题 2 还没有眉目，如有兴趣可以研究问题 2 是为什么导致的，可以先使用 pnpm patch package 或者 pach package 包将 umi 依赖的 @umijs/bundler-webpack 这个包的入口 dist/index.js 中的如下一行注释掉：

import './requireHook';

之后再在项目里安装 webpack 就可以解决 1 了。

之后关闭 mfsu: false 排除干扰，且不要使用 esbuild 压缩器（配置 jsMinifier 为 terser ，这是因为 esbuild 压缩会多一层 iife 的自执行函数壳子导致 remote js 里的变量没法暴露出来，当然也可以配 library type 为 window 想办法绕过它），然后添加 exposes 之后打包，之前我尝试的时候，发现产物里没法成功打包 expose 的内容，显示为 Module not found ，通过配置 COMPRESS=none umi build 来不压缩查看产物。

至于为什么 module not found ，我还没进一步研究，这可能和 mf v2 插件有关，或者 umi 的某些 webpack 配置有关，如有兴趣，可以进一步研究，在此帖子跟进、反馈、交流。

如果问题 2 module not found 问题解决了，我会尽量推进问题 1 解决的进行。

[wenghongtian]

看起来是@umijs/bundler-webpack中使用了内置的webpack问题，我更改了@umijs/bundler-webpack中的源码，让他支持使用外部的webpack，link到本地项目中使用，解决了Module Not Found的问题，不过这也仅解决了pnpm build能产生正确的产物，dev阶段的webpack-dev-middleware也依赖了内部的webpack，这个就有点难解决了。

[wenghongtian]

这是一个可运行demo，同时希望能暴露一下react-refresh的option配置，通过更改libraryName可以实现热更。
https://github.com/wenghongtian/umi-federation
@fz6m

[fz6m]

感谢你提供的例子，但最近我非常忙，不会马上处理需要花时间的开源 issue ，周末有空再弄下。

[fz6m]

你提到的 react refresh 选项是用来做什么的，和 mf 的热更新有什么关系吗，我在 mf 的文档中没找到。

[wenghongtian]

开发环境中，同时开发本地模块和远程模块时都使用了react-refresh-webpack-plugin，远程模块需要修改option中的library才能热更生效

new ReactRefreshWebpackPlugin({
    library: pkg.name,
  }),

[fz6m]

这个地方可以通过 webpack chain 来改，文档详见：webpack-chain > Config plugins: modify arguments

位置在：

  if (useFastRefresh) {
    config
      .plugin('fastRefresh')
      .after('hmr')
      .use(FastRefreshPlugin, [{ overlay: false }]);
  }

另外我看 react refresh webpack plugin 的文档，他会 fallback 取 output.uniqueName ，所以你设定这个也行。

关于 webpack mf v2 的 PR ，虽然有了，但改动比较多，最近没人 care 这个事情，这个 issue 也没什么人参与，可能短期不会合入发布。