[BUG] atBottomStateChange not triggering reliably in production, but does in development

[luap2703]

First of all again, thank you for the absolute amazing library and the bug-fixing on our previous issue, reinstating chat-states works now just perfectly!

Describe the bug Please refer to the attached clips. By changing the chat in the first video (i.e., changing the virtuoso set of messages and virtusoso key property) and completely refreshing the list in the 2nd clip, the atBottomStateChange should turn to true, as the last message is presented. But in production and as shown in the clips the atBottomStateChange property isn't firing correctly in production, at least most of the time. Our guess is that it has something to do with the bundling of the library but we couldn't really narrow down the cause. We are using the latest version + NextJS 12/13.

Please find the code here - The shown log comes directly from the atBottomStateChange property without any modification.

It works perfectly in Development mode, only building the project causes the issue.

Expected behavior As happening in Development mode, the atBottomStateChange should always return true, as the list bottom is shown

Desktop (please complete the following information):

• OS/Browser: Happens on iOS and Chrome, so it might be related to the build and not OS-related

Issue

https://github.com/petyosi/react-virtuoso/assets/70726673/475e6e60-02bb-43ca-a705-38b874ee55f7

https://github.com/petyosi/react-virtuoso/assets/70726673/b467806e-9292-4f23-93bb-e0414e47236d

[petyosi]

Acknowledging the problem. Reproduced it in a production build with nextjs one of the examples. I will look into it shortly.

[kotvasili]

same happens with startReached for prepending items. Works perfectly in dev but doesn't fire in release build

[petyosi]

@kotvasili i will need a reproduction for that. The problem here is related to event firing on mount.

[petyosi]

Follow up - this seems to be specific to next.js production builds. Both CRA and Vite work reliably in production...

I will try to reach to the next team.

[petyosi]

https://github.com/vercel/next.js/issues/49949

[kotvasili]

@petyosi from what I see repro is simple: pick example like this - https://codesandbox.io/s/gv2fdy?file=/App.js&utm_medium=sandpack add code to an empty next project check dev build works as expected build app and run prod version startReached doesnt fire initially when top reached.

Based on your comment above it might be related to next as well

[petyosi]

Yes, it's related to next. Seems like a class of problems related to next in production.

[github-actions[bot]]

:tada: This issue has been resolved in version 4.3.7 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[petyosi]

I am fairly certain that this is a bug in the SWC compiler. Here's a playground.

I pushed a fix in v4.3.7, @kotvasili @paulo2703 - please test and let me know how it works.

[kotvasili]

For me startReached works properly now. Thank you!

[luap2703]

@petyosi amazing!

We also tested the startReached prop once more and had the same issue as @kotvasili, but both are now resolved!

Thank you for the amazing speed and support!

[petyosi]

@paulo2703 @kotvasili thank you both for the confirmation. I believe it's a good moment to plug a recommendation for a monthly project sponsorship, up to your capabilities. Those help a lot.

Don't get me wrong, next.js is hugely popular, but it's not technically a choice I've forced on you with react-virtuoso. Or, in other words, this was not a problem in react-virtuoso or any of its direct dependencies. I could have deferred this to the swc package, where the issue might eventually be addressed, with an unknown timeline.

Investigating and solving such "fun" issues is a huge mental energy drain; I can only do it sustainably if there's enough support from the underlying commercial users of the library.

Cheers,