Skip to content

Commit

Permalink
Allow calling Config.overrideWebpackConfig() multiple times
Browse files Browse the repository at this point in the history
  • Loading branch information
@JonnyBurger
JonnyBurger committed Nov 7, 2024
1 parent acc9ef1 commit bf4c621
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 75 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"testssr": "turbo run testssr --no-update-notifier",
"testlambda": "turbo run testlambda --concurrency=1 --no-update-notifier",
"ci": "turbo run make test --concurrency=1 --no-update-notifier",
"watch": "turbo --no-daemon run make && turbo --no-daemon watch make",
"watch": "turbo watch make",
"release-alpha": "pnpm recursive publish --tag=alpha --no-git-checks && pnpm recursive run --sequential publishprivate",
"release": "pnpm recursive publish && pnpm recursive run --sequential publishprivate && git push --tags && git push",
"clean": "turbo run clean && rm -rf packages/**/dist && rm -rf packages/**/node_modules && rm -rf node_modules && rm -rf .cache && rm -rf packages/**/tsconfig.tsbuildinfo && rm -f packages/tsconfig.tsbuildinfo && rm -rf packages/**/.turbo && rm -rf .turbo"
Expand Down
33 changes: 2 additions & 31 deletions packages/cli/src/config/override-webpack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,7 @@ export const getWebpackOverrideFn = () => {
return overrideFn;
};

// to warn the user if overrideWebpackConfig is invoked more than once
let invocations = 0;

