Hydration issue when updating to react 18

[OliverDudgeon]

I tried upgrading my NextJS project to react 18. However, all my MDX pages now error with Hydration issues.

Before on react 17, I had a console error that I ignored:

Log

Warning: Did not expect server HTML to contain a <div> in <div>.
div
withEmotionCache/<@webpack-internal:///./node_modules/.pnpm/@emotion+react@11.10.5_fan5qbzahqtxlm5dzefqlqx5ia/node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66
Box@webpack-internal:///./node_modules/.pnpm/@mui+system@5.10.13_v64nlmo6pkqfmpmxge6otzlg54/node_modules/@mui/system/esm/createBox.js:35:72
Layout@webpack-internal:///./layouts/Layout.tsx:17:20
MDXLayout@webpack-internal:///./pages/index.mdx:18:20
MDXContent
TopLevelHooks@webpack-internal:///./components/app/TopLevelHooks.tsx:13:20
MDXProvider@webpack-internal:///./node_modules/.pnpm/@mdx-js+react@2.1.5_react@18.2.0/node_modules/@mdx-js/react/lib/index.js:96:21
MDXComponentProvider@webpack-internal:///./context/MDXComponentProvider.tsx:25:20
SnackbarProvider@webpack-internal:///./node_modules/.pnpm/notistack@2.0.8_7buodvy5yv4uknljwovbizxhwi/node_modules/notistack/dist/notistack.esm.js:739:24
Hydrate@webpack-internal:///./node_modules/.pnpm/@tanstack+react-query@4.15.1_biqbaboplfbrettd7655fr4n2y/node_modules/@tanstack/react-query/build/lib/Hydrate.mjs:29:17
QueryClientProvider@webpack-internal:///./node_modules/.pnpm/@tanstack+react-query@4.15.1_biqbaboplfbrettd7655fr4n2y/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:46:29
exports.default@webpack-internal:///./node_modules/.pnpm/@auth0+nextjs-auth0@1.9.2_next@12.3.3/node_modules/@auth0/nextjs-auth0/dist/frontend/use-config.js:10:20
exports.default@webpack-internal:///./node_modules/.pnpm/@auth0+nextjs-auth0@1.9.2_next@12.3.3/node_modules/@auth0/nextjs-auth0/dist/frontend/use-user.js:84:20
InnerThemeProvider@webpack-internal:///./node_modules/.pnpm/@mui+system@5.10.13_v64nlmo6pkqfmpmxge6otzlg54/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:22:70
ThemeProvider@webpack-internal:///./node_modules/.pnpm/@mui+private-theming@5.10.9_fan5qbzahqtxlm5dzefqlqx5ia/node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:49:7
ThemeProvider@webpack-internal:///./node_modules/.pnpm/@mui+system@5.10.13_v64nlmo6pkqfmpmxge6otzlg54/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:44:7
ThemeProviders@webpack-internal:///./components/app/ThemeProviders.tsx:26:20
App@webpack-internal:///./pages/_app.tsx:51:21
ErrorBoundary@webpack-internal:///./node_modules/.pnpm/next@12.3.3_m5sxuueb27gk6ddc5gums6vtgq/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742
ReactDevOverlay@webpack-internal:///./node_modules/.pnpm/next@12.3.3_m5sxuueb27gk6ddc5gums6vtgq/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23633
Container@webpack-internal:///./node_modules/.pnpm/next@12.3.3_m5sxuueb27gk6ddc5gums6vtgq/node_modules/next/dist/client/index.js:70:24
AppContainer@webpack-internal:///./node_modules/.pnpm/next@12.3.3_m5sxuueb27gk6ddc5gums6vtgq/node_modules/next/dist/client/index.js:216:20
Root@webpack-internal:///./node_modules/.pnpm/next@12.3.3_m5sxuueb27gk6ddc5gums6vtgq/node_modules/next/dist/client/index.js:407:21

On updating to react 18 I now get more errors with hydration:

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

My config has this:

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: { providerImportSource: "@mdx-js/react", jsxImportSource: "@emotion/react" },
});

If I remove any components with emotion inside the index.mdx the issue goes away. What am I missing?

[wooorm]

Why not ask the emotion folks? If it only occurs with their components, it seems a problem there?

[OliverDudgeon]

Hydration with emotion works fine outside MDX.

[wooorm]

Well, hydration of mdx without emotion also works fine, as you indicate.
So that's not enough to go by?

[ChristianMurphy]

This is not a bug in mdx.
Here is an example of:

• Next 13
• MDX loader 2
• React 18
• Emotion 13

used together, and working.
https://codesandbox.io/s/next-and-mdx-with-emotion-c9rtby?file=/next.config.mjs

What you are seeing is likely:

• A mismatch in the versions of dependencies used
• A bug in Next MDX, which is maintained by the Next team https://github.com/vercel/next.js
• A bug in an older version of Next.js