fix(cli): rspack-cli register loader to preserve real ESM TypeScript configs

packages/rspack-cli/src/utils/compileTypeScript.ts

@@ -0,0 +1,41 @@
+import { rspack } from '@rspack/core';
+
+type ModuleType = 'commonjs' | 'es6';
+
+const injectInlineSourceMap = ({
+  code,
+  map,
+}: {
+  code: string;
+  map: string | undefined;
+}): string => {
+  if (map) {
+    const base64Map = Buffer.from(map, 'utf8').toString('base64');
+    const sourceMapContent = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64Map}`;
+    return `${code}\n${sourceMapContent}`;
+  }
+  return code;
+};
+
+export const compileTypeScript = (
+  sourcecode: string,
+  filename: string,
+  moduleType: ModuleType,
+) => {
+  const { code, map } = rspack.experiments.swc.transformSync(sourcecode, {
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: false,
+        decorators: true,
+        dynamicImport: true,
+      },
+    },
+    filename,
+    module: { type: moduleType },
+    sourceMaps: true,
+    isModule: true,
+  });
+
+  return injectInlineSourceMap({ code, map });
+};

packages/rspack-cli/src/utils/loadConfig.ts

@@ -1,33 +1,84 @@
 import fs from 'node:fs';
-import { createRequire } from 'node:module';
+import { createRequire, register as registerModule } from 'node:module';
 import path from 'node:path';
+import { pathToFileURL } from 'node:url';
 import type { MultiRspackOptions, RspackOptions } from '@rspack/core';
 import { rspack } from '@rspack/core';
 import { addHook } from 'pirates';
+import { compileTypeScript } from './compileTypeScript';
 import { crossImport } from './crossImport';
 import findConfig from './findConfig';
 import { isEsmFile } from './isEsmFile';
-import isTsFile, { TS_EXTENSION } from './isTsFile';
+import isTsFile from './isTsFile';
 import type { CommonOptions } from './options';
 
 const require = createRequire(import.meta.url);
+const CORE_MODULE_URL = pathToFileURL(require.resolve('@rspack/core')).href;
 
-const injectInlineSourceMap = ({
-  code,
-  map,
-}: {
-  code: string;
-  map: string | undefined;
-}): string => {
+const DEFAULT_CONFIG_NAME = 'rspack.config' as const;
+let isCommonJsLoaderRegistered = false;
+let isEsmLoaderRegistered = false;
+
+const shouldCompileAsCommonJs = (filename: string) =>
+  isTsFile(filename) && !isEsmFile(filename);
+
+const ESM_TS_LOADER_SOURCE = `
+import fs from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+let rspack;
+
+export async function initialize(data) {
+  ({ rspack } = await import(data.coreModuleUrl));
+}
+
+const TS_EXTENSION = ['.ts', '.cts', '.mts'];
+
+const isTsFile = (filePath) => TS_EXTENSION.includes(path.extname(filePath));
+
+const readPackageUp = (cwd) => {
+  let current = cwd;
+
+  while (true) {
+    const packageJsonPath = path.join(current, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      try {
+        return JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+      } catch {
+        return undefined;
+      }
+    }
+
+    const parent = path.dirname(current);
+    if (parent === current) {
+      return undefined;
+    }
+    current = parent;
+  }
+};
+
+const isEsmFile = (filePath) => {
+  if (/\\.(mjs|mts)$/.test(filePath)) {
+    return true;
+  }
+  if (/\\.(cjs|cts)$/.test(filePath)) {
+    return false;
+  }
+  return readPackageUp(path.dirname(filePath))?.type === 'module';
+};
+
+const injectInlineSourceMap = ({ code, map }) => {
   if (map) {
     const base64Map = Buffer.from(map, 'utf8').toString('base64');
-    const sourceMapContent = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64Map}`;
-    return `${code}\n${sourceMapContent}`;
+    const sourceMapContent = \`//# sourceMappingURL=data:application/json;charset=utf-8;base64,\${base64Map}\`;
+    return \`\${code}\\n\${sourceMapContent}\`;
   }
   return code;
 };
 
-export function compile(sourcecode: string, filename: string) {
+const compileTypeScript = (sourcecode, filename, moduleType) => {
   const { code, map } = rspack.experiments.swc.transformSync(sourcecode, {
     jsc: {
       parser: {
@@ -37,42 +88,100 @@ export function compile(sourcecode: string, filename: string) {
         dynamicImport: true,
       },
     },
-    filename: filename,
-    module: { type: 'commonjs' },
+    filename,
+    module: { type: moduleType },
     sourceMaps: true,
     isModule: true,
   });
+
   return injectInlineSourceMap({ code, map });
-}
+};
 
-const DEFAULT_CONFIG_NAME = 'rspack.config' as const;
+export async function load(url, context, nextLoad) {
+  if (!url.startsWith('file:')) {
+    return nextLoad(url, context);
+  }
 
-// modified based on https://github.com/swc-project/swc-node/blob/master/packages/register/register.ts#L117
-const registerLoader = (configPath: string) => {
-  // For ESM and `.mts` you need to use: 'NODE_OPTIONS="--loader ts-node/esm" rspack build --config ./rspack.config.mts'
-  if (isEsmFile(configPath) && isTsFile(configPath)) {
-    return;
+  const filename = fileURLToPath(url);
+  if (!isTsFile(filename)) {
+    return nextLoad(url, context);
+  }
+
+  const moduleType = isEsmFile(filename) ? 'es6' : 'commonjs';
+  const format = moduleType === 'es6' ? 'module' : 'commonjs';
+  const source = await readFile(new URL(url), 'utf8');
+
+  try {
+    return {
+      format,
+      shortCircuit: true,
+      source: compileTypeScript(source, filename, moduleType),
+    };
+  } catch (err) {
+    throw new Error(
+      \`Failed to transform file "\${filename}" when loading TypeScript config file:\\n \${err instanceof Error ? err.message : String(err)}\`,
+    );
   }
+}
+`;
+
+const ESM_TS_LOADER_URL = `data:text/javascript;base64,${Buffer.from(
+  ESM_TS_LOADER_SOURCE,
+  'utf8',
+).toString('base64')}`;
 
-  // Only support TypeScript files with a CommonJS loader here
-  if (!isTsFile(configPath)) {
-    throw new Error(`config file "${configPath}" is not supported.`);
+const registerCommonJsLoader = () => {
+  if (isCommonJsLoaderRegistered) {
+    return;
   }
 
   addHook(
     (code, filename) => {
       try {
-        return compile(code, filename);
+        return compileTypeScript(code, filename, 'commonjs');
       } catch (err) {
         throw new Error(
           `Failed to transform file "${filename}" when loading TypeScript config file:\n ${err instanceof Error ? err.message : String(err)}`,
         );
       }
     },
     {
-      exts: TS_EXTENSION,
+      exts: ['.ts', '.cts', '.mts'],
+      matcher: shouldCompileAsCommonJs,
     },
   );
+  isCommonJsLoaderRegistered = true;
+};
+
+const registerEsmLoader = () => {
+  if (isEsmLoaderRegistered) {
+    return;
+  }
+
+  registerModule(ESM_TS_LOADER_URL, {
+    parentURL: import.meta.url,
+    data: {
+      coreModuleUrl: CORE_MODULE_URL,
+    },
+  });
+  isEsmLoaderRegistered = true;
+};
+
+const loadConfigFile = async <T = LoadedRspackConfig>(
+  configPath: string,
+  options: CommonOptions,
+): Promise<T> => {
+  if (isTsFile(configPath) && options.configLoader === 'register') {
+    if (isEsmFile(configPath)) {
+      registerEsmLoader();
+      const loaded = await import(pathToFileURL(configPath).href);
+      return loaded.default as T;
+    }
+
+    registerCommonJsLoader();
+  }
+
+  return crossImport<T>(configPath);
 };
 
 export type LoadedRspackConfig =
@@ -84,6 +193,8 @@ export type LoadedRspackConfig =
       argv?: Record<string, any>,
     ) => RspackOptions | MultiRspackOptions);
 
+type ResolvedRspackConfig = RspackOptions | MultiRspackOptions;
+
 const checkIsMultiRspackOptions = (
   config: RspackOptions | MultiRspackOptions,
 ): config is MultiRspackOptions => Array.isArray(config);
@@ -212,25 +323,35 @@ export async function loadExtendedConfig(
       );
     }
 
