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

[eostrom]

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.

[BRKalow]

Thanks for the report! We haven't explicitly tested preact support, so not unexpected that we might have an issue here. If you'd be willing to create a minimal reproduction I'd be happy to dig in further!

[eostrom]

Thanks! Test case: https://github.com/eostrom/next-mdx-remote-237-test-case

[eostrom]

Also: I dug into the second error a little. Based on the stack trace and the shape of the minified code, I suspect it's coming from this part of Preact's hooks/src/index.js:

function getHookState(index, type) {
	if (options._hook) {
		options._hook(currentComponent, index, currentHook || type); // <- this line! the __h stands for _hook!
	}

Google found me a couple of similar errors in other projects, but that's as far in over my head as I wanted to get at this point.

Let me know if you have trouble reproducing the bug, or if I can be of any help.

[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. :)