From a4d209c2b1faf2e1d988ce0f24e4e7a395bed47a Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@gmail.com>
Date: Thu, 7 Apr 2022 14:54:01 -0400
Subject: [PATCH] Upgrade to MDX 2

---
 packages/core/integration-tests/package.json    |  2 +-
 packages/transformers/mdx/package.json          |  4 ++--
 packages/transformers/mdx/src/MDXTransformer.js | 17 ++++++++---------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/core/integration-tests/package.json b/packages/core/integration-tests/package.json
index 0b2fc681fd7..e218b21136a 100644
--- a/packages/core/integration-tests/package.json
+++ b/packages/core/integration-tests/package.json
@@ -20,7 +20,7 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.14.5",
     "@jetbrains/kotlinc-js-api": "^1.2.12",
-    "@mdx-js/react": "^1.5.3",
+    "@mdx-js/react": "^2",
     "autoprefixer": "^10.4.0",
     "chalk": "^4.1.0",
     "codecov": "^3.0.0",
diff --git a/packages/transformers/mdx/package.json b/packages/transformers/mdx/package.json
index 48ab86f3533..9a184f7b517 100644
--- a/packages/transformers/mdx/package.json
+++ b/packages/transformers/mdx/package.json
@@ -20,10 +20,10 @@
     "parcel": "^2.4.1"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/mdx": "^2",
     "@parcel/plugin": "2.4.1"
   },
   "peerDependencies": {
-    "@mdx-js/react": "^1.6.22"
+    "@mdx-js/react": "^2"
   }
 }
diff --git a/packages/transformers/mdx/src/MDXTransformer.js b/packages/transformers/mdx/src/MDXTransformer.js
index 7bcd3ee01ab..eba6b870d2d 100644
--- a/packages/transformers/mdx/src/MDXTransformer.js
+++ b/packages/transformers/mdx/src/MDXTransformer.js
@@ -1,19 +1,18 @@
 // @flow
 import {Transformer} from '@parcel/plugin';
-import mdx from '@mdx-js/mdx';
 
 export default (new Transformer({
   async transform({asset}) {
+    let { compile } = await import('@mdx-js/mdx');
     let code = await asset.getCode();
-    let compiled = await mdx(code);
 
-    asset.type = 'js';
-    asset.setCode(`/* @jsxRuntime classic */
-/* @jsx mdx */
-import React from 'react';
-import { mdx } from '@mdx-js/react'
-${compiled}
-`);
+    try {
+      let compiled = await compile(code);
+      asset.type = 'js';
+      asset.setCode(compiled.value);
+    } catch (e) {
+      throw e.toString(); // Adds the line and column number of errors
+    }
 
     return [asset];
   },