NX Nextjs Micro frontend

Question

I am using nx.dev for maintaining monorepo, my project demands MFE with Nextjs. Following @module-federation/nextjs-mf it says it is moved to paid plugin, still i want some solution with open code (without @module-federation/nextjs-mf plugin). I tried to configure webpack property for ModuleFedration which is generating remoteEntry file. but still it is not getting in my browser network calls. How can i make it available for public access ?

I tried to change the publicPath for webpack, but still it is same.

next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  
 distDir: 'build',

  webpack:(config, options) =>{
    config.plugins.push(
      
      new options.webpack.container.ModuleFederationPlugin({
        name:"fe2",
        filename:'remoteEntry_2.js',
        remoteType:"var",
        
        exposes:{
         
        "./remote2":"./components/hello.tsx"
        },
        shared:[
          {
            react: {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          },
          {
            "react-dom": {
              eager: true,
              singleton: true,
              requiredVersion: false,
            }
          }
        ]
      })
    )
 
    return {
      output: {
        ...config.output,
        publicPath: 'http://localhost:4002/',
    },
      ...config
    };
  }
};

module.exports = withNx(nextConfig);

remoteEntry is getting generated in build dir

RemoteEntry is not there in browser's network

Answer 1

I am a bit in the same case as you, was not understanding why it's not showing up on the network.

When running the nextjs app, you cannot access static that are directly on you build folder output, you have to put them in the static folder of your output folder (that was my conclusion)

Here how the nextjs configs looks

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  productionBrowserSourceMaps: true,
  distDir: 'build',
  webpack: (config, context) => {
    return {
      ...config,
      experiments: {
        ...config.experiments,
        topLevelAwait: true,
      },
      plugins: config.plugins.concat(
        new context.webpack.container.ModuleFederationPlugin({
          name: 'microfrontend',
          filename: 'static/chunks/remotes.js', // this is where the magic happen
          remoteType: 'var',
          exposes: {
            // expose all component here.
            './component1': path.resolve(process.cwd(), './src/components/component1'),
            './component2': path.resolve(process.cwd(), './src/components/component2'),
          },
          shared: {
            react: {
              singleton: true,
              strictVersion: true,
              eager: true,
              requiredVersion: dependencies.react,
            },
            'react-dom': {
              singleton: true,
              strictVersion: true,
              eager: true,
              requiredVersion: dependencies['react-dom'],
            },
            ...deps, // coming from a script outside
          },
        }),
      ),
    };
  },
};

in my host app i can then target ${process.env.REMOTE_URL}/static/chunks/remotes.js.

I stil have some issues going on but it seems linked to my remote and its dependencies.

I hope it helps a bit !