Webpack and Rspack

Remotion bundles your project before opening the Studio or rendering media. It supports Webpack and Rspack.

Bundler roadmap

Remotion used Webpack exclusively until experimental Rspack support was added in v4.0.426. Webpack remains the default bundler.

Rspack is intended to replace Webpack:

Rspack will soon become the default for newly created projects.
In a future major version of Remotion, Webpack support will be removed and Rspack will be the only bundler.

You can enable Rspack now to test your project before this transition.

Enable Rspack<AvailableFrom v="4.0.426" />

Enable Rspack for CLI commands in remotion.config.ts:

import {Config} from '@remotion/cli/config';

Config.setExperimentalRspackEnabled(true);

To enable it for one command, use the --experimental-rspack flag:

bash

npx remotion studio --experimental-rspack

The flag is also available for other commands that bundle your project, such as render, still, and bundle.

When using the Node.js bundle() API, set rspack to true:

// @target: esnext
import {bundle} from '@remotion/bundler';

await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  rspack: true,
});

The deploySite() options for Lambda and Cloud Run have the same rspack setting.

Override the bundler configuration

Remotion provides three config file APIs:

API	When it runs
`Config.overrideBundlerConfig()`	With either selected bundler. Runs first.
`Config.overrideWebpackConfig()`	Only when Webpack is selected. Runs after the shared override.
`Config.overrideRspackConfig()`	Only when Rspack is selected. Runs after the shared override.

You can call each override API more than once. Overrides of the same type run in registration order.

Only use Config.overrideBundlerConfig() for changes that are compatible with both bundlers. Webpack and Rspack plugins are not interchangeable.

Remotion ships with its own Webpack configuration and Rspack configuration. Each override receives the previous configuration and returns the next one.

Webpack overrides in `remotion.config.ts`

In your remotion.config.ts file, you can call Config.overrideWebpackConfig() from @remotion/cli/config.

import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});

You may also mutate the configuration object. Return the same object after mutating it:

import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((config) => {
  config.module ??= {};
  config.module.rules ??= [];

  config.module.rules.push({
    test: /\.txt$/,
    type: 'asset/source',
  });

  return config;
});

:::info Using the reducer pattern will help with type safety, give you auto-complete, ensure forwards-compatibility and keep it completely flexible - you can override just one property or pass in a completely new Webpack configuration. :::

Rspack overrides in `remotion.config.ts`<AvailableFrom v="4.0.498" />

Use Config.overrideRspackConfig() when Rspack is enabled:

import {Config} from '@remotion/cli/config';

Config.overrideRspackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Rspack-specific configuration
  };
});

When using `bundle()` and `deploySite()`

Node.js APIs do not read remotion.config.ts. Pass the overrides directly to bundle() or deploySite(). Put an override in a separate file to import it from both remotion.config.ts and your Node.js script.

For Rspack, pass rspackOverride. Pass portable changes as bundlerOverride.

import {WebpackOverrideFn} from '@remotion/bundler';

export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Your override here
  };
};

// @filename: ./src/webpack-override.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import {Config} from '@remotion/cli/config';
import {webpackOverride} from './src/webpack-override';

Config.overrideWebpackConfig(webpackOverride);

With bundle:

// @filename: ./src/webpack-override.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// @target: esnext
// ---cut---
import {bundle} from '@remotion/bundler';
import {webpackOverride} from './src/webpack-override';

await bundle({
  entryPoint: require.resolve('./src/index.ts'),
  webpackOverride,
});

Or while using with deploySite:

// @filename: ./src/webpack-override.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// @target: esnext
// ---cut---
import {deploySite} from '@remotion/lambda';
import {webpackOverride} from './src/webpack-override';

await deploySite({
  entryPoint: require.resolve('./src/index.ts'),
  region: 'us-east-1',
  bucketName: 'remotionlambda-c7fsl3d',
  options: {
    webpackOverride,
  },
  // ...other parameters
});

Multiple overrides

If you have multiple overrides, you should curry them:

tsx

import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig((c) => enableScss(enableTailwind(c)));

From Remotion v4.0.229, you can also use Config.overrideWebpackConfig multiple times, but this only works in the config file:

tsx

import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
import {enableTailwind} from '@remotion/tailwind-v4';

Config.overrideWebpackConfig(enableScss);
Config.overrideWebpackConfig(enableTailwind);

Snippets

Enabling MDX support

Install the following dependencies:

Create a file with the Webpack override:

import {WebpackOverrideFn} from '@remotion/bundler';
// ---cut---
export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ? currentConfiguration.module.rules : []),
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: '@mdx-js/loader',
              options: {},
            },
          ],
        },
      ],
    },
  };
};

Add it to the config file:

// @filename: ./src/enable-mdx.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableMdx: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import {Config} from '@remotion/cli/config';
import {enableMdx} from './src/enable-mdx';

Config.overrideWebpackConfig(enableMdx);

Add it to your Node.JS API calls as well if necessary.
Create a file which contains declare module '*.mdx'; in your project to fix a TypeScript error showing up.

Enable TailwindCSS support

Enable PostCSS support

Use this snippet for generic PostCSS plugins. For TailwindCSS, use the TailwindCSS docs instead.

Install the following dependencies:

