Reports

Thanks to the solution raised by Ian, I was able to fix the problem, in this case, I had to add the uniqueName property and change the name property of my next.config.js as follows:

/* eslint-disable @typescript-eslint/ban-ts-comment */
//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

// @ts-expect-error
const remotes = (isServer) => {
  const location = isServer ? 'ssr' : 'chunks';

  return {
    management: `management-app@http://localhost:3001/_next/static/${location}/remoteEntry.js`,
  };
}

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: { svgr: false },
  transpilePackages: ["@ui"],
  productionBrowserSourceMaps: true,
  webpack: (config, options) => {
    config.output.uniqueName = 'main-app';
    config.plugins.push(
        new NextFederationPlugin({
          name: 'main-app',
          filename: 'static/chunks/remoteEntry.js',
          remotes: remotes(options.isServer),
          extraOptions: { exposePages: true },
          exposes: {
            './toastStore': './stores/toast.store',
          },
          shared: ["zustand"],
        })
    );

    return config;
  }
};

const plugins = [ withNx ];

module.exports = composePlugins(...plugins)(nextConfig);

Apparently the name property was generating a conflict with the name defined in my project.json

{
  "name": "main",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/main",
  "projectType": "application",
  "tags": [],
  "// targets": "to see all targets run: nx show project main --web",
  "targets": {
    "dev": {
      "executor": "@nx/next:server",
      "options": {
        "port": 3000,
        "buildTarget": "main:build",
        "dev" : true
      }
    }
  }
}

79477794