feat(rspack-cli): support mjs config (#2168)

Author: hardfist

.changeset/lemon-clocks-boil.md

@@ -0,0 +1,5 @@
+---
+"@rspack/cli": patch
+---
+
+support mjs config

packages/rspack-cli/src/globals.d.ts

@@ -0,0 +1,97 @@
+/*
+ ** https://github.com/jorgebucaran/colorette/pull/96
+ ** colorette is broken in moduileResolution:nodenext,even it's fixed it's never published
+ */
+declare module "colorette" {
+	type Color = (text: string | number) => string;
+
+	interface Colorette {
+		reset: Color;
+		bold: Color;
+		dim: Color;
+		italic: Color;
+		underline: Color;
+		inverse: Color;
+		hidden: Color;
+		strikethrough: Color;
+		black: Color;
+		red: Color;
+		green: Color;
+		yellow: Color;
+		blue: Color;
+		magenta: Color;
+		cyan: Color;
+		white: Color;
+		gray: Color;
+		bgBlack: Color;
+		bgRed: Color;
+		bgGreen: Color;
+		bgYellow: Color;
+		bgBlue: Color;
+		bgMagenta: Color;
+		bgCyan: Color;
+		bgWhite: Color;
+		blackBright: Color;
+		redBright: Color;
+		greenBright: Color;
+		yellowBright: Color;
+		blueBright: Color;
+		magentaBright: Color;
+		cyanBright: Color;
+		whiteBright: Color;
+		bgBlackBright: Color;
+		bgRedBright: Color;
+		bgGreenBright: Color;
+		bgYellowBright: Color;
+		bgBlueBright: Color;
+		bgMagentaBright: Color;
+		bgCyanBright: Color;
+		bgWhiteBright: Color;
+	}
+
+	const reset: Color;
+	const bold: Color;
+	const dim: Color;
+	const italic: Color;
+	const underline: Color;
+	const inverse: Color;
+	const hidden: Color;
+	const strikethrough: Color;
+	const black: Color;
+	const red: Color;
+	const green: Color;
+	const yellow: Color;
+	const blue: Color;
+	const magenta: Color;
+	const cyan: Color;
+	const white: Color;
+	const gray: Color;
+	const bgBlack: Color;
+	const bgRed: Color;
+	const bgGreen: Color;
+	const bgYellow: Color;
+	const bgBlue: Color;
+	const bgMagenta: Color;
+	const bgCyan: Color;
+	const bgWhite: Color;
+	const blackBright: Color;
+	const redBright: Color;
+	const greenBright: Color;
+	const yellowBright: Color;
+	const blueBright: Color;
+	const magentaBright: Color;
+	const cyanBright: Color;
+	const whiteBright: Color;
+	const bgBlackBright: Color;
+	const bgRedBright: Color;
+	const bgGreenBright: Color;
+	const bgYellowBright: Color;
+	const bgBlueBright: Color;
+	const bgMagentaBright: Color;
+	const bgCyanBright: Color;
+	const bgWhiteBright: Color;
+
+	const isColorSupported: boolean;
+
+	function createColors(options?: { useColor: boolean }): Colorette;
+}

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

@@ -186,7 +186,7 @@ export class RspackCLI {
 	async loadConfig(
 		options: RspackCLIOptions
 	): Promise<RspackOptions | MultiRspackOptions> {
-		let loadedConfig = loadRspackConfig(options);
+		let loadedConfig = await loadRspackConfig(options);
 		if (options.configName) {
 			const notFoundConfigNames: string[] = [];
 

packages/rspack-cli/src/types.ts

@@ -2,6 +2,7 @@ import { Colorette } from "colorette";
 import { RspackCLI } from "./rspack-cli";
 import type { DevServer } from "@rspack/core";
 export type { Configuration } from "@rspack/core";
+
 export interface IRspackCLI {
 	runRspack(): Promise<void>;
 }

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

@@ -16,23 +16,23 @@ export type LoadedRspackConfig =
 			argv: Record<string, any>
 	  ) => RspackOptions | MultiRspackOptions);
 
-export function loadRspackConfig(
+export async function loadRspackConfig(
 	options: RspackCLIOptions
-): LoadedRspackConfig {
+): Promise<LoadedRspackConfig> {
 	let loadedConfig: LoadedRspackConfig;
 	// if we pass config paras
 	if (options.config) {
 		const resolvedConfigPath = path.resolve(process.cwd(), options.config);
 		if (!fs.existsSync(resolvedConfigPath)) {
 			throw new Error(`config file "${resolvedConfigPath}" not exists`);
 		}
-		loadedConfig = requireWithAdditionalExtension(resolvedConfigPath);
+		loadedConfig = await requireWithAdditionalExtension(resolvedConfigPath);
 	} else {
 		let defaultConfigPath = findFileWithSupportedExtensions(
 			path.resolve(process.cwd(), defaultConfig)
 		);
 		if (defaultConfigPath != null) {
-			loadedConfig = requireWithAdditionalExtension(defaultConfigPath);
+			loadedConfig = await requireWithAdditionalExtension(defaultConfigPath);
 		} else {
 			let entry: Record<string, string> = {};
 			if (options.entry) {
@@ -68,7 +68,7 @@ function findFileWithSupportedExtensions(basePath: string): string | null {
 }
 
 let hasRegisteredTS = false;
-function requireWithAdditionalExtension(resolvedPath: string) {
+async function requireWithAdditionalExtension(resolvedPath: string) {
 	if (resolvedPath.endsWith("ts") && !hasRegisteredTS) {
 		hasRegisteredTS = true;
 		let tsNode: any;
@@ -79,5 +79,12 @@ function requireWithAdditionalExtension(resolvedPath: string) {
 		}
 		tsNode.register({ transpileOnly: true });
 	}
-	return require(resolvedPath);
+	let loadedConfig;
+	if (resolvedPath.endsWith("ts")) {
+		loadedConfig = require(resolvedPath);
+	} else {
+		// dynamic import can handle both cjs & mjs
+		loadedConfig = (await import(resolvedPath)).default;
+	}
+	return loadedConfig;
 }

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

@@ -85,4 +85,15 @@ describe("build command", () => {
 		expect(stderr).toBeFalsy();
 		expect(stdout).toBeTruthy();
 	});
+	it("should work with mjs configuration ", async () => {
+		const { exitCode, stderr, stdout } = await run(__dirname, [
+			"./src/index.js",
+			"./src/other.js",
+			"--config",
+			"./entry.config.mjs"
+		]);
+		expect(exitCode).toBe(0);
+		expect(stderr).toBeFalsy();
+		expect(stdout).toBeTruthy();
+	});
 });

packages/rspack-cli/tests/build/basic/entry.config.mjs

@@ -0,0 +1,7 @@
+import url from "url";
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+export default {
+	context: __dirname,
+	mode: "development",
+	entry: "./src/entry.js"
+};

packages/rspack-cli/tsconfig.json

@@ -1,11 +1,10 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "moduleResolution": "nodenext"
   },
   "ts-node": {
     "transpileOnly": true

packages/rspack-dev-server/src/server.ts

@@ -261,9 +261,10 @@ export class RspackDevServer extends WebpackDevServer {
 		}
 		if (!clientImplementationFound) {
 			throw new Error(
-				`${!isKnownWebSocketServerImplementation
-					? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
-					: ""
+				`${
+					!isKnownWebSocketServerImplementation
+						? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
+						: ""
 				}client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `
 			);
 		}
@@ -283,7 +284,7 @@ export class RspackDevServer extends WebpackDevServer {
 				if (mode === "production") {
 					this.logger.warn(
 						"Hot Module Replacement (HMR) is enabled for the production build. \n" +
-						"Make sure to disable HMR for production by setting `devServer.hot` to `false` in the configuration."
+							"Make sure to disable HMR for production by setting `devServer.hot` to `false` in the configuration."
 					);
 				}
 				compiler.options.devServer ??= {};
@@ -295,7 +296,7 @@ export class RspackDevServer extends WebpackDevServer {
 				if (mode === "production") {
 					this.logger.warn(
 						"React Refresh runtime should not be included in the production bundle.\n" +
-						"Make sure to disable React Refresh for production by setting `builtins.react.refresh` to `false` in the configuration."
+							"Make sure to disable React Refresh for production by setting `builtins.react.refresh` to `false` in the configuration."
 					);
 				} else {
 					this.logger.warn(