Rechart breaks in Nextjs 15-rc.0

[john-prutton]

Link to the code that reproduces this issue

https://github.com/john-prutton/recharts-nextjs-15

To Reproduce

1. clone, pnpm install, and start app. the latest commit uses nextjs 15
   1.1 go to http://localhost:3000/ and see that chart is not visible

2. rollback one commit with something like git reset head~1 --hard. this commit uses next 14
   2.1 pnpm install packages and restart app.
   2.2 go to http://localhost:3000 and see that the the graph shows up and is functioning as expected

Current vs. Expected behavior

Here the graph is working in next 14:

Here the graph is not working in next 15:

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16315
  Available CPU cores: 16
Binaries:
  Node: 20.11.1 (no difference on 22.3.0)
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-rc.0 // Latest available version is detected (15.0.0-rc.0). 
  eslint-config-next: 14.2.4
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next start (local)

Additional context

Working in "next": "14.2.4", broken in "next": "15.0.0-rc.0"

[Netail]

Maybe more related to rechart with React 19, than NextJS (recharts/recharts#4558)

[nshout]

Indeed, it is related to React 19. Recharts 2.13.0-alpha.4 still mostly does not work with React 19. You'll have to hang on a bit or downgrade NextJS to v14 with React v18.

[tobiaslins]

@nshout don't forget to rewrite react-is recharts/recharts#4558 (comment)

[moog16]

I had a really difficult time getting it to work w/ R19. Almost to the point where I was going to downgrade back to 18+. This not is here for anyone who needs something else to try for debugging / getting it to work:

1. delete all overrides from package.json
2. delete package-lock.json
3. delete recharts, react, and react-dom dep from package.json
4. npm i react@rc react-dom@rc
5. add back all overrides from step 1
6. npm i recharts@latest --force
7. add an override for recharts: "recharts": { "react": "$react", "react-dom": "$react-dom" }
8. npm i

Hopefully that works or at least inpsires something else to try.