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

  1. Install the following dependencies:
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss autoprefixer
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss 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.

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