Refactor: make compileMDX works for both App/Pages Router

Author: SukkaW

next.config.js

@@ -72,6 +72,11 @@ const nextConfig = {
 
     return config;
   },
+  serverExternalPackages: [
+    '@babel/core',
+    '@babel/preset-react',
+    '@babel/plugin-transform-modules-commonjs',
+  ],
 };
 
 module.exports = nextConfig;

src/utils/compileMDX.ts

@@ -96,9 +96,13 @@ export default async function compileMDX(
     ],
   });
   const {transform} = require('@babel/core');
+
+  const babelPluginTransformModulesCommonjs = require('@babel/plugin-transform-modules-commonjs');
+  const babelPresetReact = require('@babel/preset-react');
+
   const jsCode = await transform(jsxCode, {
-    plugins: ['@babel/plugin-transform-modules-commonjs'],
-    presets: ['@babel/preset-react'],
+    plugins: [babelPluginTransformModulesCommonjs],
+    presets: [babelPresetReact],
   }).code;
 
   // Prepare environment for MDX.