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

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

noahlstcommented, Mar 5, 2022

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

1reaction

jakejarviscommented, Mar 16, 2022

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. 😃

Top Results From Across the Web

got Can't resolve 'react/jsx-runtime' error while use try to create ...

To solve the error "Module not found: Error: Can't resolve 'react/jsx-runtime'", make sure to update the react package by opening your ...

react-dnd 16.0.0 is causing "Module not found: Error: Can't ...

This is due to React 17 not having the correct exports entries in package.json . React 18 has those entries, so it should...

unable to resolve "react/jsx-runtime" from "app.js" - You.com

js file in root project folder by following. It seems that the current versions of Meteor and the React npm package do not...

Can't resolve 'react/jsx-runtime' in 'C:\Users\qurek\Desktop\tmp ...

I have decided to add Material UI to my old React project (I use pure JavaScript). When I try to run application the...

Compiling legacy components in Next.js (Can't resolve 'react ...

It seems like, based on the current documentation, (I'm more of a Node.js user) you can use @babel/plugin-transform-react-jsx or @babel/preset-react , or you ......