Skip to main content

Using legacy Babel transpilation

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​

bash
npm i mdx-loader babel-loader @babel/preset-env @babel/preset-react
bash
npm i mdx-loader 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​