fix(react): transpile only the config files then disable tsnode service

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

@@ -125,6 +125,7 @@ describe('React Module Federation', () => {
   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');
+    const shellPort = 4200;
 
     runCLI(
       `generate @nx/react:host ${shell} --project-name-and-root-format=as-provided --no-interactive`
@@ -141,6 +142,17 @@ describe('React Module Federation', () => {
     // check default generated host is built successfully
     const buildOutput = runCLI(`run ${shell}:build:development`);
     expect(buildOutput).toContain('Successfully ran target build');
+
+    // check serves devRemotes ok
+    const shellProcess = await runCommandUntil(
+      `serve ${shell} --devRemotes=${remote} --verbose`,
+      (output) => {
+        return output.includes(
+          `All remotes started, server ready at http://localhost:${shellPort}`
+        );
+      }
+    );
+    await killProcessAndPorts(shellProcess.pid, shellPort);
   }, 500_000);
 
   it('should support different versions workspace libs for host and remote', async () => {

e2e/utils/get-env-info.ts

@@ -110,13 +110,13 @@ export const packageManagerLockFile = {
   pnpm: 'pnpm-lock.yaml',
 };
 
-export function ensureCypressInstallation() {
+export function ensureCypressInstallation(cwd = tmpProjPath()) {
   let cypressVerified = true;
   try {
     const r = execSync('npx cypress verify', {
       stdio: isVerbose() ? 'inherit' : 'pipe',
       encoding: 'utf-8',
-      cwd: tmpProjPath(),
+      cwd,
     });
     if (r.indexOf('Verified Cypress!') === -1) {
       cypressVerified = false;
@@ -129,7 +129,7 @@ export function ensureCypressInstallation() {
       execSync('npx cypress install', {
         stdio: isVerbose() ? 'inherit' : 'pipe',
         encoding: 'utf-8',
-        cwd: tmpProjPath(),
+        cwd,
       });
     }
   }

graph/client-e2e/jest.config.ts

@@ -0,0 +1,12 @@
+export default {
+  transform: {
+    '^.+\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  maxWorkers: 1,
+  globals: {},
+  globalSetup: '../../e2e/utils/global-setup.ts',
+  globalTeardown: '../../e2e/utils/global-teardown.ts',
+  displayName: 'e2e-graph-client',
+  preset: '../../jest.preset.js',
+};

graph/client-e2e/project.json

@@ -4,7 +4,17 @@
   "sourceRoot": "graph/client-e2e/src",
   "projectType": "application",
   "targets": {
+    "pre-e2e": {
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
+      "executor": "@nx/jest:jest",
+      "options": {
+        "jestConfig": "{projectRoot}/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"]
+    },
     "e2e-base": {
+      "dependsOn": ["pre-e2e"],
       "executor": "@nx/cypress:cypress",
       "options": {
         "testingType": "e2e",

graph/client-e2e/src/ensure-cypress.spec.ts

@@ -0,0 +1,11 @@
+import { ensureCypressInstallation } from '@nx/e2e/utils';
+
+describe('Ensure Cypress Binary is Installed', () => {
+  beforeAll(() => {
+    ensureCypressInstallation(process.cwd());
+  });
+
+  it('should ensure cypress binary is available for the e2es', () => {
+    expect(true).toBe(true);
+  });
+});

graph/client-e2e/tsconfig.json

@@ -4,7 +4,7 @@
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",
     "allowJs": true,
-    "types": ["cypress", "node"],
+    "types": ["cypress", "jest", "node"],
     "lib": ["DOM"]
   },
   "files": [],
@@ -16,6 +16,10 @@
     "src/**/*.ts",
     "src/**/*.js"
   ],
-  "references": [],
-  "exclude": []
+  "references": [
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "exclude": ["src/**/*.spec.ts"]
 }

graph/client-e2e/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["src/**/*.spec.ts", "jest.config.ts"],
+  "files": []
+}

packages/angular/src/builders/utilities/module-federation.ts

@@ -91,13 +91,19 @@ function getModuleFederationConfig(
 
   let moduleFederationConfigPath = moduleFederationConfigPathJS;
 
+  let tsNodeService;
   if (existsSync(moduleFederationConfigPathTS)) {
-    tsNodeRegister(moduleFederationConfigPathTS, tsconfigPath);
+    tsNodeService = tsNodeRegister(moduleFederationConfigPathTS, tsconfigPath, {
+      transpileOnly: true,
+    });
     moduleFederationConfigPath = moduleFederationConfigPathTS;
   }
 
   try {
     const config = require(moduleFederationConfigPath);
+    if (tsNodeService) {
+      tsNodeService.enabled(false);
+    }
     return {
       mfeConfig: config.default || config,
       mfConfigPath: moduleFederationConfigPath,

packages/angular/src/builders/utilities/webpack.ts

@@ -26,9 +26,12 @@ export async function mergeCustomWebpackConfig(
 }
 
 export function resolveCustomWebpackConfig(path: string, tsConfig: string) {
-  tsNodeRegister(path, tsConfig);
+  const tsNodeService = tsNodeRegister(path, tsConfig);
 
   const customWebpackConfig = require(path);
+  if (tsNodeService) {
+    tsNodeService.enabled(false);
+  }
   // If the user provides a configuration in TS file
   // then there are 2 cases for exporting an object. The first one is:
   // `module.exports = { ... }`. And the second one is:
@@ -42,9 +45,13 @@ export function resolveIndexHtmlTransformer(
   tsConfig: string,
   target: import('@angular-devkit/architect').Target
 ) {
-  tsNodeRegister(path, tsConfig);
-
+  const tsNodeService = tsNodeRegister(path, tsConfig);
   const indexTransformer = require(path);
+
+  if (tsNodeService) {
+    tsNodeService.enabled(false);
+  }
+
   const transform = indexTransformer.default ?? indexTransformer;
 
   return (indexHtml) => transform(target, indexHtml);

packages/js/src/utils/typescript/tsnode-register.ts

@@ -1,15 +1,22 @@
-export function tsNodeRegister(file: string, tsConfig?: string) {
+import type { RegisterOptions, Service } from 'ts-node';
+
+export function tsNodeRegister(
+  file: string,
+  tsConfig?: string,
+  tsNodeOptions?: RegisterOptions
+): Service | undefined {
   if (!file?.endsWith('.ts')) return;
   // Register TS compiler lazily
-  require('ts-node').register({
+  const tsNodeService = require('ts-node').register({
     project: tsConfig,
     compilerOptions: {
       module: 'CommonJS',
       types: ['node'],
     },
+    ...tsNodeOptions,
   });
 
-  if (!tsConfig) return;
+  if (!tsConfig) return tsNodeService;
 
   // Register paths in tsConfig
   const tsconfigPaths = require('tsconfig-paths');
@@ -18,4 +25,6 @@ export function tsNodeRegister(file: string, tsConfig?: string) {
   if (baseUrl && paths) {
     tsconfigPaths.register({ baseUrl, paths });
   }
+
+  return tsNodeService;
 }

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

@@ -53,13 +53,20 @@ function getModuleFederationConfig(
 
   let moduleFederationConfigPath = moduleFederationConfigPathJS;
 
+  // create a no-op so this can be called with issue
+  let tsNodeService;
   if (existsSync(moduleFederationConfigPathTS)) {
-    tsNodeRegister(moduleFederationConfigPathTS, tsconfigPath);
+    tsNodeService = tsNodeRegister(moduleFederationConfigPathTS, tsconfigPath, {
+      transpileOnly: true,
+    });
     moduleFederationConfigPath = moduleFederationConfigPathTS;
   }
 
   try {
     const config = require(moduleFederationConfigPath);
+    if (tsNodeService) {
+      tsNodeService.enabled(false);
+    }
     return config.default || config;
   } catch {
     throw new Error(

packages/webpack/src/utils/webpack/custom-webpack.ts

@@ -1,9 +1,14 @@
 import { tsNodeRegister } from '@nx/js/src/utils/typescript/tsnode-register';
 
 export function resolveCustomWebpackConfig(path: string, tsConfig: string) {
-  tsNodeRegister(path, tsConfig);
+  const tsNodeService = tsNodeRegister(path, tsConfig);
 
   const customWebpackConfig = require(path);
+
+  if (tsNodeService) {
+    tsNodeService.enabled(false);
+  }
+
   // If the user provides a configuration in TS file
   // then there are 2 cases for exporing an object. The first one is:
   // `module.exports = { ... }`. And the second one is: