Module not found: Can't resolve 'react/jsx-runtime.js'

[natew]

Happy to submit a PR for this, affects versions 7-8 at least, node 14+. You can see it when running yarn site in

What you did:

Set up next.js + mdx-bundler.

What happened:

error - ../../node_modules/mdx-bundler/dist/client.js:11:0
Module not found: Can't resolve 'react/jsx-runtime.js'

Import trace for requested module:
./../../node_modules/mdx-bundler/client/index.js
./pages/docs/intro/[slug].tsx

Reproduction repository:

https://github.com/tamagui/tamagui

yarn install
yarn site

# navigate to the docs page

Problem description:

Importing the .js fully specified seems to mess up webpack. I must be using some version that is weird somewhere - whether React or Webpack..

Suggested solution:

I think just changing the import from react/jsx-runtime.js to react/jsx-runtime would make this a bit more compatible, happy to submit a PR.

[oedotme]

There's a workaround by aliasing react/jsx-runtime.js to preact/jsx-runtime in next.config.js.

You can find an example here https://github.com/kentcdodds/mdx-bundler/issues/140#issuecomment-1013928307 on a similar issue I opened recently.

[natew]

After a few tries for whatever reason the alias works now:

const jsxRuntime = require.resolve('react/jsx-runtime.js')

webpackConfig.resolve.alias = {
    'react/jsx-runtime.js': jsxRuntime,
    'react/jsx-runtime': jsxRuntime,
}