MDX 2 support

[visceralfield]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

MDX 2 features several improvements over MDX 1. The main blocker on making gatsby-plugin-mdx support MDX 2 is that MDX 2 requires ESM, which Gatsby does not yet support. However, Gatsby could also try to solve this problem by including a CJS version of MDX 2 created using a bundler, as described here. Further details are beyond the scope of my knowledge, but I'm opening this issue so that progress on making MDX 2 possible in Gatsby can be tracked.

For 'issue reproduction' here I will describe what happens if one attempts to naively follow the MDX 2 migration guide in a Gatsby project.

Reproduction Link

https://mdxjs.com/migrating/v2/

Steps to Reproduce

1. Set up a new Gatsby project with npm init gatsby, selecting "add markdown and MDX support" when going through the questions.
2. Following the migration guide, running npm install @mdx-js/loader@next @mdx-js/react@next remark-gfm.
3. Create any page using MDX on the site.
4. Run npm start.
5. Open the MDX page in-browser.
   ...

Expected Result

The ideal result would be Gatsby 'just working' with MDX 2.

Actual Result

Gatsby presents the error message Unhandled Runtime Error: Unknown Runtime Error: _mdx_js_react__WEBPACK_IMPORTED_MODULE_2__.mdx is not a function in the browser, and Attempted import error: 'mdx' is not exported from '@mdx-js/react' (imported as 'mdx'). in the console.

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.2 - C:\Python39\python.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
  npmPackages:
    gatsby: ^4.4.0 => 4.4.0
    gatsby-plugin-mdx: ^3.4.0 => 3.4.0
    gatsby-source-filesystem: ^4.4.0 => 4.4.0

Config Flags

No response

[LekoArts]

ESM is something we plan on doing this quarter (#31599) which will unblock this.

[karlhorky]

@LekoArts are there any public issues / PRs that we can watch for this?

Now that Gatsby 4.9 has support for TypeScript configs some of the building blocks are in place for ESM support, but I assume that there is more to it to attain MDX v2 than just applying Parcel to transpile the ESM packages. (I'm assuming there's more to MDX v2 compatibility with gatsby-plugin-mdx)

Or... do you think I could already use my patch-package hack to transpile MDX v2 to CJS to upgrade to MDX v2 already now?

[karlhorky]

Oh nice, it seems @axe312ger opened #35650, which upgrades gatsby-plugin-mdx to MDX v2! 🙌

[axe312ger]

Exactly. Canary will be there soon!

[LekoArts]

Work on this has started, once a canary is out you can give your feedback here: #25068

[LekoArts]

Hi!

We merged #35650 which means that a new major version of gatsby-plugin-mdx will be released on August 16. You can already try it out by installing gatsby-plugin-mdx@next & gatsby@next.