fix(react): fix js for module federation

docs/generated/packages/react/generators/federate-module.json

@@ -69,7 +69,8 @@
       "e2eTestRunner": {
         "type": "string",
         "enum": ["cypress", "playwright", "none"],
-        "description": "Test runner to use for end to end (e2e) tests.",
+        "description": "Test runner to use for end to end (E2E) tests.",
+        "x-prompt": "Which E2E test runner would you like to use?",
         "default": "cypress"
       },
       "host": {

docs/generated/packages/react/generators/host.json

@@ -94,7 +94,8 @@
       "e2eTestRunner": {
         "type": "string",
         "enum": ["cypress", "playwright", "none"],
-        "description": "Test runner to use for end to end (e2e) tests.",
+        "description": "Test runner to use for end to end (E2E) tests.",
+        "x-prompt": "Which E2E test runner would you like to use?",
         "default": "cypress"
       },
       "tags": {
@@ -164,7 +165,7 @@
       },
       "typescriptConfiguration": {
         "type": "boolean",
-        "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+        "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.",
         "default": true
       }
     },

docs/generated/packages/react/generators/remote.json

@@ -100,7 +100,8 @@
       "e2eTestRunner": {
         "type": "string",
         "enum": ["cypress", "playwright", "none"],
-        "description": "Test runner to use for end to end (e2e) tests.",
+        "description": "Test runner to use for end to end (E2E) tests.",
+        "x-prompt": "Which E2E test runner would you like to use?",
         "default": "cypress"
       },
       "tags": {
@@ -163,7 +164,7 @@
       },
       "typescriptConfiguration": {
         "type": "boolean",
-        "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+        "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.",
         "default": true
       }
     },

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

@@ -65,9 +65,10 @@ describe('React Module Federation', () => {
           ),
         });
 
-        updateFile(
-          `apps/${shell}/webpack.config.${js ? 'js' : 'ts'}`,
-          stripIndents`
+        if (js) {
+          updateFile(
+            `apps/${shell}/webpack.config.js`,
+            stripIndents`
         const { composePlugins, withNx } = require('@nx/webpack');
         const { withReact } = require('@nx/react');
         const { withModuleFederation } = require('@nx/react/module-federation');
@@ -86,7 +87,31 @@ describe('React Module Federation', () => {
         // Nx plugins for webpack to build config object from Nx options and context.
         module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));
       `
-        );
+          );
+        } else {
+          updateFile(
+            `apps/${shell}/webpack.config.ts`,
+            stripIndents`
+        import { composePlugins, withNx } from '@nx/webpack';
+        import { withReact } from '@nx/react';
+        import { withModuleFederation } from '@nx/react/module-federation';
+        
+        import baseConfig from './module-federation.config';
+        
+        const config = {
+          ...baseConfig,
+              remotes: [
+                '${remote1}',
+                ['${remote2}', 'http://localhost:${defaultRemotePort}/${remote2}/remoteEntry.js'],
+                ['${remote3}', 'http://localhost:${defaultRemotePort}/${remote3}/remoteEntry.js'],
+              ],
+        };
+
+        // Nx plugins for webpack to build config object from Nx options and context.
+        export default composePlugins(withNx(), withReact(), withModuleFederation(config));
+      `
+          );
+        }
 
         updateFile(
           `apps/${shell}-e2e/src/integration/app.spec.${js ? 'js' : 'ts'}`,
@@ -117,6 +142,23 @@ describe('React Module Federation', () => {
       `
         );
 
