Document theme-ui + mdx problems somewhere (and workaround if it exists)

[wooorm]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

https://github.com/system-ui/theme-ui/issues/2023

Solution

Not clear. Either point to the issue. Or a fix if we have it. Or it’ll be fixed there in a week or so?

Alternatives

n/a

[lachlanjc]

Over on the Theme UI end we'd love any pointers or help on this issue! I'm a bit lost digging into this 🙃

[wooorm]

theme-ui is currently faux-esm. It exports CJS and a module field, the latter is in short from the 6to5 and early webpack days. It’s prevalent in the React community (other components and things like emotion have similar problems).

The files at those module fields are different from actual ESM. The community rushed their import / export statements while the specs were being developed, and the specs are different. So what works in webpack doesn’t necessarily works in Rollup and what works in Node doesn’t work in you-name-it.

Actual ESM doesn’t pick up those files. Actual ESM can pick up files that you define with an export map or a type: 'module'. See https://nodejs.org/api/packages.html#package-entry-points for more info. The good news is that all modern bundlers do support this properly now.

You can also completely switch to ESM. See https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#faq. While not everyone is there yet (e.g. Jest), it’s being working on. Because MDX itself is ESM now, it‘s “tainting” its users to switch to ESM. So theme-ui can also do it.

[lachlanjc]

Update for folks finding this issue now: Theme UI v0.15 last September includes support for MDX v2! https://github.com/system-ui/theme-ui/releases/tag/v0.15.0

[wooorm]

I guess it can be closed then! Thanks for the ping, Lachlan!