React主机和NextJS远程APP示例/兼容的模块联合会

Question

我没有找到react主机的示例，nextjs远程应用程序 我的主机正在使用React远程应用程序，现在我正在尝试添加nextjs远程应用程序，它无法正常工作：

• 端口：

  • 主机3000
  • React React Remote 3001
  • NextJS远程3002

• 在我的主机React应用中，我有以下内容，在WebPack中.config.js文件

plugins: [
    new ModuleFederationPlugin({
      name: 'react_container',
      filename: 'remoteEntry.js',
      remotes: {
        remote_react: 'remote_react@http://localhost:3001/remoteEntry.js', // <- This is working
        remote_nextjs: 'remote_nextjs@http://localhost:3002/_next/static/chunks/remoteEntry.js', // <- Not working :-(
      },
      exposes: {
        './react': 'react',
        './react-dom': 'react-dom',
      },
      shared: {
      },
    }),

以及远程nextjs app中的next.config.js 文件

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

module.exports = withFederatedSidecar({
  name: "remote_nextjs",
  filename: "static/chunks/remoteEntry.js",
  exposes: {
    "./ExposedComponent": "./components/ExposedComponent",
  },
  shared: {
  },
})({
  // your original next.config.js export
});

• ，最后，在主机的app.jsx中，我正在尝试消耗远程组件，例如

import RemoteNav from 'remote_react/Nav'; // <- Working 
import ExposedComponent from 'remote_nextjs/ExposedComponent'; // <- Not working

• 我有repo 在这里

我从中获得404的错误 http：// localhost：3000/_next/static/components/components_exposedcomponent_js.js

谢谢

Answer 1

从主机的webpack配置中，我可以看到下一个JS应用程序正在端口3002上运行。

当主机试图从下一个JS服务器中获取捆绑包时，下一个JS远程捆绑会获得404错误，它正在击中端口3000而不是3002。这是因为next.config.js没有更新的publicPath。

在//您的原始next.config.js export中添加以下位置

webpack: (config) => {
  config.output.publicPath = "http://localhost:3002/_next/";
  return config;
}

。 /代码>您的下一个JS应用程序到端口3002并正确获取捆绑包。

Answer 2

指，，
在您的远程应用程序的WebPack配置上，SET PublicPath将解决路径问题。

  export default {
    output: {
      publicPath: 'auto',
    },
    plugins: [...],
    ...
  }