You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
BlankParticle opened this issue
May 12, 2024
· 0 comments
Labels
bugIssue was opened via the bug report template.UpstreamRelated to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
Go to console, you will see only 1 console.log about a client component being mounted, even tho the app is in strict mode.
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)
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.
Disable Strict mode, open framer-motion repro, everything works as expected
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
The text was updated successfully, but these errors were encountered:
github-actionsbot
added
the
Upstream
Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
label
May 12, 2024
bugIssue was opened via the bug report template.UpstreamRelated to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
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
Start the app with
next dev
Go to console, you will see only 1
console.log
about a client component being mounted, even tho the app is in strict mode.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)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.Disable Strict mode, open
framer-motion
repro, everything works as expectedAs 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 withframer-motion
The text was updated successfully, but these errors were encountered: