From f327671bee4ecdeed988d65f8a2f23392f081e98 Mon Sep 17 00:00:00 2001
From: Jonny Burger <jonathanburger11@gmail.com>
Date: Thu, 20 Feb 2025 11:03:09 +0100
Subject: [PATCH] Document how to change the `@jsxImportSource`

---
 .../docs/docs/overwriting-webpack-config.mdx  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/docs/docs/overwriting-webpack-config.mdx b/packages/docs/docs/overwriting-webpack-config.mdx
index 18c62c9384..57d561c530 100644
--- a/packages/docs/docs/overwriting-webpack-config.mdx
+++ b/packages/docs/docs/overwriting-webpack-config.mdx
@@ -356,6 +356,45 @@ 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](#when-using-bundle-and-deploysite).
 
+### Change the `@jsxImportSource`
+
+```tsx twoslash
+import {Config} from '@remotion/cli/config';
+
+Config.overrideWebpackConfig((config) => {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: config.module?.rules?.map((rule) => {
+        // @ts-expect-error
+        if (!rule?.use) {
+          return rule;
+        }
+
+        return {
+          // @ts-expect-error
+          ...rule,
+          // @ts-expect-error
+          use: rule?.use.map((use) => {
+            if (!use?.loader?.includes('esbuild')) {
+              return use;
+            }
+            return {
+              ...use,
+              options: {
+                ...use.options,
+                jsxImportSource: 'react',
+              },
+            };
+          }),
+        };
+      }),
+    },
+  };
+});
+```
+
 ### Use legacy babel loader
 
 See [Using legacy Babel transpilation](/docs/legacy-babel).