React 18 error: "./jsx-runtime.js is not exported from package"

• mdx-bundler version: ^8.0.1
• node version: 16.14.2
• npm version: 8.5

Relevant code or config

• N/A

What you did:

I upgraded to React 18 from 17.0.2

What happened:

NOTE: Also using Next.js version 12.1.2. When I run “build” after upgrading react from 17.0.2 to 18.0 I get the error below:

---

./node_modules/mdx-bundler/dist/client.js Module not found: Package path ./jsx-runtime.js is not exported from package /Volumes/T7/Code/blog-next/node_modules/react (see exports field in /Volumes/T7/Code/blog-next/node_modules/react/package.json)

Import trace for requested module: ./node_modules/mdx-bundler/client/index.js ./pages/snippets/[slug].jsx

---

Reproduction repository:

Problem description:

React 18 seems to introduce a problem with how jsx-runtime is consumed from React. MDX-Bundler pull request #162 may address this issue already. I am not sure.

Suggested solution:

Maybe test React 18 with Pull Request 162? Also see similar issue here: https://github.com/hashicorp/next-mdx-remote/pull/250

[FradSer]

#167 LGTM, upgrade to v9.0.0 works.

[schickling]

I was facing the same problem with Contentlayer and found a workaround/solution that works for Next.js: