question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:20
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
lachlanjccommented, Sep 19, 2022

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

4reactions
LekoArtscommented, Aug 5, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js 12 breaks when used with theme-ui giving "code
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\fm-nextjs\node_modules\@mdx-js\react\index.js require() of ES modules is not ...
Read more >
Migrating - Theme UI
If your project is not using MDX or importing Themed , you shouldn't need to change anything. If you are using MDX, this...
Read more >
Troubleshooting - Material UI - MUI
Troubleshooting ; - · / ; // .storybook/preview.js import { ; // Ex. 2-1 ❌ This will cause an error because `CustomComponent` does...
Read more >
What's new? - Material Theme UI Documentation
Another bug fix version for 2022.2/2022.3. This update fixes a few issues causing freezes or fatal errors, amongst others: Settings: Add Per-Project Default ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found