Merge pull request #2664 from remotion-dev/dev-runtime

remotion-dev · Aug 2, 2023 · 0df637f · 0df637f · vercel · Aug 2, 2023
2 parents 1d2bd20 + e30406e
commit 0df637f
Show file tree

Hide file tree

Showing 6 changed files with 353 additions and 565 deletions.
diff --git a/packages/bundler/src/webpack-config.ts b/packages/bundler/src/webpack-config.ts
@@ -137,6 +137,7 @@ export const webpackConfig = ({
 			alias: {
 				// Only one version of react
 				'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+				'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
 				react: require.resolve('react'),
 				'react-dom/client': shouldUseReactDomClient
 					? require.resolve('react-dom/client')

diff --git a/packages/docs/docs/legacy-babel-loader.md b/packages/docs/docs/legacy-babel-loader.md
@@ -29,22 +29,22 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm i mdx-loader babel-loader @babel/preset-env @babel/preset-react
+npm i babel-loader @babel/preset-env @babel/preset-react
 ```
 
   </TabItem>
   <TabItem value="pnpm">
 
 ```bash
-pnpm i mdx-loader babel-loader @babel/preset-env @babel/preset-react
+pnpm i babel-loader @babel/preset-env @babel/preset-react
 ```
 
   </TabItem>
 
   <TabItem value="yarn">
 
 ```bash
-yarn add mdx-loader babel-loader @babel/preset-env @babel/preset-react
+yarn add babel-loader @babel/preset-env @babel/preset-react
 ```
 
   </TabItem>

diff --git a/packages/docs/docs/overwriting-webpack-config.md b/packages/docs/docs/overwriting-webpack-config.md
@@ -122,22 +122,22 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm i mdx-loader babel-loader @babel/preset-env @babel/preset-react
+npm i @mdx-js/loader @mdx-js/react
 ```
 
   </TabItem>
   <TabItem value="pnpm">
 
 ```bash
-pnpm i mdx-loader babel-loader @babel/preset-env @babel/preset-react
+pnpm i @mdx-js/loader @mdx-js/react
 ```
 
   </TabItem>
 
   <TabItem value="yarn">
 
 ```bash
-yarn add mdx-loader babel-loader @babel/preset-env @babel/preset-react
+yarn add @mdx-js/loader @mdx-js/react
 ```
 
   </TabItem>
@@ -161,20 +161,9 @@ export const enableMdx: WebpackOverrideFn = (currentConfiguration) => {
           test: /\.mdx?$/,
           use: [
             {
-              loader: "babel-loader",
-              options: {
-                presets: [
-                  "@babel/preset-env",
-                  [
-                    "@babel/preset-react",
-                    {
-                      runtime: "automatic",
-                    },
-                  ],
-                ],
-              },
+              loader: "@mdx-js/loader",
+              options: {},
             },
-            "mdx-loader",
           ],
         },
       ],

diff --git a/packages/example/package.json b/packages/example/package.json
@@ -23,10 +23,8 @@
 		"render-transparent": "remotion render --image-format=png --pixel-format=yuva420p --codec=vp8 react-svg out/video.webm"
 	},
 	"dependencies": {
-		"@babel/plugin-syntax-jsx": "7.12.13",
-		"@babel/preset-env": "7.12.13",
-		"@babel/preset-react": "7.12.13",
-		"@mdx-js/react": "^1.6.21",
+		"@mdx-js/react": "^2.3.0",
+		"@mdx-js/loader": "^2.3.0",
 		"@react-three/drei": "9.79.4",
 		"@react-three/fiber": "8.13.5",
 		"@remotion/babel-loader": "workspace:*",
@@ -56,7 +54,6 @@
 		"@types/web": "0.0.78",
 		"babel-loader": "^8.2.2",
 		"lottie-web": "5.12.2",
-		"mdx-loader": "3.0.2",
 		"opentype.js": "^1.3.4",
 		"polished": "^4.0.5",
 		"prettier": "^2.7.1",

diff --git a/packages/example/src/webpack-override.ts b/packages/example/src/webpack-override.ts
@@ -31,20 +31,9 @@ export const webpackOverride: WebpackOverrideFn = (currentConfiguration) => {
 					test: /\.mdx?$/,
 					use: [
 						{
-							loader: 'babel-loader',
-							options: {
-								presets: [
-									'@babel/preset-env',
-									[
-										'@babel/preset-react',
-										{
-											runtime: 'automatic',
-										},
-									],
-								],
-							},
+							loader: '@mdx-js/loader',
+							options: {},
 						},
-						'mdx-loader',
 					],
 				},
 			],