From 3f19990cbfcb9949aa35f43cc6ae4da47b319ab6 Mon Sep 17 00:00:00 2001
From: Colum Ferry <cferry09@gmail.com>
Date: Thu, 19 Sep 2024 10:14:33 +0100
Subject: [PATCH] fix(react): normalizing project names for module federation
 correctly #27901

---
 packages/react/src/generators/host/host.ts               | 1 +
 .../generators/host/lib/add-module-federation-files.ts   | 4 ++--
 .../src/generators/remote/lib/setup-tspath-for-remote.ts | 8 ++++----
 packages/react/src/generators/remote/remote.ts           | 9 +++++----
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/generators/host/host.ts b/packages/react/src/generators/host/host.ts
index 633dac3f23f24..66a35449695f1 100644
--- a/packages/react/src/generators/host/host.ts
+++ b/packages/react/src/generators/host/host.ts
@@ -67,6 +67,7 @@ export async function hostGeneratorInternal(
 
   const initTask = await applicationGenerator(host, {
     ...options,
+    name: options.projectName,
     // The target use-case is loading remotes as child routes, thus always enable routing.
     routing: true,
     skipFormat: true,
diff --git a/packages/react/src/generators/host/lib/add-module-federation-files.ts b/packages/react/src/generators/host/lib/add-module-federation-files.ts
index 59dbffdf0b7ff..a422875032c32 100644
--- a/packages/react/src/generators/host/lib/add-module-federation-files.ts
+++ b/packages/react/src/generators/host/lib/add-module-federation-files.ts
@@ -14,7 +14,7 @@ export function addModuleFederationFiles(
   defaultRemoteManifest: { name: string; port: number }[]
 ) {
   const templateVariables = {
-    ...names(options.name),
+    ...names(options.projectName),
     ...options,
     static: !options?.dynamic,
     tmpl: '',
@@ -26,7 +26,7 @@ export function addModuleFederationFiles(
     }),
   };
 
-  const projectConfig = readProjectConfiguration(host, options.name);
+  const projectConfig = readProjectConfiguration(host, options.projectName);
   const pathToMFManifest = joinPathFragments(
     projectConfig.sourceRoot,
     'assets/module-federation.manifest.json'
diff --git a/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts b/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts
index 8c9ef51dbb50c..124ef738adbf1 100644
--- a/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts
+++ b/packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts
@@ -2,16 +2,16 @@ import type { Tree } from '@nx/devkit';
 import { joinPathFragments, readProjectConfiguration } from '@nx/devkit';
 import { addTsConfigPath } from '@nx/js';
 import { maybeJs } from '../../../utils/maybe-js';
-import type { Schema } from '../schema';
+import { NormalizedSchema } from '../../application/schema';
 
-export function setupTspathForRemote(tree: Tree, options: Schema) {
-  const project = readProjectConfiguration(tree, options.name);
+export function setupTspathForRemote(tree: Tree, options: NormalizedSchema) {
+  const project = readProjectConfiguration(tree, options.projectName);
 
   const exportPath = maybeJs(options, './src/remote-entry.ts');
 
   const exportName = 'Module';
 
-  addTsConfigPath(tree, `${options.name}/${exportName}`, [
+  addTsConfigPath(tree, `${options.projectName}/${exportName}`, [
     joinPathFragments(project.root, exportPath),
   ]);
 }
diff --git a/packages/react/src/generators/remote/remote.ts b/packages/react/src/generators/remote/remote.ts
index b993f4acb760b..4d9662239db11 100644
--- a/packages/react/src/generators/remote/remote.ts
+++ b/packages/react/src/generators/remote/remote.ts
@@ -32,7 +32,7 @@ export function addModuleFederationFiles(
   options: NormalizedSchema<Schema>
 ) {
   const templateVariables = {
-    ...names(options.name),
+    ...names(options.projectName),
     ...options,
     tmpl: '',
   };
@@ -113,16 +113,17 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
   if (options.dynamic) {
     // Dynamic remotes generate with library { type: 'var' } by default.
     // We need to ensure that the remote name is a valid variable name.
-    const isValidRemote = isValidVariable(options.name);
+    const isValidRemote = isValidVariable(options.projectName);
     if (!isValidRemote.isValid) {
       throw new Error(
-        `Invalid remote name provided: ${options.name}. ${isValidRemote.message}`
+        `Invalid remote name provided: ${options.projectName}. ${isValidRemote.message}`
       );
     }
   }
 
   const initAppTask = await applicationGenerator(host, {
     ...options,
+    name: options.projectName,
     skipFormat: true,
   });
   tasks.push(initAppTask);
@@ -201,7 +202,7 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
     );
     addRemoteToDynamicHost(
       host,
-      options.name,
+      options.projectName,
       options.devServerPort,
       pathToMFManifest
     );