Skip to main content

Custom Webpack config

You can customize the Webpack configuration if you have at least Version 1.1 of Remotion.

Create a config file called remotion.config.ts in the root of your project. As a confirmation, you should get a console message Applied configuration from [configuration-file].

Overriding the webpack config​

Get familiar with the default Webpack configuration which can be found here.

In your remotion.config.ts file, you can call Config.Bundler.overrideWebpackConfig from remotion.

Overriding the Webpack config uses the reducer pattern - pass in a function that takes as it's argument a Webpack configuration and return a new Webpack configuration.

ts
import { Config } from "remotion";
 
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules ?? []),
        // Add more loaders here
      ],
    },
  };
});
ts
import { Config } from "remotion";
 
Config.Bundling.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.

Snippets​

Enabling MDX support​

The following remotion.config.ts file shows how to enable support for MDX. Installation of mdx-loader babel-loader @babel/preset-env @babel/preset-react is required.

ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []),
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-env",
                  [
                    "@babel/preset-react",
                    {
                      runtime: "automatic",
                    },
                  ],
                ],
              },
            },
            "mdx-loader",
          ],
        },
      ],
    },
  };
});
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []),
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-env",
                  [
                    "@babel/preset-react",
                    {
                      runtime: "automatic",
                    },
                  ],
                ],
              },
            },
            "mdx-loader",
          ],
        },
      ],
    },
  };
});
info

Create a file which contains declare module '*.mdx'; in your project to fix a TypeScript error showing up.

Enable TailwindCSS support​

info

This documentation concerns TailwindCSS v2. Help us update it to v3!

  1. Install the following dependencies:
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss@2 autoprefixer
  1. Add the following to your remotion.config.ts file:
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []
        ).filter((rule) => {
          if (rule === "...") {
            return false;
          }
          if (rule.test?.toString().includes(".css")) {
            return false;
          }
          return true;
        }),
        {
          test: /\.css$/i,
          use: [
            "style-loader",
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    "postcss-preset-env",
                    "tailwindcss",
                    "autoprefixer",
                  ],
                },
              },
            },
          ],
        },
      ],
    },
  };
});
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    module: {
      ...currentConfiguration.module,
      rules: [
        ...(currentConfiguration.module?.rules
          ? currentConfiguration.module.rules
          : []
        ).filter((rule) => {
          if (rule === "...") {
            return false;
          }
          if (rule.test?.toString().includes(".css")) {
            return false;
          }
          return true;
        }),
        {
          test: /\.css$/i,
          use: [
            "style-loader",
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    "postcss-preset-env",
                    "tailwindcss",
                    "autoprefixer",
                  ],
                },
              },
            },
          ],
        },
      ],
    },
  };
});
  1. Create a file src/style.css with the following content:
css
@tailwind base;
@tailwind components;
@tailwind utilities;
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Import the stylesheet in your src/Video.tsx file. Add to the top of the file:
js
import "./style.css";
js
import "./style.css";

  1. Start using TailwindCSS! You can verify that it's working by adding className="bg-red-900" to any element.

  2. Optional: Add a tailwind.config.js file to the root of your project. Add /* eslint-env node */ to the top of the file to get rid of an ESLint rule complaining that module is not defined.

warning

Due to a caching bug, the config file might not be picked up until you remove the node_modules/.cache folder - watch this issue: https://github.com/remotion-dev/remotion/issues/315

Enable SASS/SCSS support​

  1. Install the following dependencies:
bash
npm i sass sass-loader
bash
npm i sass sass-loader
  1. Add the following to your remotion.config.ts file:
ts
Config.Bundling.overrideWebpackConfig((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 } },
          ],
        },
      ],
    },
  };
});
ts
Config.Bundling.overrideWebpackConfig((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 } },
          ],
        },
      ],
    },
  };
});
  1. Restart the preview server.

Enable support for GLSL imports​

  1. Install the following dependencies:
bash
npm i glsl-shader-loader glslify glslify-import-loader raw-roader
bash
npm i glsl-shader-loader glslify glslify-import-loader raw-roader
  1. Add the following to your remotion.config.ts file:
ts
Config.Bundling.overrideWebpackConfig((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"],
        },
      ],
    },
  };
});
ts
Config.Bundling.overrideWebpackConfig((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"],
        },
      ],
    },
  };
});
  1. Add the following to your entry file (e.g. src/index.tsx):
ts
declare module "*.glsl" {
  const value: string;
  export default value;
}
ts
declare module "*.glsl" {
  const value: string;
  export default value;
}
  1. Reset the webpack cache by deleting the node_modules/.cache folder.
  2. Restart the preview server.

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

Use legacy babel loader​

See Using legacy Babel transpilation.

Customizing configuration file location​

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

See also​