Experiment: Migrate to Rspack

packages/babel-loader/package.json

@@ -26,7 +26,7 @@
 		"@babel/preset-typescript": "7.23.2",
 		"babel-loader": "8.2.2",
 		"react-refresh": "0.9.0",
-		"webpack": "5.94.0"
+		"@rspack/core": "1.0.14"
 	},
 	"devDependencies": {
 		"@remotion/bundler": "workspace:*",

packages/babel-loader/src/index.ts

@@ -1,5 +1,5 @@
 import type {WebpackConfiguration} from '@remotion/bundler';
-import type {RuleSetUseItem} from 'webpack';
+import type {RuleSetUseItem} from '@rspack/core';
 
 const envPreset = [
 	require.resolve('@babel/preset-env'),

packages/bundler/package.json

@@ -25,14 +25,14 @@
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
 		"css-loader": "5.2.7",
-		"esbuild": "0.18.6",
 		"react-refresh": "0.9.0",
 		"remotion": "workspace:*",
 		"@remotion/studio": "workspace:*",
 		"@remotion/studio-shared": "workspace:*",
 		"style-loader": "2.0.0",
 		"source-map": "0.7.3",
-		"webpack": "5.94.0"
+		"@rspack/core": "1.0.14",
+		"@rspack/plugin-react-refresh": "1.0.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -47,7 +47,6 @@
 		"ffmpeg",
 		"video",
 		"react",
-		"webpack",
 		"player"
 	],
 	"publishConfig": {

packages/bundler/src/bundle.ts

@@ -1,18 +1,19 @@
 import type {GitSource} from '@remotion/studio-shared';
 import {getProjectName, SOURCE_MAP_ENDPOINT} from '@remotion/studio-shared';
+import type {Configuration, Stats} from '@rspack/core';
+import {rspack} from '@rspack/core';
 import fs, {promises} from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import {promisify} from 'node:util';
 import {isMainThread} from 'node:worker_threads';
-import webpack from 'webpack';
 import {copyDir} from './copy-dir';
 import {indexHtml} from './index-html';
 import {readRecursively} from './read-recursively';
 import type {WebpackOverrideFn} from './webpack-config';
 import {webpackConfig} from './webpack-config';
 
-const promisified = promisify(webpack);
+const promisified = promisify(rspack);
 
 const prepareOutDir = async (specified: string | null) => {
 	if (specified) {
@@ -44,7 +45,6 @@ const trimTrailingSlash = (p: string): string => {
 export type MandatoryLegacyBundleOptions = {
 	webpackOverride: WebpackOverrideFn;
 	outDir: string | null;
-	enableCaching: boolean;
 	publicPath: string | null;
 	rootDir: string | null;
 	publicDir: string | null;
@@ -70,7 +70,7 @@ export const getConfig = ({
 	maxTimelineTracks: number | null;
 	onProgress?: (progress: number) => void;
 	options?: LegacyBundleOptions;
-}) => {
+}): Promise<Configuration> => {
 	const entry = path.resolve(__dirname, '..', './renderEntry.tsx');
 
 	return webpackConfig({
@@ -82,7 +82,6 @@ export const getConfig = ({
 		onProgress: (p) => {
 			onProgress?.(p);
 		},
-		enableCaching: options?.enableCaching ?? true,
 		maxTimelineTracks,
 		remotionRoot: resolvedRemotionRoot,
 		keyboardShortcutsEnabled: true,
@@ -203,7 +202,7 @@ export const internalBundle = async (
 	}
 
 	const {onProgress, ...options} = actualArgs;
-	const [, config] = await getConfig({
+	const config = await getConfig({
 		outDir,
 		entryPoint,
 		resolvedRemotionRoot,
@@ -224,7 +223,7 @@ export const internalBundle = async (
 		throw new Error('Expected webpack output');
 	}
 
-	const {errors} = output.toJson();
+	const {errors} = (output as Stats).toJson();
 	if (errors !== undefined && errors.length > 0) {
 		throw new Error(errors[0].message + '\n' + errors[0].details);
 	}
@@ -327,7 +326,6 @@ export async function bundle(...args: Arguments): Promise<string> {
 	const result = await internalBundle({
 		bufferStateDelayInMilliseconds:
 			actualArgs.bufferStateDelayInMilliseconds ?? null,
-		enableCaching: actualArgs.enableCaching ?? true,
 		entryPoint: actualArgs.entryPoint,
 		gitSource: actualArgs.gitSource ?? null,
 		ignoreRegisterRootWarning: actualArgs.ignoreRegisterRootWarning ?? false,

packages/bundler/src/case-sensitive-paths.ts

@@ -1,5 +1,5 @@
+import type {Compiler} from '@rspack/core';
 import path from 'path';
-import type {Compiler, InputFileSystem} from 'webpack';
 
 // Inlined from https://github.com/umijs/case-sensitive-paths-webpack-plugin/blob/master/src/index.ts
 
@@ -74,7 +74,7 @@ export class CaseSensitivePathsPlugin {
 				} else {
 					// read directory for the first time
 					deferrer = new Promise((resolve2) => {
-						(this.fs as InputFileSystem).readdir(dir, (_, files = []) => {
+						this.fs!.readdir(dir, (_, files = []) => {
 							// save cache, resolve promise and release deferrer
 							this.cacheMap.set(dir, files as string[]);
 							resolve2(files as string[]);
@@ -138,10 +138,13 @@ export class CaseSensitivePathsPlugin {
 				const {createData = data as typeof data.createData} = data;
 
 				if (
+					createData &&
 					createData.resource &&
 					this.isCheckable(
 						createData.resource,
+						// @ts-expect-error
 						createData.type,
+						// @ts-expect-error
 						createData.resourceResolveData?.context?.issuer,
 					)
 				) {