Skip to main content

Using legacy Babel transpilation

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​

npm i babel-loader @babel/preset-env @babel/preset-react
remotion.config.ts
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().

my-script.js
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​