Theme UI provider import causes an ESM error when mdx-js/react is subsequently required #2023
Description
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:
- Go to https://github.com/johno/repro-mdx-v2-theme-ui
- 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.