Error with package path jsx-runtime updating Nextjs with React 18

[nikosantis]

I tried updating my website with React 18 (Nextjs v12.1.2) and not compiling.
The error is:

wait  - compiling...
error - ./node_modules/next-contentlayer/dist/hooks/useMDXComponent.js:5:0
Module not found: Package path ./jsx-runtime.js is not exported from package /.../me/nikosantis.dev/node_modules/react (see exports field in /.../me/nikosantis.dev/node_modules/react/package.json)

Import trace for requested module:
./node_modules/next-contentlayer/dist/hooks/index.js
./pages/sobre-mi.tsx

https://nextjs.org/docs/messages/module-not-found

I tested changing the jsx_runtime import in useMDXComponent in node_modules and compiled again.

from:

import * as _jsx_runtime from 'react/jsx-runtime.js'

to:

import * as _jsx_runtime from 'react/jsx-runtime'

Working with this change without errors 😎 idk why...
I tried this change in the contentlayer repo (feat/0.2.0 branch), yarn build and yarn test and all tests passed 💯
Can you check that?

[schickling]

Seems like others are facing the same issue (e.g. kentcdodds/mdx-bundler#164).

I need to investigate this more but it seems tricky since...

// Only valid with React 17 and lower
import * as _jsx_runtime from 'react/jsx-runtime.js'

// Only valid with React 18 (and higher)
import * as _jsx_runtime from 'react/jsx-runtime'

React 18 is now using the exports field in package.json (which is good generally) but makes this situation a bit tricky since I want to make sure Contentlayer works with as many React versions as possible.

[schickling]

Update: I think I found a "solution" aka functioning work-around for this problem:

Will be released with the upcoming 0.2.0 release.

[nikosantis]

Thanks @schickling 😄

[schickling]

This was just released as part of the new 0.2.1 version. 🚀

Feel free to comment in case you're running into any problems or open a new issue.

[dvlden]

Anyone else still having troubles with it, after updating to latest release?
I upgraded Next, React and Content Layer (all to latest), fixed the Next config file and I still get the same error.

Module not found: Package path ./jsx-runtime.js is not exported from package /Users/nn/Sites/dvl-next/node_modules/.pnpm/next-contentlayer@0.2.1_c0abbb53577d424fe320649841fdc7d4/node_modules/react (see exports field in /Users/nn/Sites/dvl-next/node_modules/.pnpm/next-contentlayer@0.2.1_c0abbb53577d424fe320649841fdc7d4/node_modules/react/package.json)

[XHMM]

same error after upgrade to "next-contentlayer": "0.2.1":

error - ./node_modules/next-contentlayer/dist/hooks/jsx-runtime.cjs:1:0
Module not found: Package path ./jsx-runtime.js is not exported from package /demo/node_modules/react (see exports field in /demo/node_modules/react/package.json)

Import trace for requested module:
./node_modules/next-contentlayer/dist/hooks/useMDXComponent.js
./node_modules/next-contentlayer/dist/hooks/index.js
./pages/blog/[slug].tsx

https://nextjs.org/docs/messages/module-not-found
error - unhandledRejection: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './jsx-runtime.js' is not defined by "exports" in /demo/node_modules/react/package.json
error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './jsx-runtime.js' is not defined by "exports" in /demo/node_modules/react/package.json

[schickling]

Sorry for the inconvenience. I'm currently on vacation for the next 10 days but planning to look into it once I'm back! (If someone wants to help investigate fixes/solutions to this problem, I'd be happy to merge a PR in the meanwhile.)

[lordkerwin]

Any update on this? I'm still getting this issue

"dependencies": {
        "classnames": "^2.3.1",
        "contentlayer": "^0.2.1",
        "date-fns": "^2.28.0",
        "next": "12.1.4",
        "next-contentlayer": "^0.2.1",
        "next-themes": "^0.1.1",
        "react": "18.0.0",
        "react-dom": "18.0.0",
        "reading-time": "^1.5.0",
        "rehype-highlight": "^5.0.2"
    },
    "devDependencies": {
        "@tailwindcss/typography": "^0.5.2",
        "autoprefixer": "^10.4.4",
        "eslint": "8.12.0",
        "eslint-config-next": "12.1.4",
        "postcss": "^8.4.12",
        "tailwindcss": "^3.0.23"
    },

[schickling]

I just returned from vacation and looked into this issue again. I've cut a new 0.2.2 release which hopefully addresses this problem for good. 🤞

If you're still running into problems (e.g. if Contentlayer broke for you when using React 17 or older) please don't hesitate to comment here :)