fix(cli): failed to run preview with TS config file (#9468)

* fix(CLI): failed to run preview with ts config file

* fix: port

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

@@ -5,6 +5,7 @@ import type { RspackCLI } from "../cli";
 import type { RspackCommand } from "../types";
 import {
 	commonOptions,
+	commonOptionsForBuildAndServe,
 	ensureEnvObject,
 	setBuiltinEnvArg
 } from "../utils/options";
@@ -14,8 +15,8 @@ export class BuildCommand implements RspackCommand {
 		cli.program.command(
 			["build", "$0", "bundle", "b"],
 			"run the rspack build",
-			yargs =>
-				commonOptions(yargs).options({
+			yargs => {
+				commonOptionsForBuildAndServe(commonOptions(yargs)).options({
 					analyze: {
 						type: "boolean",
 						default: false,
@@ -29,7 +30,8 @@ export class BuildCommand implements RspackCommand {
 						default: false,
 						describe: "capture timing information for each module"
 					}
-				}),
+				});
+			},
 			async options => {
 				const env = ensureEnvObject(options);
 				if (options.watch) {

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

@@ -5,10 +5,41 @@ import {
 	type RspackOptions,
 	rspack
 } from "@rspack/core";
+import type yargs from "yargs";
 
 import type { RspackCLI } from "../cli";
 import type { RspackCommand, RspackPreviewCLIOptions } from "../types";
-import { previewOptions } from "../utils/options";
+import { commonOptions } from "../utils/options";
+
+const previewOptions = (yargs: yargs.Argv) => {
+	yargs.positional("dir", {
+		type: "string",
+		describe: "directory want to preview"
+	});
+	return commonOptions(yargs).options({
+		publicPath: {
+			type: "string",
+			describe: "static resource server path"
+		},
+		port: {
+			type: "number",
+			describe: "preview server port"
+		},
+		host: {
+			type: "string",
+			describe: "preview server host"
+		},
+		open: {
+			type: "boolean",
+			describe: "open browser"
+		},
+		// same as devServer.server
+		server: {
+			type: "string",
+			describe: "Configuration items for the server."
+		}
+	});
+};
 
 const defaultRoot = "dist";
 export class PreviewCommand implements RspackCommand {
@@ -18,14 +49,7 @@ export class PreviewCommand implements RspackCommand {
 			"run the rspack server for build output",
 			previewOptions,
 			async options => {
-				// config、configName are necessary for loadConfig
-				const rspackOptions = {
-					config: options.config,
-					configName: options.configName,
-					argv: {
-						...options
-					}
-				};
+				const rspackOptions = { ...options, argv: { ...options } };
 				const { RspackDevServer } = await import("@rspack/dev-server");
 
 				let config = await cli.loadConfig(rspackOptions);

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

@@ -5,6 +5,7 @@ import type { RspackCLI } from "../cli";
 import type { RspackCommand } from "../types";
 import {
 	commonOptions,
+	commonOptionsForBuildAndServe,
 	ensureEnvObject,
 	setBuiltinEnvArg
 } from "../utils/options";
@@ -15,7 +16,7 @@ export class ServeCommand implements RspackCommand {
 			["serve", "server", "s", "dev"],
 			"run the rspack dev server.",
 			yargs =>
-				commonOptions(yargs).options({
+				commonOptionsForBuildAndServe(commonOptions(yargs)).options({
 					hot: {
 						coerce: arg => {
 							if (typeof arg === "boolean" || arg === "only") {

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

@@ -1,13 +1,36 @@
 import type yargs from "yargs";
+
+/**
+ * Apply common options for all commands
+ */
 export const commonOptions = (yargs: yargs.Argv) => {
+	return yargs.options({
+		config: {
+			g: true,
+			type: "string",
+			describe: "config file",
+			alias: "c"
+		},
+		configName: {
+			type: "array",
+			string: true,
+			describe: "Name of the configuration to use."
+		},
+		configLoader: {
+			type: "string",
+			default: "register",
+			describe:
+				"Specify the loader to load the config file, can be `native` or `register`."
+		}
+	});
+};
+
+/**
+ * Apply common options for `build` and `serve` commands
+ */
+export const commonOptionsForBuildAndServe = (yargs: yargs.Argv) => {
 	return yargs
 		.options({
-			config: {
-				g: true,
-				type: "string",
-				describe: "config file",
-				alias: "c"
-			},
 			entry: {
 				type: "array",
 				string: true,
@@ -39,64 +62,11 @@ export const commonOptions = (yargs: yargs.Argv) => {
 				default: false,
 				describe: "devtool",
 				alias: "d"
-			},
-			configName: {
-				type: "array",
-				string: true,
-				describe: "Name of the configuration to use."
-			},
-			configLoader: {
-				type: "string",
-				default: "register",
-				describe:
-					"Specify the loader to load the config file, can be `native` or `register`."
 			}
 		})
 		.alias({ v: "version", h: "help" });
 };
 
-export const previewOptions = (yargs: yargs.Argv) => {
-	return yargs
-		.positional("dir", {
-			type: "string",
-			describe: "directory want to preview"
-		})
-		.options({
-			publicPath: {
-				type: "string",
-				describe: "static resource server path"
-			},
-			config: {
-				g: true,
-				type: "string",
-				describe: "config file",
-				alias: "c"
-			},
-			port: {
-				type: "number",
-				describe: "preview server port"
-			},
-			host: {
-				type: "string",
-				describe: "preview server host"
-			},
-			open: {
-				type: "boolean",
-				describe: "open browser"
-			},
-			// same as devServer.server
-			server: {
-				type: "string",
-				describe: "Configuration items for the server."
-			},
-			configName: {
-				type: "array",
-				string: true,
-				describe: "Name of the configuration to use."
-			}
-		});
-};
-
 export function normalizeEnv(argv: yargs.Arguments) {
 	function parseValue(previous: Record<string, unknown>, value: string) {
 		const [allKeys, val] = value.split(/=(.+)/, 2);

packages/rspack-cli/tests/preview/basic/index.test.ts

@@ -0,0 +1,20 @@
+import {
+	getRandomPort,
+	normalizeStderr,
+	runWatch
+} from "../../utils/test-utils";
+
+describe("should run preview command as expected", () => {
+	it("should work", async () => {
+		const port = await getRandomPort();
+		const { stderr } = await runWatch(
+			__dirname,
+			["preview", "--port", port.toString()],
+			{
+				killString: /localhost/
+			}
+		);
+
+		expect(normalizeStderr(stderr)).toContain("Project is running at");
+	});
+});

packages/rspack-cli/tests/preview/basic/rspack.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	mode: "production"
+};

packages/rspack-cli/tests/preview/basic/src/index.js

@@ -0,0 +1 @@
+console.log("hello world");

packages/rspack-cli/tests/preview/ts-config-file/index.test.ts

@@ -0,0 +1,20 @@
+import {
+	getRandomPort,
+	normalizeStderr,
+	runWatch
+} from "../../utils/test-utils";
+
+describe("should run preview command with ts config file as expected", () => {
+	it("should work", async () => {
+		const port = await getRandomPort();
+		const { stderr } = await runWatch(
+			__dirname,
+			["preview", "--port", port.toString()],
+			{
+				killString: /localhost/
+			}
+		);
+
+		expect(normalizeStderr(stderr)).toContain("Project is running at");
+	});
+});

packages/rspack-cli/tests/preview/ts-config-file/rspack.config.ts

@@ -0,0 +1,3 @@
+export default {
+	mode: "production"
+};

packages/rspack-cli/tests/preview/ts-config-file/src/index.js

@@ -0,0 +1 @@
+console.log("hello world");

packages/rspack-cli/tests/utils/test-utils.ts

@@ -5,6 +5,7 @@
 const os = require("os");
 const { stripVTControlCharacters: stripAnsi } = require("node:util");
 const path = require("path");
+const net = require("node:net");
 const fs = require("fs");
 const execa = require("execa");
 const { exec } = require("child_process");
@@ -394,6 +395,42 @@ const uniqueDirectoryForTest = async () => {
 	return result;
 };
 
+function isPortAvailable(port: number) {
+	try {
+		const server = net.createServer().listen(port);
+		return new Promise(resolve => {
+			server.on("listening", () => {
+				server.close();
+				resolve(true);
+			});
+
+			server.on("error", () => {
+				resolve(false);
+			});
+		});
+	} catch (err) {
+		return false;
+	}
+}
+
+const portMap = new Map();
+
+// Available port ranges: 1024 ～ 65535
+// `10080` is not available in macOS CI, `> 50000` get 'permission denied' in Windows.
+// so we use `15000` ~ `45000`.
+export async function getRandomPort(
+	defaultPort = Math.ceil(Math.random() * 30000) + 15000
+) {
+	let port = defaultPort;
+	while (true) {
+		if (!portMap.get(port) && (await isPortAvailable(port))) {
+			portMap.set(port, 1);
+			return port;
+		}
+		port++;
+	}
+}
+
 export {
 	run,
 	runAndGetProcess,