Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Broken react strict mode behavior on first render #65655

Open
BlankParticle opened this issue May 12, 2024 · 0 comments
Open

Broken react strict mode behavior on first render #65655

BlankParticle opened this issue May 12, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).

Comments

@BlankParticle
Copy link
Contributor

BlankParticle commented May 12, 2024

Link to the code that reproduces this issue

https://github.com/BlankParticle/nextjs-strict-mode-reproduce
https://github.com/BlankParticle/nextjs-strict-mode-reproduce/tree/framer-motion

To Reproduce

  1. Start the app with next dev

  2. Go to console, you will see only 1 console.log about a client component being mounted, even tho the app is in strict mode.

  3. Change routes by clicking the links. it will log as expected. But there is something so broken that, libraries like framer-motion totally stops working (i.e doesn't re-animate on route change, whileTap/whileHover stops working etc)

  4. Switch the branch to framer-motion, run the app again. Try to interact with client components, navigate back and forth and see that the client components breaks. Refresh on a page to make that page work temporarily.

  5. Disable Strict mode, open framer-motion repro, everything works as expected

image
As seen, the effect ran only once, this breaks a lot of stuff.

Current vs. Expected behavior

Effects are not run properly and cleaned up, which causes libraries like framer-motion to entirely stop working.

If I disable strict mode, everything works as expected even with react 19.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Tue, 07 May 2024 21:35:54 +0000
  Available memory (MB): 5802
  Available CPU cores: 8
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: N/A
  pnpm: 9.1.0
Relevant Packages:
  next: 14.3.0-canary.58 // Latest available version is detected (14.3.0-canary.58).
  eslint-config-next: N/A
  react: 19.0.0-beta-4508873393-20240430
  react-dom: 19.0.0-beta-4508873393-20240430
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Upstream

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

next dev (local)

Additional context

I don't know which canary version this bug was introduced.

I mentioned framer-motion as that is how I discovered this bug. There are 2 repro, one with minimal repro and one with framer-motion

@BlankParticle BlankParticle added the bug Issue was opened via the bug report template. label May 12, 2024
@github-actions github-actions bot added the Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). label May 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
Projects
None yet
Development

No branches or pull requests

1 participant