fix(bundling): rspack should allow ES config module imports (#29095)

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)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

Thank you @olaf-cichocki for reporting the issue.
This commit is contained in:
Miroslav Jonaš 2025-01-30 14:43:15 +01:00 committed by GitHub
parent c7ff6d358d
commit 7d864c8db8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 40 deletions

View File

@ -1,4 +1,3 @@
import { join } from 'path';
import { ExecutorContext } from '@nx/devkit'; import { ExecutorContext } from '@nx/devkit';
import { type Configuration } from '@rspack/core'; import { type Configuration } from '@rspack/core';
import { import {
@ -14,7 +13,7 @@ export async function getRspackConfigs(
options: NormalizedRspackExecutorSchema & { devServer?: any }, options: NormalizedRspackExecutorSchema & { devServer?: any },
context: ExecutorContext context: ExecutorContext
): Promise<Configuration | Configuration[]> { ): Promise<Configuration | Configuration[]> {
let userDefinedConfig = resolveUserDefinedRspackConfig( let userDefinedConfig = await resolveUserDefinedRspackConfig(
options.rspackConfig, options.rspackConfig,
options.tsConfig options.tsConfig
); );

View File

@ -141,7 +141,7 @@ async function createRspackTargets(
): Promise<RspackTargets> { ): Promise<RspackTargets> {
const namedInputs = getNamedInputs(projectRoot, context); const namedInputs = getNamedInputs(projectRoot, context);
const rspackConfig = resolveUserDefinedRspackConfig( const rspackConfig = await resolveUserDefinedRspackConfig(
join(context.workspaceRoot, configFilePath), join(context.workspaceRoot, configFilePath),
getRootTsConfigPath(), getRootTsConfigPath(),
true true

View File

@ -1,44 +1,10 @@
import { clearRequireCache } from '@nx/devkit/src/utils/config-utils'; import { loadConfigFile } from '@nx/devkit/src/utils/config-utils';
import { registerTsProject } from '@nx/js/src/internal';
export function resolveUserDefinedRspackConfig( export async function resolveUserDefinedRspackConfig(
path: string, path: string,
tsConfig: string, tsConfig: string,
/** Skip require cache and return latest content */ /** Skip require cache and return latest content */
reload = false reload = false
) { ) {
if (reload) { return await loadConfigFile(path);
// 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;
} }