From d2fbca60d950f1314db7c6bd8c18ff46953c876f Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Wed, 11 Oct 2023 13:29:02 -0400 Subject: [PATCH] bugfix(react): fix react mfe with ssr --- .../src/react-module-federation.test.ts | 38 +++++++++++++++++++ .../module-federation-ssr-dev-server.impl.ts | 2 +- .../tsconfig.server.json__tmpl__ | 4 +- .../tsconfig.server.json__tmpl__ | 4 +- .../react/src/generators/host/host.spec.ts | 12 +++++- .../files/tsconfig.server.json__tmpl__ | 4 +- .../ssr-dev-server/ssr-dev-server.impl.ts | 2 +- 7 files changed, 59 insertions(+), 7 deletions(-) diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts index 922e9b215525af..6527ad8b27519f 100644 --- a/e2e/react-core/src/react-module-federation.test.ts +++ b/e2e/react-core/src/react-module-federation.test.ts @@ -123,6 +123,44 @@ 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'); + + runCLI( + `g @nx/react:host ${shell} --ssr --remotes=${remote1},${remote2},${remote3} --style=css --no-interactive` + ); + + [shell, remote1, remote2, remote3].forEach((app) => { + checkFilesExist( + `apps/${app}/module-federation.config.js`, + `apps/${app}/module-federation.server.config.js` + ); + ['server', 'build'].forEach((target) => { + ['development', 'production'].forEach((configuration) => { + const cliOutput = runCLI(`run ${app}:${target}:${configuration}`); + expect(cliOutput).toContain('Successfully ran target'); + }); + }); + }); + + expect(readPort(shell)).toEqual(4200); + expect(readPort(remote1)).toEqual(4201); + expect(readPort(remote2)).toEqual(4202); + expect(readPort(remote3)).toEqual(4203); + + if (runE2ETests()) { + const e2eResults = runCLI(`e2e ${shell}-e2e --no-watch --verbose`); + expect(e2eResults).toContain('All specs passed!'); + await killPorts(readPort(shell)); + await killPorts(readPort(remote1)); + await killPorts(readPort(remote2)); + await killPorts(readPort(remote3)); + } + }, 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'); diff --git a/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts b/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts index 72bf329a4a6bad..1654e433b5e1cd 100644 --- a/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts +++ b/packages/react/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts @@ -97,7 +97,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( diff --git a/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ b/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ index 1f18bfb6839a88..db225b7a9981d7 100644 --- a/packages/react/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__ +++ b/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": [ diff --git a/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ b/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ index 1f18bfb6839a88..db225b7a9981d7 100644 --- a/packages/react/src/generators/host/files/module-federation-ssr/tsconfig.server.json__tmpl__ +++ b/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": [ diff --git a/packages/react/src/generators/host/host.spec.ts b/packages/react/src/generators/host/host.spec.ts index e1298de59e7037..9c6aa8bb70be8e 100644 --- a/packages/react/src/generators/host/host.spec.ts +++ b/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'], diff --git a/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ b/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ index 75c75d2c0ce2e1..89c59b83bf7d7e 100644 --- a/packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__ +++ b/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": [ diff --git a/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts b/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts index 324767d0e1d6ed..286705fec6a56d 100644 --- a/packages/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl.ts +++ b/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');