如何将非NX工作区的远程微前端应用添加至其Webpack配置？

问题原因 #

NX默认会将remotes数组中的条目视为工作区内的项目，尝试查找对应项目配置，而外部应用不属于NX工作区，因此触发"Could not find project"错误。

解决方案 #

修改NX的Module Federation配置，将外部远程应用以对象形式配置并标记为外部资源，避免NX去工作区查找项目：

1. 更新Module Federation配置文件 #

将原来的数组格式remotes改为对象格式，对外部应用添加external: true属性：

const moduleFederationConfig = {
  name: 'shell',
  remotes: {
    // 工作区内的远程应用可保持原格式或改为对象格式
    reactApp1: 'http://localhost:4201/remoteEntry.mjs',
    reactApp2: 'http://localhost:4202/remoteEntry.js',
    angularApp1: 'http://localhost:4203/remoteEntry.mjs',
    // 外部远程应用的配置
    RemoteReactApp: {
      external: true,
      url: 'http://localhost:4204/remoteEntry.js'
    }
  },
};

module.exports = moduleFederationConfig;

2. 关键验证点 #

• 确认外部应用的remoteEntry.js可通过浏览器正常访问（http://localhost:4204/remoteEntry.js）
• 外部应用的Module Federation配置中name字段必须与宿主配置中的RemoteReactApp完全一致
• 共享依赖（如react、react-dom）的版本和singleton配置需与宿主保持一致，避免运行时冲突

3. 导入远程组件（写法不变） #

在宿主应用中导入外部远程组件的逻辑无需修改：

import { lazy, Suspense } from 'react';

const RemoteApp = lazy(() => import('RemoteReactApp/App'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RemoteApp />
    </Suspense>
  );
}

export default App;

替代方案：手动配置Webpack（可选） #

如果上述方法不生效，可直接在宿主应用的自定义Webpack配置中手动添加ModuleFederationPlugin，绕过NX自动配置：

1. 在宿主应用的project.json中指定自定义Webpack配置路径：

{
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "webpackConfig": "apps/shell/webpack.config.js"
      }
    }
  }
}

2. 在webpack.config.js中手动配置Module Federation：

const { ModuleFederationPlugin } = require('webpack').container;
const dependencies = require('./package.json').dependencies;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        reactApp1: 'http://localhost:4201/remoteEntry.mjs',
        reactApp2: 'http://localhost:4202/remoteEntry.js',
        angularApp1: 'http://localhost:4203/remoteEntry.mjs',
        RemoteReactApp: 'RemoteReactApp@http://localhost:4204/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: { singleton: true, requiredVersion: dependencies.react },
        'react-dom': { singleton: true, requiredVersion: dependencies['react-dom'] }
      }
    })
  ]
};

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