export const overrideWebpackConfig = (fn: WebpackOverrideFn) => {
if (invocations > 0) {
const err = [
'You specified the Config.overrideWebpackConfig() multiple times, which is not supported.',
'Combine all Webpack overrides into a single one.',
'You can curry multiple overrides:',
'',
'Instead of:',
'',
' Config.overrideWebpackConfig((currentConfiguration) => {',
' return enableScss(currentConfiguration);',
' });',
' Config.overrideWebpackConfig((currentConfiguration) => {',
' return enableTailwind(currentConfiguration);',
' });',
'',
'Do this:',
'',
' Config.overrideWebpackConfig((currentConfiguration) => {',
' return enableScss(enableTailwind(currentConfiguration));',
' });',
'',
'Read more: https://www.remotion.dev/docs/config#overridewebpackconfig',
];
throw new Error(err.join('\n'));
}

invocations++;
overrideFn = fn;
const prevOverride = overrideFn;
overrideFn = async (c) => fn(await prevOverride(c));
};
109 changes: 66 additions & 43 deletions packages/docs/docs/overwriting-webpack-config.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
image: /generated/articles-docs-overwriting-webpack-config.png
id: webpack
title: Custom Webpack config
crumb: "How To"
crumb: 'How To'
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Remotion ships with [it's own Webpack configuration](https://github.com/remotion-dev/remotion/blob/main/packages/bundler/src/webpack-config.ts).

Expand All @@ -17,7 +17,7 @@ You can override it reducer-style by creating a function that takes the previous
In your [`remotion.config.ts`](/docs/config) file, you can call [`Config.overrideWebpackConfig()`](/docs/config#overridewebpackconfig) from `@remotion/cli/config`.

```ts twoslash title="remotion.config.ts"
import { Config } from "@remotion/cli/config";
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((currentConfiguration) => {
return {
Expand All @@ -42,7 +42,7 @@ Using the reducer pattern will help with type safety, give you auto-complete, en
When using the Node.JS APIs - [`bundle()`](/docs/bundle) for SSR or [`deploySite()`](/docs/lambda/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.

```ts twoslash title="src/webpack-override.ts"
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';

export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
return {
Expand All @@ -54,12 +54,12 @@ export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {

```ts twoslash title="remotion.config.ts"
// @filename: ./src/webpack-override.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import { Config } from "@remotion/cli/config";
import { webpackOverride } from "./src/webpack-override";
import {Config} from '@remotion/cli/config';
import {webpackOverride} from './src/webpack-override';

Config.overrideWebpackConfig(webpackOverride);
```
Expand All @@ -68,16 +68,16 @@ With `bundle`:

```ts twoslash title="my-script.js"
// @filename: ./src/webpack-override.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// @target: esnext
// ---cut---
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./src/webpack-override";
import {bundle} from '@remotion/bundler';
import {webpackOverride} from './src/webpack-override';

await bundle({
entryPoint: require.resolve("./src/index.ts"),
entryPoint: require.resolve('./src/index.ts'),
webpackOverride,
});
```
Expand All @@ -86,25 +86,48 @@ Or while using with `deploySite`:

```ts twoslash title="my-script.js"
// @filename: ./src/webpack-override.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const webpackOverride: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// @target: esnext
// ---cut---
import { deploySite } from "@remotion/lambda";
import { webpackOverride } from "./src/webpack-override";
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",
entryPoint: require.resolve('./src/index.ts'),
region: 'us-east-1',
bucketName: 'remotionlambda-c7fsl3d',
options: {
webpackOverride,
},
// ...other parameters
});
```

## Multiple Webpack overrides

If you have multiple overrides, you should curry them:

```tsx twoslash
import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
import {enableTailwind} from '@remotion/tailwind';

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:

```tsx twoslash
import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
import {enableTailwind} from '@remotion/tailwind';

Config.overrideWebpackConfig(enableScss);
Config.overrideWebpackConfig(enableTailwind);
```

## Snippets

### Enabling MDX support
Expand All @@ -116,7 +139,7 @@ await deploySite({
2. Create a file with the Webpack override:

```ts twoslash title="enable-mdx.ts"
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
// ---cut---
export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
return {
Expand All @@ -131,7 +154,7 @@ export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
test: /\.mdx?$/,
use: [
{
loader: "@mdx-js/loader",
loader: '@mdx-js/loader',
options: {},
},
],
Expand All @@ -146,12 +169,12 @@ export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {

```ts twoslash title="remotion.config.ts"
// @filename: ./src/enable-mdx.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableMdx: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import { Config } from "@remotion/cli/config";
import { enableMdx } from "./src/enable-mdx";
import {Config} from '@remotion/cli/config';
import {enableMdx} from './src/enable-mdx';

Config.overrideWebpackConfig(enableMdx);
```
Expand Down Expand Up @@ -181,7 +204,7 @@ This allows you to enable `import` SVG files as React components.
2. Declare an override function:

```ts twoslash title="src/enable-svgr.ts"
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';

export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
return {
Expand All @@ -192,24 +215,24 @@ export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
resourceQuery: { not: [/url/] }, // Exclude react component if *.svg?url
use: ["@svgr/webpack"],
resourceQuery: {not: [/url/]}, // Exclude react component if *.svg?url
use: ['@svgr/webpack'],
},
...(currentConfiguration.module?.rules ?? []).map((r) => {
if (!r) {
return r;
}
if (r === "...") {
if (r === '...') {
return r;
}
if (!r.test?.toString().includes("svg")) {
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),
r.test.toString().replace(/svg\|/g, '').slice(1, -1),
),
};
}),
Expand All @@ -223,12 +246,12 @@ export const enableSvgr: WebpackOverrideFn = (currentConfiguration) => {

```ts twoslash title="remotion.config.ts"
// @filename: ./src/enable-svgr.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableSvgr: WebpackOverrideFn = (c) => c;
// @filename: remotion.config.ts
// ---cut---
import { Config } from "@remotion/cli/config";
import { enableSvgr } from "./src/enable-svgr";
import {Config} from '@remotion/cli/config';
import {enableSvgr} from './src/enable-svgr';

Config.overrideWebpackConfig(enableSvgr);
```
Expand All @@ -246,7 +269,7 @@ Config.overrideWebpackConfig(enableSvgr);
2. Declare a webpack override:

```ts twoslash title="src/enable.glsl.ts"
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';

export const enableGlsl: WebpackOverrideFn = (currentConfiguration) => {
return {
Expand All @@ -260,7 +283,7 @@ export const enableGlsl: WebpackOverrideFn = (currentConfiguration) => {
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: ["glslify-import-loader", "raw-loader", "glslify-loader"],
use: ['glslify-import-loader', 'raw-loader', 'glslify-loader'],
},
],
},
Expand All @@ -270,21 +293,21 @@ export const enableGlsl: WebpackOverrideFn = (currentConfiguration) => {

```ts twoslash title="remotion.config.ts"
// @filename: ./src/enable-glsl.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableGlsl: WebpackOverrideFn = (c) => c;

// @filename: remotion.config.ts
// ---cut---
import { Config } from "@remotion/cli/config";
import { enableGlsl } from "./src/enable-glsl";
import {Config} from '@remotion/cli/config';
import {enableGlsl} from './src/enable-glsl';

Config.overrideWebpackConfig(enableGlsl);
```

3. Add the following to your [entry point](/docs/terminology/entry-point) (e.g. `src/index.ts`):

```ts
declare module "*.glsl" {
declare module '*.glsl' {
const value: string;
export default value;
}
Expand All @@ -300,7 +323,7 @@ declare module "*.glsl" {
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.

```ts twoslash title="remotion.config.ts - synchronous"
import { Config } from "@remotion/cli/config";
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((conf) => {
return {
Expand All @@ -317,7 +340,7 @@ Since Webpack does not allow synchronous WebAssembly code in the main chunk, you
:::

```ts twoslash title="remotion.config.ts - asynchronous"
import { Config } from "@remotion/cli/config";
import {Config} from '@remotion/cli/config';

Config.overrideWebpackConfig((conf) => {
return {
Expand Down Expand Up @@ -357,15 +380,15 @@ The [config file](/docs/config) gets executed in a CommonJS environment. If you

```ts twoslash title="remotion.config.ts"
// @filename: src/enable-sass.ts
import { WebpackOverrideFn } from "@remotion/bundler";
import {WebpackOverrideFn} from '@remotion/bundler';
export const enableSass: WebpackOverrideFn = (c) => c;

// @filename: remotion.config.ts
// ---cut---
import { Config } from "@remotion/cli/config";
import {Config} from '@remotion/cli/config';

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

0 comments on commit bf4c621

Please sign in to comment.