MeteorJS with code-splitting (dynamic imports) List items no longer render starting with 4.6.1 in Production

[paulincai]

When fixing #992 with this commit: https://github.com/petyosi/react-virtuoso/commit/4a57a426364be405bbe7dad3898aa2efdb927b04 a change has been introduced in /src/Virtuoso.tsx.

return React.createElement(
          ItemComponent,
          {
            ...contextPropIfNotDomElement(ItemComponent, context),
            ...itemPropIfNotDomElement(ItemComponent, item.data), // introduced
            key,
            'data-index': index,
            'data-known-size': item.size,
            'data-item-index': item.index,
            'data-item-group-index': item.groupIndex,
            // item: item.data, // removed
            style: ITEM_STYLE,
          },

After this change, items in Virtuoso are no longer generated in Production. However, on the local station in Development they are present. I downloaded and rebuilt 4.6.1 reverting the 2 lines to what was in 4.6.0, installed in my project as a local NPM package, pushed to Production and all ok. Installed the original 4.6.1 and items again do not render in Production.

View DOM from original 4.6.1 in Dev:

View DOM from original 4.6.1 in Production:

[petyosi]

Can you reproduce the problem in a sample repository? There are multiple bundler/minifier options that can cause this.

[paulincai]

Not sure I can do a relevant/useful sample repository on this but I have a plan.

I am going to extract DB data of 20 objects in an array and keep it within the code. Create a new MeteorJS project to only contain the Virtuoso and run it with a Production flag on my station and then deploy it in a cloud as well. See what I get.

Then I can dig into the JS bundle (SPA) and extract the Virtuoso library with a working state and with a non working state, commit them to github so I can find the code differences. I will get back on this one.

[petyosi]

I'm not sure I'm following here. To make it clear:

• I have no experience with MeteorJS.
• The commit you refer to has nothing wrong with it, as far as I can tell.
• Having a different behavior in dev / production is usually a sign of something wrong with the bundling/minification. I've encountered such problems several times, and each time that was an actual bug in the minification.

[paulincai]

Your point 3 is exactly why I thought I could not provide a relevant sample repository and was going to dig into bundling/minification. If this relates to MeteorJS Reify bundling or Babel or the JS minifier, I will update the title of this topic. Let's please keep this open for a bit, I understand your point 2 above.

[paulincai]

Ok, I think I found the issue, or better said, the context of the occurrence.

I use this NPM @loadable/component for dynamic imports of functional components. In the top JS file I dynamically import all my react-router routes. e.g. const Main = loadable(() => import('../../startup/client/routes'))

In Main, I import all the components and connect them to routes.

e.g

const AppCanvas = loadable(() => import('../../ui/modules/feeds/FeedWall/AppCanvas'))

// ...
 <Routes location={location?.location}>
     <Route path='/' element={<AppCanvas />} />
</Routes>

Ok, AppCanvas contains Virtuoso.

1. If I import Main (the routes component) dynamically and AppCanvas with a normal import (import AppCanvas from '../../ui/modules/feeds/FeedWall/AppCanvas') Virtuoso works.
2. If I import Main and AppCanvas directly (normal) Virtuoso works
3. If I import Main with a normal import and AppCanvas dynamically, Virtuoso doesn't work.

Basically, when the parent or the component of Virtuoso is loaded dynamically, it stops working in versions above 4.6.0 Now that I know what is happening I will try to simulate this in a repo before the mid of next week.

[paulincai]

Unfortunately I cannot reproduce this in https://codesandbox.io/ or similar because these platforms do not provide options for bundling for production grade. I will close this one now and will leave it for future Meteor guys in case they reach the same problem.