search

vercel / next.js

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

next/navigation useRouter hook fails in React Three Fiber Canvas component. #61684

Open frankievx opened 8 months ago

frankievx commented 8 months ago

Link to the code that reproduces this issue

https://codesandbox.io/p/github/frankievx/francis-xavier-portfolio/main?file=%2Fsrc%2Fapp%2Flayout.tsx%3A19%2C6-20%2C11&workspaceId=25db4d3b-916c-4475-9db7-4f00c844610c

To Reproduce

  1. Double click the image in the center of the page.

Current vs. Expected behavior

Current Behavior User is navigated to the /tea page but encounters the dispatcher.use error.

Expected Behavior User should navigate to the /tea page with an animation that will zoom the camera forward and no error or rerender of the component should occur.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.14.0
Relevant Packages:
  next: 14.1.1-canary.27 // Latest available version is detected (14.1.1-canary.27).
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

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

next dev (local)

Additional context

Screenshot 2024-02-05 at 11 42 23 AM

I've tried reverting my next version all the way to 13.5.6. I still encounter the error.

The router push line that causes this issue is found in /src/app/components/Frame.tsx:80.

frankievx commented 7 months ago

After further discussion and investigation with some maintainers on React Fiber. I've been told that this issue is caused by a breaking change from using react experimental features in NextJS. Is there anyway to polyfill "use" in NextJS so that I'm able to call these hooks in the R3F's reconciler?