Using legacy Babel transpilation

import Tabs from "@theme/Tabs"; import TabItem from '@theme/TabItem';

Remotion uses faster transpilation by default: esbuild-loader with Webpack and SWC with Rspack.

To use Babel instead, override the bundler configuration. Overrides work reducer-style: You receive the default configuration and return the modified configuration.

The @remotion/babel-loader compatibility package provides replaceLoadersWithBabel() to replace the default JavaScript and TypeScript loaders with Babel.

This should not be necessary in general. We encourage you to report issues with the default transpiler.

Example

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, ] }> <TabItem value="npm">

npm i babel-loader @babel/preset-env @babel/preset-react

pnpm i babel-loader @babel/preset-env @babel/preset-react

yarn add babel-loader @babel/preset-env @babel/preset-react

import { Config } from "@remotion/cli/config";
// ---cut---
import { replaceLoadersWithBabel } from "@remotion/babel-loader";

Config.overrideBundlerConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});

When using bundle()

When using the bundle() Node.js API, provide the bundler override directly because Node.js APIs do not read from the config file. To deploy the resulting directory to Lambda, pass it to deploySiteFromBundle().

// @filename: ./src/bundler-override.ts
import { BundlerOverrideFn } from "@remotion/bundler";
export const bundlerOverride: BundlerOverrideFn = (c) => c;
// @filename: remotion.config.ts
// @target: esnext
// ---cut---
import { bundle } from "@remotion/bundler";
import { replaceLoadersWithBabel } from "@remotion/babel-loader";

await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  bundlerOverride: (config) => replaceLoadersWithBabel(config),
});

See also

• Custom bundler config