微前端集成问题：Next.js父应用导入React子应用时模块未找到

问题背景 #

我正在搭建以Next.js为父应用、React为子应用的微前端架构，关键配置如下：

React子应用的webpack.config.js #

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    static: path.join(__dirname, "dist"),
    port: 3001,
  },
  resolve: {
    extensions: [".jsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.svg$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "child",
      filename: "remote.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        next: {
          singleton: true,
          requiredVersion: deps["next"],
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["main"],
    }),
  ],
};

子应用采用常规文件夹结构：

• [App.js, index.js, ...] // 简单React应用

Next.js宿主应用的next.config.js #

const { NextFederationPlugin } = require("@module-federation/nextjs-mf");

const nextConfig = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    config.plugins.push(
      new NextFederationPlugin({
        name: "host",
        filename: "static/chunks/remoteEntry.js",
        remotes: {
          child: "child",
        },
        exposes: {},
      })
    );

    return config;
  },
};

导入子应用的代码 #

import Image from "next/image";
import dynamic from "next/dynamic";
const HomePage = dynamic(() => import("child/App"), { ssr: false });

export default function Home() {
  return (
    <HomePage />
  );
}

运行后出现错误：Module not found: Can't resolve 'child/App'

原因分析 #

1. remotes配置不完整：Next.js宿主应用的remotes仅指定了子应用名称child，没有提供子应用remote.js的实际访问地址，Webpack无法定位到子应用的模块。
2. 不必要的依赖共享：React子应用的shared配置中包含了next依赖，但子应用是纯React应用，不需要依赖Next.js，这会导致依赖解析冲突。
3. 子应用未正确启动：如果子应用的devServer未启动，或者remote.js无法被访问，宿主应用也无法加载子应用模块。

解决步骤 #

1. 修正Next.js宿主应用的remotes配置 #

修改host/next.config.js中的remotes字段，指定子应用remote.js的完整URL：

remotes: {
  child: `child@http://localhost:3001/remote.js`,
},

这里child@是子应用在ModuleFederationPlugin中定义的name值，后面跟着子应用devServer的地址和remote.js文件名。

2. 移除React子应用中不必要的next共享依赖 #

修改子应用的webpack.config.js，删除shared中的next配置：

shared: {
  react: {
    singleton: true,
    requiredVersion: deps.react,
  },
  "react-dom": {
    singleton: true,
    requiredVersion: deps["react-dom"],
  },
},

3. 确保子应用正常启动并可访问remote.js #

启动React子应用的开发服务器（执行npm run start），然后在浏览器中访问http://localhost:3001/remote.js，确认文件能正常加载。

4. 重启Next.js宿主应用 #

重启Next.js应用，确保配置生效，此时应该能正常导入并渲染子应用的App组件。

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