Theme UI provider import causes an ESM error when mdx-js/react is subsequently required #2023
Comments
johno
added
bug
|
I also tried |
|
Is there a known workaround for this? I don't use MDX so I tried just not requiring |
|
Downgrading |
|
I'm inclined to think that Theme UI should go all in on ESM here and use something like Since Theme UI is an MDX user and MDX itself has gone all in on ESM - it's likely time to rip off the bandaid. Right now a fresh install of Theme UI, MDX, and Next.js effectively fails since it brings in MDX v2. The other option is to rip out MDX and implement an API that folks can leverage to connect Theme UI and MDX. An API might look something like the following: import { useMDXComponents } from 'theme-ui'
// ...
const components = useMDXComponents()
// ...
return <MDXProvider components={components} /> |
|
@johno +1 to that proposed API approach, keeps the pattern consistent with |
|
Is there a fix for this? Using npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @mdx-js/react@1.6.22
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/react@11.10.0
npm ERR! node_modules/@emotion/react
npm ERR! @emotion/react@"^11.10.0" from the root project
npm ERR! peer @emotion/react@"^11" from @theme-ui/color-modes@0.14.7
npm ERR! node_modules/@theme-ui/color-modes
npm ERR! @theme-ui/color-modes@"0.14.7" from @theme-ui/theme-provider@0.14.7
npm ERR! node_modules/@theme-ui/theme-provider
npm ERR! @theme-ui/theme-provider@"0.14.7" from theme-ui@0.14.7
npm ERR! node_modules/theme-ui
npm ERR! 1 more (theme-ui)
npm ERR! 6 more (@theme-ui/components, @theme-ui/core, @theme-ui/css, ...)
npm ERR! 16 more (@theme-ui/color-modes, @theme-ui/components, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR! node_modules/@mdx-js/react
npm ERR! @mdx-js/react@"^1.6.22" from the root project
npm ERR! peer @mdx-js/react@"^1 || ^2" from @theme-ui/mdx@0.14.7
npm ERR! node_modules/@theme-ui/mdx
npm ERR! @theme-ui/mdx@"0.14.7" from @theme-ui/theme-provider@0.14.7
npm ERR! node_modules/@theme-ui/theme-provider
npm ERR! @theme-ui/theme-provider@"0.14.7" from theme-ui@0.14.7
npm ERR! node_modules/theme-ui
npm ERR! 1 more (theme-ui)
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR! node_modules/@mdx-js/react
npm ERR! @mdx-js/react@"^1.6.22" from the root project
npm ERR! peer @mdx-js/react@"^1 || ^2" from @theme-ui/mdx@0.14.7
npm ERR! node_modules/@theme-ui/mdx
npm ERR! @theme-ui/mdx@"0.14.7" from @theme-ui/theme-provider@0.14.7
npm ERR! node_modules/@theme-ui/theme-provider
npm ERR! @theme-ui/theme-provider@"0.14.7" from theme-ui@0.14.7
npm ERR! node_modules/theme-ui
npm ERR! 1 more (theme-ui)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. |
|
@web-programmer-here, use |
|
@hasparus thanks, that fixed my issue, is there an eta for theme ui update to fix this issue? thanks |
|
FYI, we'll be releasing a new major of 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. |
|
Great news @johno! Our latest |
|
Awesome @lachlanjc and @hasparus, thanks! Y'all rock! |
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/reactimport 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?To Reproduce
Steps to reproduce the behavior:
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.
The text was updated successfully, but these errors were encountered: