feat(react): use JS webpack config files for module federation (#19452)

Author: jaysoo

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"],

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"],

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,45 +300,45 @@ 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: {
           './Module': './src/remote-entry.ts',
         },
       };
 
-      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

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"],

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"],