From 7d864c8db815dfa95e5fac2110a608d7499de4ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miroslav=20Jona=C5=A1?= Date: Thu, 30 Jan 2025 14:43:15 +0100 Subject: [PATCH] fix(bundling): rspack should allow ES config module imports (#29095) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reproduction repo: https://github.com/olaf-cichocki/sample ## Current Behavior When using mjs config file we end up with following error: ``` ⚠️ Unable to construct project graph. Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it. Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it. An error occurred while processing files for the @nx/rspack/plugin plugin. - apps/appA/rspack.config.mjs: require() of ES Module /Users/miro/Dev/Testbox/sample/apps/appA/rspack.config.mjs not supported. Instead change the require of /Users/miro/Dev/Testbox/sample/apps/appA/rspack.config.mjs to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/miro/Dev/Testbox/sample/apps/appA/rspack.config.mjs not supported. Instead change the require of /Users/miro/Dev/Testbox/sample/apps/appA/rspack.config.mjs to a dynamic import() which is available in all CommonJS modules. at resolveUserDefinedRspackConfig (/Users/miro/Dev/Testbox/sample/node_modules/.pnpm/@nx+rspack@20.2.0-beta.3_@babel+traverse@7.25.9_@module-federation+enhanced@0.7.6_react-dom@1_7iwdcl66l7me4m7pewq22wegge/node_modules/@nx/rspack/src/utils/resolve-user-defined-rspack-config.js:19:16) at createRspackTargets (/Users/miro/Dev/Testbox/sample/node_modules/.pnpm/@nx+rspack@20.2.0-beta.3_@babel+traverse@7.25.9_@module-federation+enhanced@0.7.6_react-dom@1_7iwdcl66l7me4m7pewq22wegge/node_modules/@nx/rspack/src/plugins/plugin.js:65:98) at createNodesInternal (/Users/miro/Dev/Testbox/sample/node_modules/.pnpm/@nx+rspack@20.2.0-beta.3_@babel+traverse@7.25.9_@module-federation+enhanced@0.7.6_react-dom@1_7iwdcl66l7me4m7pewq22wegge/node_modules/@nx/rspack/src/plugins/plugin.js:51:34) at async /Users/miro/Dev/Testbox/sample/node_modules/.pnpm/nx@20.2.0-beta.3/node_modules/nx/src/project-graph/plugins/utils.js:10:27 at async Promise.all (index 0) ``` ## Expected Behavior Using EU module config files is supported ## Related Issue(s) Fixes # Thank you @olaf-cichocki for reporting the issue. --- .../rspack/src/executors/rspack/lib/config.ts | 3 +- packages/rspack/src/plugins/plugin.ts | 2 +- .../resolve-user-defined-rspack-config.ts | 40 ++----------------- 3 files changed, 5 insertions(+), 40 deletions(-) diff --git a/packages/rspack/src/executors/rspack/lib/config.ts b/packages/rspack/src/executors/rspack/lib/config.ts index 97ca2f30048af..99195cbf52460 100644 --- a/packages/rspack/src/executors/rspack/lib/config.ts +++ b/packages/rspack/src/executors/rspack/lib/config.ts @@ -1,4 +1,3 @@ -import { join } from 'path'; import { ExecutorContext } from '@nx/devkit'; import { type Configuration } from '@rspack/core'; import { @@ -14,7 +13,7 @@ export async function getRspackConfigs( options: NormalizedRspackExecutorSchema & { devServer?: any }, context: ExecutorContext ): Promise { - let userDefinedConfig = resolveUserDefinedRspackConfig( + let userDefinedConfig = await resolveUserDefinedRspackConfig( options.rspackConfig, options.tsConfig ); diff --git a/packages/rspack/src/plugins/plugin.ts b/packages/rspack/src/plugins/plugin.ts index 10605b38c2490..a3b5c9d63bdab 100644 --- a/packages/rspack/src/plugins/plugin.ts +++ b/packages/rspack/src/plugins/plugin.ts @@ -141,7 +141,7 @@ async function createRspackTargets( ): Promise { const namedInputs = getNamedInputs(projectRoot, context); - const rspackConfig = resolveUserDefinedRspackConfig( + const rspackConfig = await resolveUserDefinedRspackConfig( join(context.workspaceRoot, configFilePath), getRootTsConfigPath(), true diff --git a/packages/rspack/src/utils/resolve-user-defined-rspack-config.ts b/packages/rspack/src/utils/resolve-user-defined-rspack-config.ts index 24c612296a9ec..41cfef45417c6 100644 --- a/packages/rspack/src/utils/resolve-user-defined-rspack-config.ts +++ b/packages/rspack/src/utils/resolve-user-defined-rspack-config.ts @@ -1,44 +1,10 @@ -import { clearRequireCache } from '@nx/devkit/src/utils/config-utils'; -import { registerTsProject } from '@nx/js/src/internal'; +import { loadConfigFile } from '@nx/devkit/src/utils/config-utils'; -export function resolveUserDefinedRspackConfig( +export async function resolveUserDefinedRspackConfig( path: string, tsConfig: string, /** Skip require cache and return latest content */ reload = false ) { - if (reload) { - // Clear cache if the path is in the cache - if (require.cache[path]) { - // Clear all entries because config may import other modules - clearRequireCache(); - } - } - - // Don't transpile non-TS files. This prevents workspaces libs from being registered via tsconfig-paths. - // There's an issue here with Nx workspace where loading plugins from source (via tsconfig-paths) can lead to errors. - if (!/\.(ts|mts|cts)$/.test(path)) { - return require(path); - } - - const cleanupTranspiler = registerTsProject(tsConfig); - // eslint-disable-next-line @typescript-eslint/no-var-requires - const maybeCustomRspackConfig = require(path); - cleanupTranspiler(); - - // If the user provides a configuration in TS file - // then there are 3 cases for exploring an object. The first one is: - // `module.exports = { ... }`. And the second one is: - // `export default { ... }`. The ESM format is compiled into: - // `{ default: { ... } }` - // There is also a case of - // `{ default: { default: { ... } }` - const customRspackConfig = - 'default' in maybeCustomRspackConfig - ? 'default' in maybeCustomRspackConfig.default - ? maybeCustomRspackConfig.default.default - : maybeCustomRspackConfig.default - : maybeCustomRspackConfig; - - return customRspackConfig; + return await loadConfigFile(path); }