-    // Register loader for TypeScript files
-    if (isTsFile(resolvedPath) && options.configLoader === 'register') {
-      registerLoader(resolvedPath);
-    }
-
     // Load the extended configuration
-    let loadedConfig = await crossImport(resolvedPath);
+    let loadedConfig = await loadConfigFile<LoadedRspackConfig>(
+      resolvedPath,
+      options,
+    );
 
     // If the extended config is a function, execute it
     if (typeof loadedConfig === 'function') {
-      loadedConfig = loadedConfig(options.env, options);
+      loadedConfig = loadedConfig(options.env as Record<string, any>, options);
       // if return promise we should await its result
       if (
         typeof (loadedConfig as unknown as Promise<unknown>).then === 'function'
       ) {
-        loadedConfig = await loadedConfig;
+        loadedConfig = (await loadedConfig) as ResolvedRspackConfig;
       }
     }
 
+    if (!loadedConfig) {
+      throw new Error(
+        `Extended configuration file "${resolvedPath}" must export a configuration object.`,
+      );
+    }
+
+    if (checkIsMultiRspackOptions(loadedConfig)) {
+      throw new Error(
+        `Extended configuration file "${resolvedPath}" must export a single configuration object.`,
+      );
+    }
+
     // Recursively load extended configurations from the extended config
     const { config: extendedConfig, pathMap: extendedPathMap } =
       await loadExtendedConfig(loadedConfig, resolvedPath, cwd, options);
