View Transitions break table and/or collection sorting

[mhornbacher]

Provide a general summary of the issue here

Since NextJS 15.3-canary.0 sorting a table causes a application crash if viewTransitions are enabled

I believe this is a ReactJS issue. However it is curious enough that it seems worthwhile to inform you guys about it as well. Hopefully this is just a curiosity :)

See vercel/next.js#79069 for detailed breakdown

🤔 Expected Behavior?

The table should sort with or without view transitions enabled in react

😯 Current Behavior

If view transitions are enabled. The react logic for rendering the newly sorted table fails catastrophically

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Clone https://github.com/mhornbacher/nextjs-view-transitions-bug and install the dependencies
2. Start the application in dev mode (next dev)
3. Visit the application at localhost:3000 (or whatever port it starts up on
4. Press on any header row to change the sorting order (either the column or descending)
5. See the error (see below for details)
6. Change experimental.viewTransition to false in next.config.ts
7. Try again and see the behavior is gone

Version

1.8.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue and heads up.

Would you be willing to try with the 'nightly' tag? We recently merged some fixes for collections in SSR/Suspense/etc environments.

[mhornbacher]

@snowystinger sure! If that is helpful :). I'll share any findings soon :)

Did you by any chance fix the collections object clearing when being interacted with after SSR?

I built an entire wrapper using isSSR() that returns raw HTML rather than the ARIA components to get around this...

[mhornbacher]

@snowystinger I tried it with the @nightly tag. Specifically 3.0.0-nightly-c1fd8af79-250512 and it had the same behavior. I think this is an upstream issue with the viewTransitions implementation 🤔

[devongovett]

Probably because React checks window.Element.prototype.moveBefore but doesn't check it on the actual instance. Since we portal into a fake DOM implementation for collections which does not have this method it breaks. https://github.com/facebook/react/blob/5d04d73274a884ed53106677d56dd837ae668c45/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L935-L939

Ideally React would check if typeof parentInstance.moveBefore === 'function' instead. I suppose we could look into implementing moveBefore if they decide not to do that.

[mhornbacher]

@devongovett wow, thank you so much for the thoughtful fix!