bugfix(react): fix react module federation with ssr (#19565)

e2e/react-core/src/react-module-federation.test.ts

@@ -132,6 +132,35 @@ describe('React Module Federation', () => {
     }
   }, 500_000);
 
+  it('should generate host and remote apps with ssr', async () => {
+    const shell = uniq('shell');
+    const remote1 = uniq('remote1');
+    const remote2 = uniq('remote2');
+    const remote3 = uniq('remote3');
+
+    await runCLIAsync(
+      `generate @nx/react:host ${shell} --ssr --remotes=${remote1},${remote2},${remote3} --style=css --no-interactive --projectNameAndRootFormat=derived`
+    );
+
+    expect(readPort(shell)).toEqual(4200);
+    expect(readPort(remote1)).toEqual(4201);
+    expect(readPort(remote2)).toEqual(4202);
+    expect(readPort(remote3)).toEqual(4203);
+
+    [shell, remote1, remote2, remote3].forEach((app) => {
+      checkFilesExist(
+        `apps/${app}/module-federation.config.ts`,
+        `apps/${app}/module-federation.server.config.ts`
+      );
+      ['build', 'server'].forEach((target) => {
+        ['development', 'production'].forEach((configuration) => {
+          const cliOutput = runCLI(`run ${app}:${target}:${configuration}`);
+          expect(cliOutput).toContain('Successfully ran target');
+        });
+      });
+    });
+  }, 500_000);
+
   it('should should support generating host and remote apps with the new name and root format', async () => {
     const shell = uniq('shell');
     const remote = uniq('remote');

packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts

@@ -142,7 +142,7 @@ export default async function* moduleFederationSsrDevServer(
             const remoteServerOutput = join(
               workspaceRoot,
               remoteProject.targets.server.options.outputPath,
-              'main.js'
+              remoteProject.targets.server.options.outputFileName
             );
             const pm = getPackageManagerCommand();
             execSync(

packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__

@@ -4,7 +4,9 @@
     "outDir": "../../out-tsc/server",
     "target": "es2019",
     "types": [
-      "node"
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
     ]
   },
   "include": [

packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__

@@ -4,7 +4,9 @@
     "outDir": "../../out-tsc/server",
     "target": "es2019",
     "types": [
-      "node"
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
     ]
   },
   "include": [

packages/react/src/generators/host/host.spec.ts

@@ -98,7 +98,11 @@ describe('hostGenerator', () => {
       compilerOptions: {
         outDir: '../../out-tsc/server',
         target: 'es2019',
-        types: ['node'],
+        types: [
+          'node',
+          '@nx/react/typings/cssmodule.d.ts',
+          '@nx/react/typings/image.d.ts',
+        ],
       },
       extends: './tsconfig.app.json',
       include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'],
@@ -138,7 +142,11 @@ describe('hostGenerator', () => {
       compilerOptions: {
         outDir: '../../out-tsc/server',
         target: 'es2019',
-        types: ['node'],
+        types: [
+          'node',
+          '@nx/react/typings/cssmodule.d.ts',
+          '@nx/react/typings/image.d.ts',
+        ],
       },
       extends: './tsconfig.app.json',
       include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'],

packages/react/src/generators/host/host.ts

@@ -21,14 +21,20 @@ import { setupSsrForHost } from './lib/setup-ssr-for-host';
 import { updateModuleFederationE2eProject } from './lib/update-module-federation-e2e-project';
 import { NormalizedSchema, Schema } from './schema';
 
-export async function hostGenerator(host: Tree, schema: Schema) {
+export async function hostGenerator(
+  host: Tree,
+  schema: Schema
+): Promise<GeneratorCallback> {
   return hostGeneratorInternal(host, {
     projectNameAndRootFormat: 'derived',
     ...schema,
   });
 }
 
-export async function hostGeneratorInternal(host: Tree, schema: Schema) {
+export async function hostGeneratorInternal(
+  host: Tree,
+  schema: Schema
+): Promise<GeneratorCallback> {
   const tasks: GeneratorCallback[] = [];
   const options: NormalizedSchema = {
     ...(await normalizeOptions<Schema>(host, schema, '@nx/react:host')),
@@ -53,7 +59,7 @@ export async function hostGeneratorInternal(host: Tree, schema: Schema) {
       const remoteName = await normalizeRemoteName(host, remote, options);
       remotesWithPorts.push({ name: remoteName, port: remotePort });
 
-      await remoteGenerator(host, {
+      const remoteTask = await remoteGenerator(host, {
         name: remote,
         directory: normalizeRemoteDirectory(remote, options),
         style: options.style,
@@ -66,6 +72,7 @@ export async function hostGeneratorInternal(host: Tree, schema: Schema) {
         projectNameAndRootFormat: options.projectNameAndRootFormat,
         typescriptConfiguration: options.typescriptConfiguration,
       });
+      tasks.push(remoteTask);
       remotePort++;
     }
   }

packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__

@@ -4,7 +4,9 @@
     "outDir": "../../out-tsc/server",
     "target": "es2019",
     "types": [
-      "node"
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
     ]
   },
   "include": [

packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts

@@ -51,7 +51,7 @@ export async function* ssrDevServerExecutor(
   let nodeStarted = false;
   const combined = combineAsyncIterables(runBrowser, runServer);
 
-  process.env['port'] = `${options.port}`;
+  process.env['PORT'] = `${options.port}`;
 
   for await (const output of combined) {
     if (!output.success) throw new Error('Could not build application');