+        [shell, remote1, remote2, remote3].forEach((app) => {
+          ['development', 'production'].forEach(async (configuration) => {
+            const cliOutput = runCLI(`run ${app}:build:${configuration}`);
+            expect(cliOutput).toContain('Successfully ran target');
+          });
+        });
+
+        const serveResult = await runCommandUntil(`serve ${shell}`, (output) =>
+          output.includes(`http://localhost:${readPort(shell)}`)
+        );
+
+        await killProcessAndPorts(
+          serveResult.pid,
+          readPort(shell),
+          defaultRemotePort
+        );
+
         if (runE2ETests()) {
           const e2eResultsSwc = await runCommandUntil(
             `e2e ${shell}-e2e --no-watch --verbose`,

packages/react/src/generators/application/application.ts

@@ -3,7 +3,7 @@ import { NormalizedSchema, Schema } from './schema';
 import { createApplicationFiles } from './lib/create-application-files';
 import { updateSpecConfig } from './lib/update-jest-config';
 import { normalizeOptions } from './lib/normalize-options';
-import { addProject, maybeJs } from './lib/add-project';
+import { addProject } from './lib/add-project';
 import { addJest } from './lib/add-jest';
 import { addRouting } from './lib/add-routing';
 import { setDefaults } from './lib/set-defaults';
@@ -27,6 +27,7 @@ import {
   nxRspackVersion,
   nxVersion,
 } from '../../utils/versions';
+import { maybeJs } from '../../utils/maybe-js';
 import { installCommonDependencies } from './lib/install-common-dependencies';
 import { extractTsConfigBase } from '../../utils/create-ts-config';
 import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';

packages/react/src/generators/application/lib/add-project.ts

@@ -7,6 +7,7 @@ import {
   Tree,
 } from '@nx/devkit';
 import { hasWebpackPlugin } from '../../../utils/has-webpack-plugin';
+import { maybeJs } from '../../../utils/maybe-js';
 
 export function addProject(host: Tree, options: NormalizedSchema) {
   const project: ProjectConfiguration = {
@@ -31,12 +32,6 @@ export function addProject(host: Tree, options: NormalizedSchema) {
   });
 }
 
-export function maybeJs(options: NormalizedSchema, path: string): string {
-  return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-    ? path.replace(/\.tsx?$/, '.js')
-    : path;
-}
-
 function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
   return {
     executor: '@nx/webpack:webpack',

packages/react/src/generators/application/lib/add-routing.ts

@@ -1,13 +1,14 @@
-import { addInitialRoutes } from '../../../utils/ast-utils';
-import { NormalizedSchema } from '../schema';
-import { reactRouterDomVersion } from '../../../utils/versions';
 import {
   joinPathFragments,
   Tree,
   applyChangesToString,
   addDependenciesToPackageJson,
 } from '@nx/devkit';
 import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
+import { addInitialRoutes } from '../../../utils/ast-utils';
+import { reactRouterDomVersion } from '../../../utils/versions';
+import { maybeJs } from '../../../utils/maybe-js';
+import { NormalizedSchema } from '../schema';
 
 let tsModule: typeof import('typescript');
 
@@ -47,9 +48,3 @@ export function addRouting(host: Tree, options: NormalizedSchema) {
 
   return () => {};
 }
-
-function maybeJs(options: NormalizedSchema, path: string): string {
-  return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-    ? path.replace(/\.tsx?$/, '.js')
-    : path;
-}

packages/react/src/generators/application/lib/create-application-files.ts

@@ -7,16 +7,16 @@ import {
   Tree,
   writeJson,
 } from '@nx/devkit';
+import { WithNxOptions } from '@nx/webpack';
 import { getRelativePathToRootTsConfig } from '@nx/js';
 import { join } from 'path';
 import { createTsConfig } from '../../../utils/create-ts-config';
 import { getInSourceVitestTestsTemplate } from '../../../utils/get-in-source-vitest-tests-template';
-import { NormalizedSchema } from '../schema';
-import { getAppTests } from './get-app-tests';
-import { maybeJs } from './add-project';
+import { maybeJs } from '../../../utils/maybe-js';
 import { WithReactOptions } from '../../../../plugins/with-react';
-import { WithNxOptions } from '@nx/webpack';
 import { hasWebpackPlugin } from '../../../utils/has-webpack-plugin';
+import { NormalizedSchema } from '../schema';
+import { getAppTests } from './get-app-tests';
 
 export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   let styleSolutionSpecificAppFiles: string;

packages/react/src/generators/application/lib/update-jest-config.ts

@@ -1,3 +1,4 @@
+import { maybeJs } from '../../../utils/maybe-js';
 import { updateJestConfigContent } from '../../../utils/jest-utils';
 import { NormalizedSchema } from '../schema';
 import { Tree, updateJson } from '@nx/devkit';
@@ -26,9 +27,10 @@ export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
     return;
   }
 
-  const configPath = `${options.appProjectRoot}/jest.config.${
-    options.js ? 'js' : 'ts'
-  }`;
+  const configPath = maybeJs(
+    options,
+    `${options.appProjectRoot}/jest.config.ts`
+  );
   const originalContent = host.read(configPath, 'utf-8');
   const content = updateJestConfigContent(originalContent);
   host.write(configPath, content);

packages/react/src/generators/federate-module/federate-module.spec.ts

@@ -44,10 +44,10 @@ describe('federate-module', () => {
     it('should contain an entry for the new path for module federation', async () => {
       await federateModuleGenerator(tree, schema);
 
-      expect(tree.exists('my-remote/module-federation.config.js')).toBe(true);
+      expect(tree.exists('my-remote/module-federation.config.ts')).toBe(true);
 
       const content = tree.read(
-        'my-remote/module-federation.config.js',
+        'my-remote/module-federation.config.ts',
         'utf-8'
       );
       expect(content).toContain(
@@ -89,7 +89,7 @@ describe('federate-module', () => {
 
     it('should append the new path to the module federation config', async () => {
       let content = tree.read(
-        `${remoteSchema.name}/module-federation.config.js`,
+        `${remoteSchema.name}/module-federation.config.ts`,
         'utf-8'
       );
 
@@ -103,7 +103,7 @@ describe('federate-module', () => {
       });
 
       content = tree.read(
-        `${remoteSchema.name}/module-federation.config.js`,
+        `${remoteSchema.name}/module-federation.config.ts`,
         'utf-8'
       );
       expect(content).toContain(

packages/react/src/generators/federate-module/schema.json

@@ -69,7 +69,8 @@
     "e2eTestRunner": {
       "type": "string",
       "enum": ["cypress", "playwright", "none"],
-      "description": "Test runner to use for end to end (e2e) tests.",
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
       "default": "cypress"
     },
     "host": {

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

@@ -39,7 +39,10 @@ export async function hostGeneratorInternal(
   const tasks: GeneratorCallback[] = [];
   const options: NormalizedSchema = {
     ...(await normalizeOptions<Schema>(host, schema, '@nx/react:host')),
-    typescriptConfiguration: schema.typescriptConfiguration ?? true,
+    js: schema.js ?? false,
+    typescriptConfiguration: schema.js
+      ? false
+      : schema.typescriptConfiguration ?? true,
     dynamic: schema.dynamic ?? false,
     // TODO(colum): remove when MF works with Crystal
     addPlugin: false,

packages/react/src/generators/host/lib/add-module-federation-files.ts

@@ -1,11 +1,12 @@
-import { NormalizedSchema } from '../schema';
 import {
   Tree,
   generateFiles,
   joinPathFragments,
   names,
   readProjectConfiguration,
 } from '@nx/devkit';
+import { maybeJs } from '../../../utils/maybe-js';
+import { NormalizedSchema } from '../schema';
 
 export function addModuleFederationFiles(
   host: Tree,
@@ -35,13 +36,10 @@ export function addModuleFederationFiles(
   // Renaming original entry file so we can use `import(./bootstrap)` in
   // new entry file.
   host.rename(
+    joinPathFragments(options.appProjectRoot, maybeJs(options, 'src/main.tsx')),
     joinPathFragments(
       options.appProjectRoot,
-      `src/main.${options.js ? 'js' : 'tsx'}`
-    ),
-    joinPathFragments(
-      options.appProjectRoot,
-      `src/bootstrap.${options.js ? 'js' : 'tsx'}`
+      maybeJs(options, 'src/bootstrap.tsx')
     )
   );
 
@@ -55,10 +53,9 @@ export function addModuleFederationFiles(
     templateVariables
   );
 
-  const pathToModuleFederationFiles =
-    options.typescriptConfiguration && !options.js
-      ? 'module-federation-ts'
-      : 'module-federation';
+  const pathToModuleFederationFiles = options.typescriptConfiguration
+    ? 'module-federation-ts'
+    : 'module-federation';
   // New entry file is created here.
   generateFiles(
     host,

packages/react/src/generators/host/schema.json

@@ -100,7 +100,8 @@
     "e2eTestRunner": {
       "type": "string",
       "enum": ["cypress", "playwright", "none"],
-      "description": "Test runner to use for end to end (e2e) tests.",
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
       "default": "cypress"
     },
     "tags": {
@@ -170,7 +171,7 @@
     },
     "typescriptConfiguration": {
       "type": "boolean",
-      "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.",
       "default": true
     }
   },

packages/react/src/generators/library/lib/add-rollup-build-target.ts

@@ -9,13 +9,13 @@ import {
   updateProjectConfiguration,
 } from '@nx/devkit';
 
-import { maybeJs } from './maybe-js';
-import { NormalizedSchema } from '../schema';
+import { maybeJs } from '../../../utils/maybe-js';
 import {
   nxVersion,
   rollupPluginUrlVersion,
   svgrRollupVersion,
 } from '../../../utils/versions';
+import { NormalizedSchema } from '../schema';
 
 export async function addRollupBuildTarget(
   host: Tree,

packages/react/src/generators/library/lib/update-app-routes.ts

@@ -14,7 +14,7 @@ import {
   findComponentImportPath,
 } from '../../../utils/ast-utils';
 import { addInitialRoutes } from '../../../utils/ast-utils';
-import { maybeJs } from './maybe-js';
+import { maybeJs } from '../../../utils/maybe-js';
 import { reactRouterDomVersion } from '../../../utils/versions';
 import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';