search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.9k stars 26.87k forks source link

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

Open hamlim opened 3 months ago

hamlim commented 3 months ago

Link to the code that reproduces this issue

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

To Reproduce

  1. Clone the repo
  2. Install dependencies via bun install
  3. cd apps/docs
  4. Run bun run dev
  5. visit http://localhost:3000/
  6. 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 3 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 3 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