NextJS Microfrontend（MFE） - 解决不正确的揭示

Question

我一直在NextJS MFE上关注博客。但是，我遇到了一个死胡同，并希望提供一些帮助。

我有2个应用程序 - 一个 shell 和其他排名 - app

shell应用程序的 next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
  webpack: (config, options) => {
    const { ModuleFederationPlugin } = options.webpack.container;

    config.plugins.push(
      new ModuleFederationPlugin({
        name: 'webapp',
        remotes: {
          'rankedApp': 'rankedApp@http://localhost:3502/_next/static/chunks/remoteEntry.js'
        }
      })
    );

    config.cache = false;

    return config;
  }
};

module.exports = nextConfig;

但是，当我尝试从 canded

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
  webpack: (config, options) => {
    const { ModuleFederationPlugin } = options.webpack.container;

    config.plugins.push(
      new ModuleFederationPlugin({
        name: 'rankedApp',
        library: {
          type: 'var',
          name: 'rankedApp'
        },
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          './Example': './src/components/Example'
        },
        remotes: {},
        shared: []
      })
    );

    config.cache = false;

    config.output.publicPath = 'http://localhost:3502/_next/';

    return config;
  }
};

module.exports = nextConfig;

-app 中导入示例 component时，排名app 下一个配置代码>从 http：// localhost：3502 加载，但是块请求 src_component_example_tsx.js 是相对于 http：// localhost：3501 代码>有趣的是，它忽略了 publicPath 在排名app 中。我出错的任何指针都可以很高兴看到。

import React, { FC, Fragment } from "react";
import dynamic from 'next/dynamic';

const RankedAppExample = dynamic(
  async () => {
    return await import("rankedApp/Example");
  },
  {
    ssr: false,
    loading: ({ error }) => {
      if (error) {
        return <Fragment>Error</Fragment>;
      }
      return <Fragment>Loading</Fragment>;
    }
  }
);

interface HomeProps {}

const Home: FC<HomeProps> = (props: HomeProps) => {
  return <Fragment>Home <RankedAppExample /></Fragment>;
};

export default Home;