Module Federation for React host and NextJS remote app example/comfiguration

Question

I didn't find an example for a react host with and nextjs remote app My host is working with a react remote app, now that I'm trying to add a nextjs remote app, it's not working:

• Ports:

  • Host 3000
  • React remote 3001
  • NextJS Remote 3002

• In my host react app I have the following, in the webpack.config.js file

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: {
      },
    }),

And in the remote nextjs app in the next.config.js file

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
});

• And finally, in the App.jsx of the host , I'm trying to consume the remote components like

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

• I have repo here

The error I'm getting its 404 from http://localhost:3000/_next/static/chunks/components_ExposedComponent_js.js

Thanks