反应主机和NextJS远程应用程序示例/配置模块联合会

Question

我没有找到一个react主机和nextjs远程应用程序的例子，我的主机正在使用一个react远程应用程序，现在我正在尝试添加一个nextjs远程应用程序，它不起作用：

• 港口：

- Host `3000`
- React remote `3001`
- NextJS Remote `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应用程序中的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

• 我有回购这里

我从js.js得到它的404错误

​

​

谢谢

Answer 1

参考https://webpack.js.org/guides/public-path/，在远程应用程序的webpack配置中，设置publicPath将修复路径问题。

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