Element rendered from older version of React error with `next-mdx-remote`

hamlim commented 4 months ago

Link to the code that reproduces this issue

https://github.com/hamlim/next-mdx-remote-jsx-runtime-bug

To Reproduce

Clone the repo
Install dependencies via bun install
cd apps/docs
Run bun run dev
visit http://localhost:3000/
See the error

Current vs. Expected behavior

I see the following error:

Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.

Ideally - I wouldn't get any error!

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:17:33 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.59 // Latest available version is detected (15.0.0-canary.59).
  eslint-config-next: 14.1.4
  react: 0.0.0-experimental-e3ebcd54b-20240405
  react-dom: 0.0.0-experimental-e3ebcd54b-20240405
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

I've tested this in several Next 15 canaries, haven't been able to bisect releases to find out when this might have changed just yet.

I've also cross reported to the next-mdx-remote project here: https://github.com/hashicorp/next-mdx-remote/issues/467

hamlim commented 4 months ago

Seems like 15.0.0-canary.38 (and later canaries) is where the above error starts to show up, from 15.0.0-canary.0 - 15.0.0-canary.37 the error I get is the below error:

Package next-mdx-remote (serverExternalPackages or default list) can't be external
The request next-mdx-remote/rsc matches serverExternalPackages (or the default list), but it can't be external:
The package seems invalid. require() resolves to a EcmaScript module, which would result in an error in Node.js.

hamlim commented 4 months ago

My hunch is that this code within that package is the problematic part: https://github.com/hashicorp/next-mdx-remote/blob/17d6598d4cbb9ccf0fe1042253649d88d685fa5f/src/jsx-runtime.cjs#L11-L15

eposha commented 1 month ago

Same issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

pradeepcep commented 6 days ago

Adding some more context to this in case it helps:

I encountered the same when trying to deploy my site on Netlify. It was a fresh repo cloned from Next's Portfolio Blog example, and it was building fine locally with NodeJS 20.17 and Next 14.2.0-canary.62. But Netlify seems to be using the 15-canary so it failed there.

I finally downgraded to Next 14, and it deployed without a hitch.

vercel / next.js