@remotion/bundler: Add --rspack flag for optional Rspack bundling

Add Rspack as an optional alternative bundler controlled by `--rspack` flag
(e.g., `npx remotion studio --rspack`). Webpack remains the default.

- Add `@rspack/core` and `@rspack/plugin-react-refresh` dependencies
- Create `rspack-config.ts` paralleling webpack-config.ts with SWC loader
- Define `--rspack` CLI option and thread it through studio/bundle paths
- Branch compiler creation in start-server.ts and bundle.ts based on flag

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JonnyBurger

bun.lock

@@ -19,6 +19,8 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
+		"@rspack/core": "1.7.6",
+		"@rspack/plugin-react-refresh": "1.6.1",
 		"css-loader": "5.2.7",
 		"esbuild": "0.25.0",
 		"react-refresh": "0.9.0",

packages/bundler/package.json

@@ -9,6 +9,7 @@ import webpack from 'webpack';
 import {copyDir} from './copy-dir';
 import {indexHtml} from './index-html';
 import {readRecursively} from './read-recursively';
+import {rspackConfig} from './rspack-config';
 import type {WebpackOverrideFn} from './webpack-config';
 import {webpackConfig} from './webpack-config';
 
@@ -52,6 +53,7 @@ export type MandatoryLegacyBundleOptions = {
 	onSymlinkDetected: (path: string) => void;
 	keyboardShortcutsEnabled: boolean;
 	askAIEnabled: boolean;
+	rspack: boolean;
 };
 
 export type LegacyBundleOptions = Partial<MandatoryLegacyBundleOptions>;
@@ -75,7 +77,7 @@ export const getConfig = ({
 	onProgress?: (progress: number) => void;
 	options?: LegacyBundleOptions;
 }) => {
-	return webpackConfig({
+	const configArgs = {
 		entry: path.join(
 			require.resolve('@remotion/studio/renderEntry'),
 			'..',
@@ -84,9 +86,9 @@ export const getConfig = ({
 		),
 		userDefinedComponent: entryPoint,
 		outDir,
-		environment: 'production',
+		environment: 'production' as const,
 		webpackOverride: options?.webpackOverride ?? ((f) => f),
-		onProgress: (p) => {
+		onProgress: (p: number) => {
 			onProgress?.(p);
 		},
 		enableCaching: options?.enableCaching ?? true,
@@ -97,7 +99,13 @@ export const getConfig = ({
 		poll: null,
 		experimentalClientSideRenderingEnabled,
 		askAIEnabled: options?.askAIEnabled ?? true,
-	});
+	};
+
+	if (options?.rspack) {
+		return rspackConfig(configArgs);
+	}
+
+	return webpackConfig(configArgs);
 };
 
 type NewBundleOptions = {
@@ -229,20 +237,59 @@ export const internalBundle = async (
 			actualArgs.experimentalClientSideRenderingEnabled,
 	});
 
-	const output = (await promisified([config])) as
-		| webpack.MultiStats
-		| undefined;
-	if (isMainThread) {
-		process.chdir(currentCwd);
-	}
+	if (actualArgs.rspack) {
+		const {rspack: rspackFn} = require('@rspack/core');
+		const rspackCompiler = rspackFn(config);
+		const rspackOutput = await new Promise<{
+			toJson: (opts: unknown) => {
+				errors?: Array<{message: string; details: string}>;
+			};
+		}>((resolve, reject) => {
+			rspackCompiler.run(
+				(
+					err: Error | null,
+					stats: {
+						toJson: (opts: unknown) => {
+							errors?: Array<{message: string; details: string}>;
+						};
+					},
+				) => {
+					if (err) {
+						reject(err);
+						return;
+					}
+
+					rspackCompiler.close(() => {
+						resolve(stats);
+					});
+				},
+			);
+		});
 
-	if (!output) {
-		throw new Error('Expected webpack output');
-	}
+		if (isMainThread) {
+			process.chdir(currentCwd);
+		}
+
+		const {errors} = rspackOutput.toJson({});
+		if (errors !== undefined && errors.length > 0) {
+			throw new Error(errors[0].message + '\n' + errors[0].details);
+		}
+	} else {
+		const output = (await promisified([config as webpack.Configuration])) as
+			| webpack.MultiStats
+			| undefined;
+		if (isMainThread) {
+			process.chdir(currentCwd);
+		}
+
+		if (!output) {
+			throw new Error('Expected webpack output');
+		}
 
-	const {errors} = output.toJson();
-	if (errors !== undefined && errors.length > 0) {
-		throw new Error(errors[0].message + '\n' + errors[0].details);
+		const {errors} = output.toJson();
+		if (errors !== undefined && errors.length > 0) {
+			throw new Error(errors[0].message + '\n' + errors[0].details);
+		}
 	}
 
 	const publicPath = actualArgs?.publicPath ?? '/';
@@ -368,6 +415,7 @@ export async function bundle(...args: Arguments): Promise<string> {
 		renderDefaults: actualArgs.renderDefaults ?? null,
 		askAIEnabled: actualArgs.askAIEnabled ?? true,
 		keyboardShortcutsEnabled: actualArgs.keyboardShortcutsEnabled ?? true,
+		rspack: actualArgs.rspack ?? false,
 	});
 	return result;
 }

packages/bundler/src/bundle.ts

@@ -1,6 +1,7 @@
 import {findClosestFolderWithItem, getConfig, internalBundle} from './bundle';
 import {indexHtml} from './index-html';
 import {readRecursively} from './read-recursively';
+import {createRspackCompiler, rspackConfig} from './rspack-config';
 import {cacheExists, clearCache} from './webpack-cache';
 import {webpackConfig} from './webpack-config';
 import esbuild = require('esbuild');
@@ -9,6 +10,8 @@ import webpack = require('webpack');
 export const BundlerInternals = {
 	esbuild,
 	webpackConfig,
+	rspackConfig,
+	createRspackCompiler,
 	indexHtml,
 	cacheExists,
 	clearCache,