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.

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.

See also