Theme UI provider import causes an ESM error when mdx-js/react is subsequently required

Describe the bug

MDX v2 switches to ESM, but Theme UI’s cjs file is imported during Next’s SSR, which causes an error. I’m not entirely sure if this is a bug in Theme UI or Next, but a direct @mdx-js/react import doesn’t cause an error. So, it seems like something to do with the preconstruct build during Next’s SSR, maybe? Result of it being a second level dependency?

error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/johno-mini/c/repro-mdx-v2-theme-ui/node_modules/@mdx-js/react/index.js
require() of ES modules is not supported.
require() of /Users/johno-mini/c/repro-mdx-v2-theme-ui/node_modules/@mdx-js/react/index.js from /Users/johno-mini/c/repro-mdx-v2-theme-ui/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/johno-mini/c/repro-mdx-v2-theme-ui/node_modules/@mdx-js/react/package.json.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/johno/repro-mdx-v2-theme-ui
2. Follow steps in readme

Expected behavior

I’d expect Theme UI’s ESM modules to be imported which will ensure no error is caused when the MDX import occurs. And it should be ESM files rather than cjs.

[lachlanjc]

Great news @johno! Our latest develop release fixes this issue thanks to @hasparus. Just forked your test repo & updated deps, it’s working: https://github.com/lachlanjc/repro-mdx-v2-theme-ui/commit/5990f8e1c093e27493777e66df9f080f6d2deb1e

[LekoArts]

FYI, we’ll be releasing a new major of gatsby-plugin-mdx on August 16 with support for MDX v2: https://github.com/gatsbyjs/gatsby/pull/35650

I haven’t tried https://github.com/LekoArts/mdx-v2-example with Theme UI yet to see if there any compat issues, just wanted to put this on y’all radar.