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

nrwl · Oct 1, 2023 · f5ca733 · f5ca733
1 parent e29e9f9
commit f5ca733
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 9 deletions.
diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts
@@ -141,6 +141,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:4200`
+        );
+      }
+    );
+    await killProcessAndPorts(shellProcess.pid, 4200);
   }, 500_000);
 
   it('should support different versions workspace libs for host and remote', async () => {

diff --git a/packages/angular/src/builders/utilities/module-federation.ts b/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,

diff --git a/packages/angular/src/builders/utilities/webpack.ts b/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);

diff --git a/packages/js/src/utils/typescript/tsnode-register.ts b/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;
 }
diff --git a/...ges/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts b/...ges/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(

diff --git a/packages/webpack/src/utils/webpack/custom-webpack.ts b/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: