Skip to main content

Using legacy Babel transpilation

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

In Remotion 2.0, the traditional transpilation of Javascript and Typescript using the babel-loader has been replaced by the faster esbuild-loader by default.

If you for some reason need to go back to the previous behavior, you may override the Webpack configuration. Remember that overriding the Webpack configuration works reducer-style, where you get the default configuration in a function argument and you return the modified version of your config.

We provide a compatibility package @remotion/babel-loader that you can install into your Remotion project and use the function replaceLoadersWithBabel() to swap out the ESBuild loader with the old Babel one that was in Remotion 1.0

This should not be necessary in general, it is encouraged to report issues regarding the new ESBuild loader.

Example​

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

bash
npm i babel-loader @babel/preset-env @babel/preset-react
bash
npm i babel-loader @babel/preset-env @babel/preset-react
bash
pnpm i babel-loader @babel/preset-env @babel/preset-react
bash
pnpm i babel-loader @babel/preset-env @babel/preset-react
 
bash
yarn add babel-loader @babel/preset-env @babel/preset-react
bash
yarn add babel-loader @babel/preset-env @babel/preset-react
 
remotion.config.ts
ts
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});
remotion.config.ts
ts
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return replaceLoadersWithBabel(currentConfiguration);
});

When using bundle or deploySite​

When using the Node.JS APIs - bundle() for SSR or deploySite() for Lambda, you also need to provide the Webpack override, since the Node.JS APIs do not read from the config file.

my-script.js
ts
import { bundle } from "@remotion/bundler";
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride: (config) => replaceLoadersWithBabel(config),
});
my-script.js
ts
import { bundle } from "@remotion/bundler";
import { replaceLoadersWithBabel } from "@remotion/babel-loader";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride: (config) => replaceLoadersWithBabel(config),
});

See also​