@@ -269,11 +390,7 @@ export async function loadRspackConfig(
     configPath = defaultConfig;
   }
 
-  // load config
-  if (isTsFile(configPath) && options.configLoader === 'register') {
-    registerLoader(configPath);
-  }
-  const loadedConfig = await crossImport(configPath);
+  const loadedConfig = await loadConfigFile(configPath, options);
 
   return { loadedConfig, configPath };
 }

packages/rspack-cli/tests/build/config/config.test.ts

@@ -44,6 +44,7 @@
         }),
       ).resolves.toMatch(/Main cjs file/);
     });
+
   });
   describe('should load cjs config', () => {
     const cwd = resolve(__dirname, './cjs');
@@ -157,7 +158,7 @@
           nodeOptions: ['--experimental-loader=ts-node/esm'],
         },
       );
       expect(stdout).toBeTruthy();
       expect(exitCode).toBe(0);
       await expect(
         readFile(resolve(cwd, './dist/ts-2/ts.bundle.js'), {
@@ -166,6 +167,25 @@
       ).resolves.toMatch(/Main esm file/);
     });
 
+    it('should load config.ts file with register loader', async () => {
+      const { exitCode, stderr, stdout } = await run(cwd, [
+        '-c',
+        'rspack.config.ts',
+        '--config-loader',
+        'register',
+        '--output-path',
+        'dist/ts-register',
+      ]);
+      expect(stderr).toBeFalsy();
+      expect(stdout).toBeTruthy();
+      expect(exitCode).toBe(0);
+      await expect(
+        readFile(resolve(cwd, './dist/ts-register/ts.bundle.js'), {
+          encoding: 'utf-8',
+        }),
+      ).resolves.toMatch(/Main esm file/);
+    });
+
     it('should load config.mjs file', async () => {
       const { exitCode, stderr, stdout } = await run(cwd, [
         '-c',
@@ -192,7 +212,7 @@
         },
       );
 
       expect(stdout).toBeTruthy();
       expect(exitCode).toBe(0);
       await expect(
         readFile(resolve(cwd, './dist/mts-1/mts.bundle.js'), {
@@ -200,6 +220,40 @@
         }),
       ).resolves.toMatch(/Main esm file/);
     });
+
+    it('should load config.mts file with register loader', async () => {
+      const { exitCode, stderr, stdout } = await run(cwd, [
+        '-c',
+        'rspack.config.mts',
+        '--config-loader',
+        'register',
+        '--output-path',
+        'dist/mts-register',
+      ]);
+
+      expect(stderr).toBeFalsy();
+      expect(stdout).toBeTruthy();
+      expect(exitCode).toBe(0);
+      await expect(
+        readFile(resolve(cwd, './dist/mts-register/mts.bundle.js'), {
+          encoding: 'utf-8',
+        }),
+      ).resolves.toMatch(/Main esm file/);
+    });
+
+    it('should reject faux esm config.ts with register loader', async () => {
+      const { exitCode, stderr, stdout } = await run(cwd, [
+        '-c',
+        'rspack.config.faux.ts',
+        '--config-loader',
+        'register',
+      ]);
+
+      expect(stdout).toBeFalsy();
+      expect(stderr).toBeTruthy();
+      expect(stderr).toMatch(/__dirname is not defined in ES module scope/);
+      expect(exitCode).toBe(1);
+    });
   });
 
   describe('should load config with defineConfig helper', () => {
@@ -213,7 +267,7 @@
           nodeOptions: ['--experimental-loader=ts-node/esm'],
         },
       );
       expect(stdout).toBeTruthy();
       expect(exitCode).toBe(0);
       await expect(
         readFile(resolve(cwd, './dist/ts-3/ts.bundle.js'), {
@@ -231,7 +285,7 @@
         },
       );
 
       expect(stdout).toBeTruthy();
       expect(exitCode).toBe(0);
       await expect(
         readFile(resolve(cwd, './dist/mts-2/mts.bundle.js'), {
@@ -247,7 +301,7 @@
       const { exitCode, stdout } = await run(cwd, ['-c', 'rspack.config.ts'], {
         nodeOptions: ['--experimental-loader=ts-node/esm'],
       });
       expect(stdout).toBeTruthy();
       expect(exitCode).toBe(0);
       await expect(
         readFile(