• Структуру Nx и базовый принцип работы трогать не будем. Предполагается, что вы уже с этим знакомы;

• Для сборки используем Webpack;

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@nx/react/module-federation');

const baseConfig = require('./module-federation.config');

const prodConfig = {
  ...baseConfig,
  remotes: [
    ['org', 'http://localhost:4201/'],
    ['name', 'http://localhost:4202/'],
  ],
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(prodConfig)
);

module.exports = {
  name: 'main',
  remotes: ['org', 'name'],
};

// Declare your remote Modules here
// Example declare module 'about/Module';

declare module 'org/Module';
declare module 'name/Module';

import * as React from 'react';
import styles from './app.module.scss';

import { Link, Route, Routes } from 'react-router-dom';

const OrgPage = React.lazy(() => import('org/Module'));

const NamePage = React.lazy(() => import('name/Module'));

export function App() {
  return (
    <React.Suspense fallback={null}>
      <main className={styles.content}>
        <nav>
          <ul className={styles.nav}>
            <li>
              <Link className={styles.navlink} to="/org">
                Org
              </Link>
            </li>

            <li>
              <Link className={styles.navlink} to="/name">
                Name
              </Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/org" element={<OrgPage />} />

          <Route path="/name" element={<NamePage />} />
        </Routes>
      </main>
    </React.Suspense>
  );
}

export default App;

module.exports = {
  name: 'org',
  exposes: {
    './Module': './src/remote-entry.ts',
  },
};

export { default } from './app/app';

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@nx/react/module-federation');

const baseConfig = require('./module-federation.config');

const config = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config)
);

module.exports = require('./webpack.config');

{
  "name": "org",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/org/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/org",
        "index": "apps/org/src/index.html",
        "baseHref": "/",
        "main": "apps/org/src/main.ts",
        "tsConfig": "apps/org/tsconfig.app.json",
        "assets": ["apps/org/src/favicon.ico", "apps/org/src/assets"],
        "styles": ["apps/org/src/styles.scss"],
        "scripts": [],
        "isolatedConfig": true,
        "webpackConfig": "apps/org/webpack.config.js"
      },
      "configurations": {
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/org/src/environments/environment.ts",
              "with": "apps/org/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "webpackConfig": "apps/org/webpack.config.prod.js"
        }
      }
    },
    "serve": {
      "executor": "@nx/react:module-federation-dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "org:build",
        "hmr": true,
        "port": 4201
      },
      "configurations": {
        "development": {
          "buildTarget": "org:build:development"
        },
        "production": {
          "buildTarget": "org:build:production",
          "hmr": false
        }
      }
    },
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/org/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "serve-static": {
      "executor": "@nx/web:file-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "org:build",
        "port": 4201
      },
      "configurations": {
        "development": {
          "buildTarget": "org:build:development"
        },
        "production": {
          "buildTarget": "org:build:production"
        }
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/org/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    }
  },
  "tags": []
}