Preact: Can't resolve 'react/jsx-runtime.js'

Congratulations on the upgrade to MDX 2! I’m excited to try it. Unfortunately I got this error when rendering some MDX with next-mdx-remote 4.0.0, Next 12.1.0, and Preact 10.6.6:

error - ./node_modules/next-mdx-remote/dist/index.js:2:0
Module not found: Can't resolve 'react/jsx-runtime.js'

Import trace for requested module:
./node_modules/next-mdx-remote/index.js
./components/pages/StaticPage.tsx
./pages/[slug].tsx

Removing the .js from this line in dist/index.js (and presumably src/index.tsx) seems to fix it:

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

But now I’m getting a different error:

TypeError: Cannot read properties of undefined (reading '__H')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
m
file:/Users/eostrom/workspace/swagleft/next-swagleft/node_modules/preact/hooks/dist/hooks.mjs (1:151)
p
file:/Users/eostrom/workspace/swagleft/next-swagleft/node_modules/preact/hooks/dist/hooks.mjs (1:280)
l
file:/Users/eostrom/workspace/swagleft/next-swagleft/node_modules/preact/hooks/dist/hooks.mjs (1:249)
Object.MDXRemote
file:/Users/eostrom/workspace/swagleft/next-swagleft/node_modules/next-mdx-remote/dist/index.js (31:51)

That line doesn’t look like it should cause any problems:

    const [isReadyToRender, setIsReadyToRender] = useState(!lazy || typeof window === 'undefined');

I’ll try to come back to it later and debug, submit a PR, or provide a minimal test case, but I thought I’d place a marker here in the meanwhile, in case anyone else is running into the same problem – or, in case it’s working just fine for everyone else and the problem is I’ve misconfigured something.

[noahlst]

Just thought I’d pop in as I’m having issues with the jsx-runtime.js file after enabling the experimental Suspense implementation in Next.js 12.1.0.

Very similar build error:

Failed to compile.

./node_modules/next-mdx-remote/dist/index.js:2:0
Module not found: Package path ./jsx-runtime.js is not exported from package /Users/noahstanley/Documents/ULOSINO/ulosino/node_modules/react (see exports field in /Users/noahstanley/Documents/ULOSINO/ulosino/node_modules/react/package.json)

Import trace for requested module:
./node_modules/next-mdx-remote/index.js
./pages/about/[slug].tsx

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


> Build failed because of webpack errors

[jakejarvis]

This temporary next.config.js fix worked for me w/ React 18 (I think what @fernpolo was also running into), so I assume this would help with the same Preact roadblock?

webpack: (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    // fixes next-mdx-remote: Package path ./jsx-runtime.js is not exported from package react
    // https://github.com/hashicorp/next-mdx-remote/issues/237
    "react/jsx-runtime.js": require.resolve("react/jsx-runtime"),
  };
}

See Next.js documentation on adding webpack aliases here or the fix in my repo. 😃