我目前正在使用Next.js设置一个微前端架构，其中父应用程序使用Next.js，子应用程序使用React。下面是我配置的关键细节：
//React子应用的webpack.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，.] // Simple React app

Next.js配置（next.js.js）：
//host/next.js.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;
  },
};

型
当我尝试在Nextjs应用程序中导入React模块时，

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

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

型
我得到这个错误
模块未找到：无法解析“child/App”
是什么原因导致了这个“Module not found”错误，我该如何解决它，才能成功地将React子应用导入到Next.js父应用中？