fix(web): disable tsnode service after loading config (#19387)

Co-authored-by: Jason Jean <jasonjean1993@gmail.com>

Author: Coly010

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 () => {

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

@@ -1,8 +1,7 @@
-import { ProjectConfiguration } from 'nx/src/config/workspace-json-project-json';
 import { join } from 'path';
 import { existsSync, readFileSync } from 'fs';
-import { logger } from '@nx/devkit';
-import { tsNodeRegister } from '@nx/js/src/utils/typescript/tsnode-register';
+import { logger, ProjectConfiguration } from '@nx/devkit';
+import { registerTsProject } from '@nx/js/src/internal';
 
 export function getDynamicRemotes(
   project: ProjectConfiguration,
@@ -91,13 +90,19 @@ function getModuleFederationConfig(
 
   let moduleFederationConfigPath = moduleFederationConfigPathJS;
 
+  let cleanupTranspiler = () => {};
   if (existsSync(moduleFederationConfigPathTS)) {
-    tsNodeRegister(moduleFederationConfigPathTS, tsconfigPath);
+    cleanupTranspiler = registerTsProject(
+      moduleFederationConfigPathTS,
+      tsconfigPath
+    );
     moduleFederationConfigPath = moduleFederationConfigPathTS;
   }
 
   try {
     const config = require(moduleFederationConfigPath);
+    cleanupTranspiler();
+
     return {
       mfeConfig: config.default || config,
       mfConfigPath: moduleFederationConfigPath,

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

@@ -1,5 +1,5 @@
 import { merge } from 'webpack-merge';
-import { tsNodeRegister } from '@nx/js/src/utils/typescript/tsnode-register';
+import { registerTsProject } from '@nx/js/src/internal';
 
 export async function mergeCustomWebpackConfig(
   baseWebpackConfig: any,
@@ -26,9 +26,9 @@ export async function mergeCustomWebpackConfig(
 }
 
 export function resolveCustomWebpackConfig(path: string, tsConfig: string) {
-  tsNodeRegister(path, tsConfig);
-
+  const cleanupTranspiler = registerTsProject(path, tsConfig);
   const customWebpackConfig = require(path);
+  cleanupTranspiler();
   // 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 +42,10 @@ export function resolveIndexHtmlTransformer(
   tsConfig: string,
   target: import('@angular-devkit/architect').Target
 ) {
-  tsNodeRegister(path, tsConfig);
-
+  const cleanupTranspiler = registerTsProject(path, tsConfig);
   const indexTransformer = require(path);
+  cleanupTranspiler();
+
   const transform = indexTransformer.default ?? indexTransformer;
 
   return (indexHtml) => transform(target, indexHtml);

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

@@ -17,7 +17,7 @@ import { waitForPortOpen } from '@nx/web/src/utils/wait-for-port-open';
 import { findMatchingProjects } from 'nx/src/utils/find-matching-projects';
 import { fork } from 'child_process';
 import { existsSync } from 'fs';
-import { tsNodeRegister } from '@nx/js/src/utils/typescript/tsnode-register';
+import { registerTsProject } from '@nx/js/src/internal';
 
 type ModuleFederationDevServerOptions = WebDevServerOptions & {
   devRemotes?: string | string[];
@@ -53,13 +53,20 @@ function getModuleFederationConfig(
 
   let moduleFederationConfigPath = moduleFederationConfigPathJS;
 
+  // create a no-op so this can be called with issue
+  let cleanupTranspiler = () => {};
   if (existsSync(moduleFederationConfigPathTS)) {
-    tsNodeRegister(moduleFederationConfigPathTS, tsconfigPath);
+    cleanupTranspiler = registerTsProject(
+      moduleFederationConfigPathTS,
+      tsconfigPath
+    );
     moduleFederationConfigPath = moduleFederationConfigPathTS;
   }
 
   try {
     const config = require(moduleFederationConfigPath);
+    cleanupTranspiler();
+
     return config.default || config;
   } catch {
     throw new Error(

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

@@ -1,9 +1,10 @@
-import { tsNodeRegister } from '@nx/js/src/utils/typescript/tsnode-register';
+import { registerTsProject } from '@nx/js/src/internal';
 
 export function resolveCustomWebpackConfig(path: string, tsConfig: string) {
-  tsNodeRegister(path, tsConfig);
-
+  const cleanupTranspiler = registerTsProject(path, tsConfig);
   const customWebpackConfig = require(path);
+  cleanupTranspiler();
+
   // 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: