fix(module-federation): re-add support for mf aliases

CONTRIBUTING.md

@@ -333,6 +333,7 @@ The scope must be one of the following:
 - express - anything Express specific
 - js - anything related to @nx/js package or general js/ts support
 - linter - anything Linter specific
+- module-federation - anything Nx Module Federation specific
 - nest - anything Nest specific
 - nextjs - anything Next specific
 - node - anything Node specific

packages/angular/src/generators/setup-mf/lib/setup-tspath-for-remote.ts

@@ -2,6 +2,7 @@ import type { Tree } from '@nx/devkit';
 import type { NormalizedOptions } from '../schema';
 import { joinPathFragments, readProjectConfiguration } from '@nx/devkit';
 import { addTsConfigPath } from '@nx/js';
+import { normalizeProjectName } from '@nx/module-federation';
 
 export function setupTspathForRemote(tree: Tree, options: NormalizedOptions) {
   const project = readProjectConfiguration(tree, options.appName);
@@ -12,7 +13,7 @@ export function setupTspathForRemote(tree: Tree, options: NormalizedOptions) {
 
   const exportName = options.standalone ? 'Routes' : 'Module';
 
-  addTsConfigPath(tree, `${options.appName.replace(/-/g, '_')}/${exportName}`, [
+  addTsConfigPath(tree, `${normalizeProjectName(options.appName)}/${exportName}`, [
     joinPathFragments(project.root, exportPath),
   ]);
 }

packages/module-federation/src/executors/utils/start-remote-iterators.ts

@@ -3,6 +3,7 @@ import {
   getBuildTargetNameFromMFDevServer,
   getModuleFederationConfig,
   getRemotes,
+  normalizeProjectName,
   parseStaticRemotesConfig,
   parseStaticSsrRemotesConfig,
   startRemoteProxies,
@@ -65,8 +66,8 @@ export async function startRemoteIterators(
       remotes.devRemotes.map((r) =>
         typeof r === 'string' ? r : r.remoteName
       ) ?? []
-    ).map((r) => r.replace(/-/g, '_')),
-    project.name.replace(/-/g, '_'),
+    ).map((r) => normalizeProjectName(r)),
+    normalizeProjectName(project.name),
   ]);
 
   const staticRemotesConfig = isServer

packages/module-federation/src/plugins/nx-module-federation-plugin/angular/nx-module-federation-plugin.ts

@@ -4,6 +4,7 @@ import {
   NxModuleFederationConfigOverride,
 } from '../../../utils/models';
 import { getModuleFederationConfigSync } from '../../../with-module-federation/angular/utils';
+import { normalizeProjectName } from '../../../utils';
 
 export class NxModuleFederationPlugin implements RspackPluginInstance {
   constructor(
@@ -60,7 +61,7 @@ export class NxModuleFederationPlugin implements RspackPluginInstance {
     }
 
     new (require('@module-federation/enhanced/rspack').ModuleFederationPlugin)({
-      name: this._options.config.name.replace(/-/g, '_'),
+      name: normalizeProjectName(this._options.config.name),
       filename: 'remoteEntry.js',
       exposes: this._options.config.exposes,
       remotes: mappedRemotes,

packages/module-federation/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin.ts

@@ -4,6 +4,7 @@ import {
   NxModuleFederationConfigOverride,
 } from '../../../utils/models';
 import { getModuleFederationConfig } from '../../../with-module-federation/rspack/utils';
+import { normalizeProjectName } from '../../../utils';
 
 export class NxModuleFederationPlugin implements RspackPluginInstance {
   constructor(
@@ -53,7 +54,7 @@ export class NxModuleFederationPlugin implements RspackPluginInstance {
     }
 
     new (require('@module-federation/enhanced/rspack').ModuleFederationPlugin)({
-      name: this._options.config.name.replace(/-/g, '_'),
+      name: normalizeProjectName(this._options.config.name),
       filename: 'remoteEntry.js',
       exposes: this._options.config.exposes,
       remotes: mappedRemotes,

packages/module-federation/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './dependencies';
 export * from './package-json';
 export * from './remotes';
 export * from './models';
+export * from './normalize-project-name';
 export * from './get-remotes-for-host';
 export * from './parse-static-remotes-config';
 export * from './start-remote-proxies';

packages/module-federation/src/utils/normalize-project-name.ts

@@ -0,0 +1,7 @@
+// normalize to allow only JavaScript var valid names
+export function normalizeProjectName(name: string) {
+  // Replace invalid starting characters with '_'
+  const normalized = name.replace(/^[^a-zA-Z_$]/, '_');
+  // Replace invalid subsequent characters with '_'
+  return normalized.replace(/[^a-zA-Z0-9_$]/g, '_');
+}

packages/module-federation/src/utils/public-api.ts

@@ -19,6 +19,8 @@ import {
   shareWorkspaceLibraries,
 } from './share';
 
+import { normalizeProjectName } from './normalize-project-name';
+
 import { mapRemotes, mapRemotesForSSR } from './remotes';
 
 import { getDependentPackagesForProject } from './dependencies';
@@ -43,6 +45,7 @@ export {
   sharePackages,
   mapRemotes,
   mapRemotesForSSR,
+  normalizeProjectName,
   getDependentPackagesForProject,
   readRootPackageJson,
 };

packages/module-federation/src/utils/remotes.spec.ts

@@ -55,4 +55,34 @@ describe('mapRemotes', () => {
       remote3: 'remote3@http://localhost:4203/mf-manifest.json',
     });
   });
+
+  it('should map string remotes using aliases for scoped names', () => {
+    expect(
+      mapRemotes(
+        ['@nx-mf/remote'],
+        'js',
+        (remote) => {
+          return `http://localhost:3001/remoteEntry.js`;
+        },
+        true
+      )
+    ).toEqual({
+      '@nx-mf/remote': '_nx_mf_remote@http://localhost:3001/remoteEntry.js',
+    });
+  });
+
+  it('should map array remotes using aliases for scoped names', () => {
+    expect(
+      mapRemotes(
+        [
+          ['@nx-mf/remote', 'http://localhost:4201/remoteEntry.js'],
+        ],
+        'js',
+        (remote) => remote,
+        true
+      )
+    ).toEqual({
+      '@nx-mf/remote': '_nx_mf_remote@http://localhost:4201/remoteEntry.js',
+    });
+  });
 });

packages/module-federation/src/utils/remotes.ts

@@ -1,5 +1,6 @@
 import { Remotes } from './models';
 import { extname } from 'path';
+import { normalizeProjectName } from './normalize-project-name';
 
 /**
  * Map remote names to a format that can be understood and used by Module
@@ -19,17 +20,15 @@ export function mapRemotes(
 
   for (const nxRemoteProjectName of remotes) {
     if (Array.isArray(nxRemoteProjectName)) {
-      const mfRemoteName = normalizeRemoteName(nxRemoteProjectName[0]);
+      const mfRemoteName = nxRemoteProjectName[0];
       mappedRemotes[mfRemoteName] = handleArrayRemote(
         nxRemoteProjectName,
         remoteEntryExt,
         isRemoteGlobal
       );
     } else if (typeof nxRemoteProjectName === 'string') {
-      const mfRemoteName = normalizeRemoteName(nxRemoteProjectName);
-      mappedRemotes[mfRemoteName] = handleStringRemote(
+      mappedRemotes[nxRemoteProjectName] = handleStringRemote(
         nxRemoteProjectName,
-
         determineRemoteUrl,
         isRemoteGlobal
       );
@@ -46,7 +45,7 @@ function handleArrayRemote(
   isRemoteGlobal: boolean
 ): string {
   const [nxRemoteProjectName, remoteLocation] = remote;
-  const mfRemoteName = normalizeRemoteName(nxRemoteProjectName);
+  const mfRemoteName = normalizeProjectName(nxRemoteProjectName);
 
   // Remote string starts like "promise new Promise(...)" – return as-is
   if (remoteLocation.startsWith('promise new Promise')) {
@@ -75,7 +74,7 @@ function handleStringRemote(
   isRemoteGlobal: boolean
 ): string {
   const globalPrefix = isRemoteGlobal
-    ? `${normalizeRemoteName(nxRemoteProjectName)}@`
+    ? `${normalizeProjectName(nxRemoteProjectName)}@`
     : '';
 
   return `${globalPrefix}${determineRemoteUrl(nxRemoteProjectName)}`;
@@ -99,7 +98,7 @@ export function mapRemotesForSSR(
   for (const remote of remotes) {
     if (Array.isArray(remote)) {
       let [nxRemoteProjectName, remoteLocation] = remote;
-      const mfRemoteName = normalizeRemoteName(nxRemoteProjectName);
+      const mfRemoteName = normalizeProjectName(nxRemoteProjectName);
 
       const resolvedUrl = new URL(remoteLocation);
       const remoteLocationExt = extname(resolvedUrl.pathname);
@@ -115,16 +114,12 @@ export function mapRemotesForSSR(
       const finalRemoteUrl = resolvedUrl.href;
       mappedRemotes[mfRemoteName] = `${mfRemoteName}@${finalRemoteUrl}`;
     } else if (typeof remote === 'string') {
-      const mfRemoteName = normalizeRemoteName(remote);
-      mappedRemotes[mfRemoteName] = `${mfRemoteName}@${determineRemoteUrl(
+      const mfRemoteName = normalizeProjectName(remote);
+      mappedRemotes[remote] = `${mfRemoteName}@${determineRemoteUrl(
         remote
       )}`;
     }
   }
 
   return mappedRemotes;
 }
-
-function normalizeRemoteName(remote: string) {
-  return remote.replace(/-/g, '_');
-}

packages/module-federation/src/with-module-federation/angular/with-module-federation-ssr.ts

@@ -1,6 +1,7 @@
-import type {
-  ModuleFederationConfig,
-  NxModuleFederationConfigOverride,
+import {
+  normalizeProjectName,
+  type ModuleFederationConfig,
+  type NxModuleFederationConfigOverride,
 } from '../../utils';
 import { getModuleFederationConfig } from './utils';
 
@@ -43,7 +44,7 @@ export async function withModuleFederationForSSR(
         ...(config.plugins ?? []),
         new (require('@module-federation/enhanced').ModuleFederationPlugin)(
           {
-            name: options.name.replace(/-/g, '_'),
+            name: normalizeProjectName(this._options.config.name),
             filename: 'remoteEntry.js',
             exposes: options.exposes,
             remotes: mappedRemotes,

packages/module-federation/src/with-module-federation/angular/with-module-federation.ts

@@ -1,6 +1,7 @@
-import type {
-  ModuleFederationConfig,
-  NxModuleFederationConfigOverride,
+import {
+  normalizeProjectName,
+  type ModuleFederationConfig,
+  type NxModuleFederationConfigOverride,
 } from '../../utils';
 import { getModuleFederationConfig } from './utils';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
@@ -45,7 +46,7 @@ export async function withModuleFederation(
       plugins: [
         ...(config.plugins ?? []),
         new ModuleFederationPlugin({
-          name: options.name.replace(/-/g, '_'),
+          name: normalizeProjectName(this._options.config.name),
           filename: 'remoteEntry.mjs',
           exposes: options.exposes,
           remotes: mappedRemotes,

packages/module-federation/src/with-module-federation/rspack/with-module-federation-ssr.ts

@@ -1,6 +1,7 @@
 import { DefinePlugin } from '@rspack/core';
 import {
   ModuleFederationConfig,
+  normalizeProjectName,
   NxModuleFederationConfigOverride,
 } from '../../utils';
 import { getModuleFederationConfig } from './utils';
@@ -36,7 +37,7 @@ export async function withModuleFederationForSSR(
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       new (require('@module-federation/enhanced/rspack').ModuleFederationPlugin)(
         {
-          name: options.name.replace(/-/g, '_'),
+          name: normalizeProjectName(options.name),
           filename: 'remoteEntry.js',
           exposes: options.exposes,
           remotes: mappedRemotes,

packages/module-federation/src/with-module-federation/rspack/with-module-federation.ts

@@ -3,6 +3,7 @@ import type { Configuration } from '@rspack/core';
 import { DefinePlugin } from '@rspack/core';
 import {
   ModuleFederationConfig,
+  normalizeProjectName,
   NxModuleFederationConfigOverride,
 } from '../../utils';
 import { getModuleFederationConfig } from './utils';
@@ -57,7 +58,7 @@ export async function withModuleFederation(
 
     config.plugins.push(
       new ModuleFederationPlugin({
-        name: options.name.replace(/-/g, '_'),
+        name: normalizeProjectName(options.name),
         filename: 'remoteEntry.js',
         exposes: options.exposes,
         remotes: mappedRemotes,

packages/module-federation/src/with-module-federation/webpack/with-module-federation-ssr.ts

@@ -1,5 +1,6 @@
 import {
   ModuleFederationConfig,
+  normalizeProjectName,
   NxModuleFederationConfigOverride,
 } from '../../utils';
 import { getModuleFederationConfig } from './utils';
@@ -32,7 +33,7 @@ export async function withModuleFederationForSSR(
     config.plugins.push(
       new (require('@module-federation/enhanced').ModuleFederationPlugin)(
         {
-          name: options.name.replace(/-/g, '_'),
+          name: normalizeProjectName(options.name),
           filename: 'remoteEntry.js',
           exposes: options.exposes,
           remotes: mappedRemotes,

packages/module-federation/src/with-module-federation/webpack/with-module-federation.ts

@@ -1,5 +1,6 @@
 import {
   ModuleFederationConfig,
+  normalizeProjectName,
   NxModuleFederationConfigOverride,
 } from '../../utils';
 import { getModuleFederationConfig } from './utils';
@@ -43,7 +44,7 @@ export async function withModuleFederation(
 
     config.plugins.push(
       new ModuleFederationPlugin({
-        name: options.name.replace(/-/g, '_'),
+        name: normalizeProjectName(options.name),
         filename: 'remoteEntry.js',
         exposes: options.exposes,
         remotes: mappedRemotes,

packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts

@@ -3,6 +3,7 @@ import { joinPathFragments, readProjectConfiguration } from '@nx/devkit';
 import { addTsConfigPath } from '@nx/js';
 import { maybeJs } from '../../../utils/maybe-js';
 import { NormalizedSchema } from '../../application/schema';
+import { normalizeProjectName } from '@nx/module-federation';
 
 export function setupTspathForRemote(tree: Tree, options: NormalizedSchema) {
   const project = readProjectConfiguration(tree, options.projectName);
@@ -13,7 +14,7 @@ export function setupTspathForRemote(tree: Tree, options: NormalizedSchema) {
 
   addTsConfigPath(
     tree,
-    `${options.projectName.replace(/-/g, '_')}/${exportName}`,
+    `${normalizeProjectName(options.projectName)}/${exportName}`,
     [joinPathFragments(project.root, exportPath)]
   );
 }