Custom Webpack config

Remotion ships with it's own Webpack configuration.

You can override it reducer-style by creating a function that takes the previous Webpack configuration and returns the the new one.

When rendering using the command line

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

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});

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.

When using `bundle()` and `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. We recommend you put the webpack override in a separate file so you can read it from both the command line and your Node.JS script.

src/webpack-override.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Your override here
  };
};

src/webpack-override.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    // Your override here
  };
};

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { webpackOverride } from "./src/webpack-override";
 
Config.overrideWebpackConfig(webpackOverride);

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { webpackOverride } from "./src/webpack-override";
 
Config.overrideWebpackConfig(webpackOverride);

With bundle:

my-script.js
ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./src/webpack-override";
 
await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  webpackOverride,
});

my-script.js
ts
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
ts
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
});

my-script.js
ts
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
});

Snippets

Enabling MDX support

Install the following dependencies:

npm
yarn
pnpm
bun

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

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

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

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

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

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

yarn --exact add @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
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: {},
            },
          ],
        },
      ],
    },
  };
};

enable-mdx.ts
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
ts
import { Config } from "@remotion/cli/config";
import { enableMdx } from "./src/enable-mdx";
 
Config.overrideWebpackConfig(enableMdx);

remotion.config.ts
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 SASS/SCSS support

Install the following dependencies:

npm
yarn
pnpm
bun

npm i --save-exact sass style-loader css-loader sass-loader

npm i --save-exact sass style-loader css-loader sass-loader

pnpm i sass style-loader css-loader sass-loader

pnpm i sass style-loader css-loader sass-loader

bun i sass style-loader css-loader sass-loader

bun i sass style-loader css-loader sass-loader

yarn --exact add sass style-loader css-loader sass-loader

yarn --exact add sass style-loader css-loader sass-loader

Declare an override function:

src/enable-sass.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const enableSass: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []),
        {
          test: /\.s[ac]ss$/i,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            { loader: "sass-loader", options: { sourceMap: true } },
          ],
        },
      ],
    },
  };
};

src/enable-sass.ts
ts
import { WebpackOverrideFn } from "@remotion/bundler";
 
export const enableSass: WebpackOverrideFn = (currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []),
        {
          test: /\.s[ac]ss$/i,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            { loader: "sass-loader", options: { sourceMap: true } },
          ],
        },
      ],
    },
  };
};

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

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableSass } from "./src/enable-sass";
 
Config.overrideWebpackConfig(enableSass);

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableSass } from "./src/enable-sass";
 
Config.overrideWebpackConfig(enableSass);

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

Enable SVGR support

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

Install the following dependency:

npm
yarn
pnpm
bun

npm i --save-exact @svgr/webpack

npm i --save-exact @svgr/webpack

pnpm i @svgr/webpack

pnpm i @svgr/webpack

bun i @svgr/webpack

bun i @svgr/webpack

yarn --exact add @svgr/webpack

yarn --exact add @svgr/webpack

Declare an override function:

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

src/enable-svgr.ts
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.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
ts
import { Config } from "@remotion/cli/config";
import { enableSvgr } from "./src/enable-svgr";
 
Config.overrideWebpackConfig(enableSvgr);

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

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

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

pnpm i 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

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

yarn --exact add 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
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"],
        },
      ],
    },
  };
};

src/enable.glsl.ts
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
ts
import { Config } from "@remotion/cli/config";
import { enableGlsl } from "./src/enable-glsl";
 
Config.overrideWebpackConfig(enableGlsl);

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

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

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
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      syncWebAssembly: true,
    },
  };
});

remotion.config.ts - synchronous
ts
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
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((conf) => {
  return {
    ...conf,
    experiments: {
      asyncWebAssembly: true,
    },
  };
});

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

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.

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
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig(async (currentConfiguration) => {
  const { enableSass } = await import("./src/enable-sass");
  return enableSass(currentConfiguration);
});

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig(async (currentConfiguration) => {
  const { enableSass } = await import("./src/enable-sass");
  return enableSass(currentConfiguration);
});

When rendering using the command line​

When using bundle() and deploySite()​

Snippets​

Enabling MDX support​

Enable TailwindCSS support​

Enable SASS/SCSS support​

Enable SVGR support​

Enable support for GLSL imports​

Enable WebAssembly​

Use legacy babel loader​

Enable TypeScript aliases​

Customizing configuration file location​

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

See also​