From f04519996cf8d1cf1c34153f2030aff47b60eaa1 Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Wed, 4 Oct 2023 17:43:02 -0400 Subject: [PATCH] feat(react): use JS webpack config files for module federation (#19452) --- .../packages/react/generators/host.json | 2 +- .../packages/react/generators/remote.json | 2 +- .../src/react-module-federation.test.ts | 70 +++++++++---------- .../react/src/generators/host/schema.json | 2 +- .../react/src/generators/remote/schema.json | 2 +- 5 files changed, 37 insertions(+), 41 deletions(-) diff --git a/docs/generated/packages/react/generators/host.json b/docs/generated/packages/react/generators/host.json index 38150a0a55eea..c527229e651e2 100644 --- a/docs/generated/packages/react/generators/host.json +++ b/docs/generated/packages/react/generators/host.json @@ -164,7 +164,7 @@ "typescriptConfiguration": { "type": "boolean", "description": "Whether the module federation configuration and webpack configuration files should use TS.", - "default": true + "default": false } }, "required": ["name"], diff --git a/docs/generated/packages/react/generators/remote.json b/docs/generated/packages/react/generators/remote.json index af929e51d825c..43979004e2d93 100644 --- a/docs/generated/packages/react/generators/remote.json +++ b/docs/generated/packages/react/generators/remote.json @@ -162,7 +162,7 @@ "typescriptConfiguration": { "type": "boolean", "description": "Whether the module federation configuration and webpack configuration files should use TS.", - "default": true + "default": false } }, "required": ["name"], diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts index 05220b9b5cd44..75f87080b6c8b 100644 --- a/e2e/react-core/src/react-module-federation.test.ts +++ b/e2e/react-core/src/react-module-federation.test.ts @@ -2,6 +2,7 @@ import { stripIndents } from '@nx/devkit'; import { checkFilesExist, cleanupProject, + killPorts, killProcessAndPorts, newProject, readJson, @@ -39,10 +40,10 @@ describe('React Module Federation', () => { `generate @nx/react:remote ${remote3} --style=css --host=${shell} --no-interactive` ); - checkFilesExist(`apps/${shell}/module-federation.config.ts`); - checkFilesExist(`apps/${remote1}/module-federation.config.ts`); - checkFilesExist(`apps/${remote2}/module-federation.config.ts`); - checkFilesExist(`apps/${remote3}/module-federation.config.ts`); + checkFilesExist(`apps/${shell}/module-federation.config.js`); + checkFilesExist(`apps/${remote1}/module-federation.config.js`); + checkFilesExist(`apps/${remote2}/module-federation.config.js`); + checkFilesExist(`apps/${remote3}/module-federation.config.js`); await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({ combinedOutput: expect.stringContaining('Test Suites: 1 passed, 1 total'), @@ -54,15 +55,15 @@ describe('React Module Federation', () => { expect(readPort(remote3)).toEqual(4203); updateFile( - `apps/${shell}/webpack.config.ts`, + `apps/${shell}/webpack.config.js`, stripIndents` - import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack'; - import { withReact } from '@nx/react'; - import { withModuleFederation } from '@nx/react/module-federation'); + const { composePlugins, withNx, ModuleFederationConfig } = require('@nx/webpack'); + const { withReact } = require('@nx/react'); + const { withModuleFederation } = require('@nx/react/module-federation'); const baseConfig = require('./module-federation.config'); - const config: ModuleFederationConfig = { + const config = { ...baseConfig, remotes: [ '${remote1}', @@ -106,20 +107,15 @@ describe('React Module Federation', () => { }); ` ); - // TODO(caleb): cypress isn't able to find the element and then throws error with an address already in use error. - // https://staging.nx.app/runs/ASAokpXhnE/task/e2e-react:e2e - // if (runCypressTests()) { - // const e2eResults = runCLI(`e2e ${shell}-e2e --no-watch --verbose`); - // expect(e2eResults).toContain('All specs passed!'); - // expect( - // await killPorts([ - // readPort(shell), - // readPort(remote1), - // readPort(remote2), - // readPort(remote3), - // ]) - // ).toBeTruthy(); - // } + + 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 () => { @@ -136,8 +132,8 @@ describe('React Module Federation', () => { // check files are generated without the layout directory ("apps/") and // using the project name as the directory when no directory is provided - checkFilesExist(`${shell}/module-federation.config.ts`); - checkFilesExist(`${remote}/module-federation.config.ts`); + checkFilesExist(`${shell}/module-federation.config.js`); + checkFilesExist(`${remote}/module-federation.config.js`); // check default generated host is built successfully const buildOutput = runCLI(`run ${shell}:build:development`); @@ -304,31 +300,31 @@ describe('React Module Federation', () => { // update host and remote to use library type var updateFile( - `${shell}/module-federation.config.ts`, + `${shell}/module-federation.config.js`, stripIndents` - import { ModuleFederationConfig } from '@nx/webpack'; + const { ModuleFederationConfig } = require('@nx/webpack'); - const config: ModuleFederationConfig = { + const config = { name: '${shell}', library: { type: 'var', name: '${shell}' }, remotes: ['${remote}'], }; - export default config; + module.exports = config; ` ); updateFile( - `${shell}/webpack.config.prod.ts`, - `export { default } from './webpack.config';` + `${shell}/webpack.config.prod.js`, + `module.exports = require('./webpack.config');` ); updateFile( - `${remote}/module-federation.config.ts`, + `${remote}/module-federation.config.js`, stripIndents` - import { ModuleFederationConfig } from '@nx/webpack'; + const { ModuleFederationConfig } = require('@nx/webpack'); - const config: ModuleFederationConfig = { + const config = { name: '${remote}', library: { type: 'var', name: '${remote}' }, exposes: { @@ -336,13 +332,13 @@ describe('React Module Federation', () => { }, }; - export default config; + module.exports = config; ` ); updateFile( - `${remote}/webpack.config.prod.ts`, - `export { default } from './webpack.config';` + `${remote}/webpack.config.prod.js`, + `module.exports = require('./webpack.config');` ); // Update host e2e test to check that the remote works with library type var via navigation diff --git a/packages/react/src/generators/host/schema.json b/packages/react/src/generators/host/schema.json index f4aa838a2b4c6..53baa73d8b018 100644 --- a/packages/react/src/generators/host/schema.json +++ b/packages/react/src/generators/host/schema.json @@ -170,7 +170,7 @@ "typescriptConfiguration": { "type": "boolean", "description": "Whether the module federation configuration and webpack configuration files should use TS.", - "default": true + "default": false } }, "required": ["name"], diff --git a/packages/react/src/generators/remote/schema.json b/packages/react/src/generators/remote/schema.json index b17641d08b353..cddc83ddea322 100644 --- a/packages/react/src/generators/remote/schema.json +++ b/packages/react/src/generators/remote/schema.json @@ -168,7 +168,7 @@ "typescriptConfiguration": { "type": "boolean", "description": "Whether the module federation configuration and webpack configuration files should use TS.", - "default": true + "default": false } }, "required": ["name"],