Start converting to MDX2 (doesnt work yet)

beta/next.config.mjs

@@ -2,11 +2,15 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-const path = require('path');
-const {remarkPlugins} = require('./plugins/markdownToHtml');
+import path from 'path';
+import {remarkPlugins} from './plugins/markdownToHtml.mjs';
+import { createRequire } from 'module';
+import {fileURLToPath} from 'node:url';
+
+const require = createRequire(import.meta.url);
 const redirects = require('./src/redirects.json');
 
-module.exports = {
+export default {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   experimental: {
     plugins: true,
@@ -55,7 +59,7 @@ module.exports = {
             remarkPlugins,
           },
         },
-        path.join(__dirname, './plugins/md-layout-loader'),
+        fileURLToPath(new URL('./plugins/md-layout-loader', import.meta.url))
       ],
     });
 

beta/package.json

@@ -22,9 +22,9 @@
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
-    "@mdx-js/mdx": "^1.6.16",
-    "@mdx-js/react": "^1.6.16",
-    "@mdx-js/tag": "^0.20.3",
+    "@mdx-js/mdx": "^2.0.0-rc.1",
+    "@mdx-js/react": "^2.0.0-rc.1",
+    "@mdx-js/tag": "^1.0.0-alpha.6",
     "@next/plugin-google-analytics": "^10.0.6",
     "add": "^2.0.6",
     "body-scroll-lock": "^3.1.3",
@@ -42,7 +42,7 @@
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
-    "@mdx-js/loader": "^1.6.16",
+    "@mdx-js/loader": "^2.0.0-rc.1",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/github-slugger": "^1.3.0",
@@ -76,6 +76,7 @@
     "reading-time": "^1.2.0",
     "remark": "^12.0.1",
     "remark-external-links": "^7.0.0",
+    "remark-gfm": "^3.0.1",
     "remark-html": "^12.0.0",
     "remark-images": "^2.0.0",
     "remark-unwrap-images": "^2.0.0",

beta/plugins/markdownToHtml.mjs

@@ -1,3 +1,11 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import remarkGfm from 'remark-gfm';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
 const remark = require('remark');
 const externalLinks = require('remark-external-links'); // Add _target and rel to external links
 const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
@@ -6,18 +14,16 @@ const unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper aro
 const smartyPants = require('./remark-smartypants'); // Cleans up typography
 const html = require('remark-html');
 
-module.exports = {
-  remarkPlugins: [
-    externalLinks,
-    customHeaders,
-    images,
-    unrwapImages,
-    smartyPants,
-  ],
-  markdownToHtml,
-};
+export const remarkPlugins = [
+  remarkGfm,
+  externalLinks,
+  customHeaders,
+  images,
+  unrwapImages,
+  smartyPants,
+];
 
-async function markdownToHtml(markdown) {
+export async function markdownToHtml(markdown) {
   const result = await remark()
     .use(externalLinks)
     .use(customHeaders)