v15.3.canary-0 with viewTransitions enabled breaks re-ordering components
#79069
Comments
mhornbacher
changed the title
viewTransitions enabled breaks re-ordering components
|
This is a React or React Aria Components issue, not a Next.js one. I opened a PR for React here: facebook/react#33177. |
|
Hi, I was having the same issue with the https://github.com/rjsf-team/react-jsonschema-form lib. Are you sure @devongovett? In nextjs Here's a repro with And here is the working code where I only changed nextjs version to As you can see the react version is the same ( |
|
I'm not seeing the same issue in your example. It is not crashing with the above error for me. Both examples seem to be working the same way. |
|
It's not crashing with the error above you are right, but in the first example, after reordering, the buttons are not updated and stop working. Broken: broken.schema.array.mp4Working: working.schema.array.mp4Also I opened the repo from @mhornbacher in codesandbox, downgraded to https://codesandbox.io/p/devbox/sleepy-tree-hs58tg?workspaceId=ws_F4Ucu8TTaRzzm76X1xr7Se That's why I think they might be related, but I could open a new PR if necessary for my scenario. |
|
@devongovett I raised an issue there as well but it seems to be a viewTransition issue was without the flag it works just fine and the crash occurs within the ReactJS dev runtime. |
This is correct, and it'll be best to track the issue there for now. When using App Router, Next.js automatically bundles a version of React that is most compatible with React APIs that are needed for Next.js to function, regardless of what you specify in package.json. We regularly sync React into Next.js when builds are published. Toggling on particular experimental flags, such as viewTransition or PPR, opts into the experimental builds of React where more bleeding edge changes are tested. In this case, it opts into the |
|
@ztanner thank you for the detailed and thoughtful explanation of where the error is and thank you @devongovett for opening an issue with the React team :) |
Link to the code that reproduces this issue
https://github.com/mhornbacher/nextjs-view-transitions-bug
To Reproduce
(next dev)localhost:3000(or whatever port it starts up onexperimental.viewTransitiontofalseinnext.config.tsCurrent vs. Expected behavior
It should sort the list correctly like it does with
viewTransitiondisabled.Currently it throws the following exception since the 15.3.0-canary.0 release (here is the commit diff of the breaking version)
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:32:50 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6041 Available memory (MB): 49152 Available CPU cores: 14 Binaries: Node: 23.11.0 npm: 10.9.2 Yarn: N/A pnpm: 10.10.0 Relevant Packages: next: 15.4.0-canary.31 // Latest available version is detected (15.4.0-canary.31). eslint-config-next: N/A react: 19.1.0 react-dom: 19.1.0 typescript: 5.8.3 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Not sure
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
I am using the
react-aria-componentslibrary as an easy example as the nested way to trigger this is most evident using this library. But it can be anything that re-organizes the elements on the page based on complex state logic.The text was updated successfully, but these errors were encountered: