From a11e8f1bb21a28809862e1f5a5374cf01f3d45ef Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Tue, 3 Oct 2023 18:28:58 +0100 Subject: [PATCH] fix(web): disable tsnode service after loading config (#19387) Co-authored-by: Jason Jean --- e2e/react-core/src/react-module-federation.test.ts | 12 ++++++++++++ .../src/builders/utilities/module-federation.ts | 13 +++++++++---- packages/angular/src/builders/utilities/webpack.ts | 11 ++++++----- .../module-federation-dev-server.impl.ts | 11 +++++++++-- .../webpack/src/utils/webpack/custom-webpack.ts | 7 ++++--- 5 files changed, 40 insertions(+), 14 deletions(-) diff --git a/e2e/react-core/src/react-module-federation.test.ts b/e2e/react-core/src/react-module-federation.test.ts index 8ae20cb9332d7..05220b9b5cd44 100644 --- a/e2e/react-core/src/react-module-federation.test.ts +++ b/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 () => { diff --git a/packages/angular/src/builders/utilities/module-federation.ts b/packages/angular/src/builders/utilities/module-federation.ts index 73a118753053f..a4be0ecd4e08a 100644 --- a/packages/angular/src/builders/utilities/module-federation.ts +++ b/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, diff --git a/packages/angular/src/builders/utilities/webpack.ts b/packages/angular/src/builders/utilities/webpack.ts index 3e213d43939fa..15cbb62be98a3 100644 --- a/packages/angular/src/builders/utilities/webpack.ts +++ b/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); diff --git a/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts b/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts index 97cde604ad54b..27079f49f2e86 100644 --- a/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts +++ b/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( diff --git a/packages/webpack/src/utils/webpack/custom-webpack.ts b/packages/webpack/src/utils/webpack/custom-webpack.ts index 7e4d00bc39f5e..4b89943143718 100644 --- a/packages/webpack/src/utils/webpack/custom-webpack.ts +++ b/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: