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 Rspackv4.0.426

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

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

Config.setExperimentalRspackEnabled(true);

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

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:

bundle.ts
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.

remotion.config.ts
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:

remotion.config.ts
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`v4.0.498

Use Config.overrideRspackConfig() when Rspack is enabled:

remotion.config.ts
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.

src/webpack-override.ts
import {WebpackOverrideFn} from '@remotion/bundler';

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

remotion.config.ts
import {Config} from '@remotion/cli/config';
import {webpackOverride} from './src/webpack-override';

Config.overrideWebpackConfig(webpackOverride);

With bundle:

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

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

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:

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:

npm
bun
pnpm
yarn

npm i --save-exact @mdx-js/loader @mdx-js/react

pnpm i @mdx-js/loader @mdx-js/react

bun i @mdx-js/loader @mdx-js/react

yarn --exact add @mdx-js/loader @mdx-js/react

Create a file with the Webpack override:

enable-mdx.ts
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:

remotion.config.ts
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:

npm
bun
pnpm
yarn

npm i --save-exact postcss postcss-loader postcss-size

pnpm i postcss postcss-loader postcss-size

bun i postcss postcss-loader postcss-size

yarn --exact add postcss postcss-loader postcss-size

Create a file with the Webpack override:

src/enable-postcss.ts
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:

remotion.config.ts
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:

npm
bun
pnpm
yarn

npm i --save-exact @svgr/webpack

pnpm i @svgr/webpack

bun i @svgr/webpack

yarn --exact add @svgr/webpack

Declare an override function:

src/enable-svgr.ts
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:

remotion.config.ts
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:

npm
bun
pnpm
yarn

npm i --save-exact glsl-shader-loader glslify glslify-import-loader raw-loader

pnpm i glsl-shader-loader glslify glslify-import-loader raw-loader

bun i glsl-shader-loader glslify glslify-import-loader raw-loader

yarn --exact add glsl-shader-loader glslify glslify-import-loader raw-loader

Declare a webpack override:

src/enable.glsl.ts
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'],
        },
      ],
    },
  };
};

remotion.config.ts
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.

remotion.config.ts - synchronous
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.

remotion.config.ts - asynchronous
import {Config} from '@remotion/cli/config';

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

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

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`

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.tsv4.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:

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

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

Bundler roadmap​

Enable Rspackv4.0.426​

Override the bundler configuration​

Webpack overrides in remotion.config.ts​

Rspack overrides in remotion.config.tsv4.0.498​

When using bundle() and deploySite()​

Multiple overrides​

Snippets​

Enabling MDX support​

Enable TailwindCSS support​

Enable PostCSS support​

Enable SASS/SCSS support​

Enable SVGR support​

Enable support for GLSL imports​

Enable WebAssembly​

Change the @jsxImportSource​

Use legacy babel loader​

Enable TypeScript aliases​

Customizing configuration file location​

Importing ES Modules in remotion.config.tsv4.0.117​

See also​