Next.js not applying styles to MDX components

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.

[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.

[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…