Next.js not applying styles to MDX components

[jonashaefele]

Describe the bug
I ran into the same issue described here and here

When rendering MDX pages in Next.js, the styles defined in theme.js don't get applied.

The styles get applied perfectly well when using Styled.h1 and its sibling components in a JSX file, but the MDX parser seems to render plain HTML tags without the classes needed to apply the styles defined the theme.js

To Reproduce

The issue is present in the next example in this repo. Run the example and you'll see that only the root styles are applied, but the MDX components are rendered plain, without styles.

The H1 should be color: 'primary' (#07c) but gets rendered with the black (#000) inherited from the root styles applied to the body.

Change the first few lines in index.mdx to make it easier to see:

import { Styled } from 'theme-ui'

# MD H1

<Styled.h1>Styled H1</Styled.h1>

Expected behavior

I'd expect MDX files to render the MD components with all the ThemeUI styles defined in the styles object of theme.js or in other words to # Title should render identically to <Styled.h1>Title</Styled.h1>, etc.

Screenshots

Additional context
It looks like it might be a next.js bug, but all the issues related to it have been closed.

I tried to debug it for two days now. I changed the versions for next and @next/mdx to

• 9.3.3
• 9.3.6
• 9.5.1
• 9.5.2

All of which were suggested should work at some point in issue comments, but none of them seem to work in the next example or my project (which is more complex, so I tried to isolate the issue).

I appreciate this might not be a theme-ui issue, but thought maybe someone has already solved it.:

Edit: I also tried to swap @next/mdx for https://github.com/hashicorp/next-mdx-enhanced (latest) but that didn't help either.

[lachlanjc]

Yup, can confirm. This has been the case for at least a year in every version & configuration I've tried of all 3 tools.

[jxnblk]

Not sure if this is helpful, but have you tried using Yarn resolutions for the MDX packages? There might be a React context mismatch issue happening

[jonashaefele]

Oh, I haven't tried that yet, but it's solved a context issue for me before, will try that, thanks!

[matthewsimo]

I've noticed a couple other tickets that sort of feel similar (#1148, others linked here) thought a simple repro repo might help isolate.
Repo: https://github.com/matthewsimo/next-theme-ui-example
web: https://next-theme-ui-example.vercel.app/

On my other nextjs repo, as a temporary work around, I just wrapped the layout that loads the mdx files with a BaseStyles.

[lachlanjc]

Thanks! It's not deployed at a URL right now but the Next.js example in this repo has the issue too

[cwgw]

For what it's worth, I was able to solve my problem (#1148) using the suggestion above from @jxnblk. His guess that it's a dependency conflict appears to be correct.

Adding this to my package.json fixed me:

  "resolutions": {
    "@mdx-js/react": "2.0.0-next.7"
  },

It might be a different offender for you. Try yarn list --pattern mdx and look for multiple versions of the same package.

[matthewsimo]

This worked for me too - handy tip, thanks for sharing @cwgw.

[jonashaefele]

Thanks @jxnblk @cwgw that was exactly the problem.

[pixelmord]

Resolving to the version of @mdx-js/react that is used by the mdx loader in my nextjs project (next-mdx-enhanced) also solved the issue for me: THX @cwgw and @jxnblk
@jxnblk maybe upgrading theme-ui deps to @mdx-js/react@1.6.16 could prevent others from having that issue...

[atanasster]

@hasparus - are you working on this issue to try to close it?

I also have a commit upgrading the packages atanasster@29cbc17 , however I was not able to reproduce the issue myself.
lmk

[lachlanjc]

Now that v0.13 of Theme UI requires installing @mdx-js/react yourself, I’m not seeing this issue anymore! Tested with https://github.com/lachlanjc/next-theme-starter (which I haven’t pushed a v0.13 update to yet). Please flag if it returns!