Create a file with the Webpack override:

import {WebpackOverrideFn} from '@remotion/bundler';
// ---cut---
export const enablePostCSS: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: (currentConfiguration.module?.rules ?? []).map((rule) => {
        if (!rule || rule === '...') {
          return rule;
        }

        if (!rule.test?.toString().includes('.css')) {
          return rule;
        }

        const use = Array.isArray(rule.use)
          ? rule.use
          : rule.use
            ? [rule.use]
            : [];

        return {
          ...rule,
          use: [
            ...use,
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: ['postcss-size'],
                },
              },
            },
          ],
        };
      }),
    },
  };
};

Add it to the config file:

// @filename: ./src/enable-postcss.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const enablePostCSS: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import {Config} from '@remotion/cli/config';
import {enablePostCSS} from './src/enable-postcss';

Config.overrideWebpackConfig(enablePostCSS);

Add it to your Node.JS API calls as well if necessary.
Restart the Remotion Studio.

Enable SASS/SCSS support

The easiest way is to use the @remotion/enable-scss.
Follow these instructions to enable it.

Enable SVGR support

This allows you to enable import SVG files as React components.

Install the following dependency:

Declare an override function:

import {WebpackOverrideFn} from '@remotion/bundler';

export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        {
          test: /\.svg$/i,
          issuer: /\.[jt]sx?$/,
          resourceQuery: {not: [/url/]}, // Exclude react component if *.svg?url
          use: ['@svgr/webpack'],
        },
        ...(currentConfiguration.module?.rules ?? []).map((r) => {
          if (!r) {
            return r;
          }
          if (r === '...') {
            return r;
          }
          if (!r.test?.toString().includes('svg')) {
            return r;
          }
          return {
            ...r,
            // Remove Remotion loading SVGs as a URL
            test: new RegExp(r.test.toString().replace(/svg\|/g, '').slice(1, -1)),
          };
        }),
      ],
    },
  };
};

Add the override function to your remotion.config.ts file:

// @filename: ./src/enable-svgr.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableSvgr: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import {Config} from '@remotion/cli/config';
import {enableSvgr} from './src/enable-svgr';

Config.overrideWebpackConfig(enableSvgr);

Add it to your Node.JS API calls as well if necessary.
Restart the Remotion Studio.

Enable support for GLSL imports

Install the following dependencies:

Declare a webpack override:

import {WebpackOverrideFn} from '@remotion/bundler';

export const enableGlsl: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ? currentConfiguration.module.rules : []),
        {
          test: /\.(glsl|vs|fs|vert|frag)$/,
          exclude: /node_modules/,
          use: ['glslify-import-loader', 'raw-loader', 'glslify-loader'],
        },
      ],
    },
  };
};

// @filename: ./src/enable-glsl.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableGlsl: WebpackOverrideFn = (c) => c;

// @filename: remotion.config.ts
// ---cut---
import {Config} from '@remotion/cli/config';
import {enableGlsl} from './src/enable-glsl';

Config.overrideWebpackConfig(enableGlsl);

Add the following to your entry point (e.g. src/index.ts):

declare module '*.glsl' {
  const value: string;
  export default value;
}

Add it to your Node.JS API calls as well if necessary.
Reset the webpack cache by deleting the node_modules/.cache folder.
Restart the Remotion Studio.

Enable WebAssembly

There are two WebAssembly modes: asynchronous and synchronous. We recommend testing both and seeing which one works for the WASM library you are trying to use.

import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      syncWebAssembly: true,
    },
  };
});

:::note Since Webpack does not allow synchronous WebAssembly code in the main chunk, you most likely need to declare your composition using lazyComponent instead of component. Check out a demo project for an example. :::

import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      asyncWebAssembly: true,
    },
  };
});

After you've done that, clear the Webpack cache:

bash

rm -rf node_modules/.cache

After restarting, you can import .wasm files using an import statement.

Add the Webpack override to your Node.JS API calls as well if necessary.

Change the `@jsxImportSource`

tsx

import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    module: {
      ...config.module,
      rules: config.module?.rules?.map((rule) => {
        // @ts-expect-error
        if (!rule?.use) {
          return rule;
        }

        return {
          // @ts-expect-error
          ...rule,
          // @ts-expect-error
          use: rule?.use.map((use) => {
            if (!use?.loader?.includes('esbuild')) {
              return use;
            }
            return {
              ...use,
              options: {
                ...use.options,
                jsxImportSource: 'react',
              },
            };
          }),
        };
      }),
    },
  };
});

Use legacy babel loader

See Using legacy Babel transpilation.

Enable TypeScript aliases

See TypeScript aliases.

Customizing configuration file location

You can pass a --config option to the command line to specify a custom location for your configuration file.

Importing ES Modules in remotion.config.ts<AvailableFrom v="4.0.117"/>

The config file gets executed in a CommonJS environment. If you want to import ES modules, you can pass an async function to Config.overrideWebpackConfig:

// @filename: src/enable-sass.ts
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableSass: WebpackOverrideFn = (c) => c;

// @filename: remotion.config.ts
// ---cut---
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig(async (currentConfiguration) => {
  const {enableSass} = await import('./src/enable-sass');
  return enableSass(currentConfiguration);
});