shouldRenderEmptyPage in ListView throws runtime error

[tjfdud]

What you were expecting:

We are using InfiniteList component from react-admin, the current 4.16.20 version, it runs clean and no problem.

<InfiniteList
          storeKey={aKey}
          perPage={DEFAULT_PER_PAGE}
          pagination={<LoadMore />}
          filters={getFilters()}
          actions={<CustomListActions />}
          empty={<EmptyChangeSet />}
          title={aTitle}
          filterDefaultValues={{ status: STATUS_VALUES.DRAFT }}
        >
          <CustomDataGrid />
 </InfiniteList>

What happened instead:

Migrating react-admin from 4.16.20 to version 5, we are experiencing runtime error when rendering InfiniteList component.

Steps to reproduce:

The only change we made is package.json update to use the latest version 5.3.0.

Related code:

Can we add a null check in this code?

react-admin/packages/ra-ui-materialui/src/list/ListView.tsx

Line 79 in b921443

data.length === 0)) &&

insert short code snippets here

Other information:

Environment

• React-admin version: 5.3.0
• Last version that did not exhibit the issue (if applicable): 4.16.20
• React version: 18.3.1
• Browser:
• Stack trace (in case of a JS error):

Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
    at ListView (http://localhost:3005/testapp/static/js/bundle.js:136932:8)
    at renderWithHooks (http://localhost:3005/testapp/static/js/bundle.js:154232:22)
    at updateFunctionComponent (http://localhost:3005/testapp/static/js/bundle.js:157799:24)
    at beginWork (http://localhost:3005/testapp/static/js/bundle.js:159518:20)
    at HTMLUnknownElement.callCallback (http://localhost:3005/testapp/static/js/bundle.js:144488:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3005/testapp/static/js/bundle.js:144532:20)
    at invokeGuardedCallback (http://localhost:3005/testapp/static/js/bundle.js:144589:35)
    at beginWork$1 (http://localhost:3005/testapp/static/js/bundle.js:164487:11)
    at performUnitOfWork (http://localhost:3005/testapp/static/js/bundle.js:163735:16)
    at workLoopSync (http://localhost:3005/testapp/static/js/bundle.js:163658:9)

[fzaninotto]

I can't reproduce the error you describe. You can see in the react-admin Storybook that <InfiniteList> renders without error. There must be something else in your setup that causes the bug. Therefore, we'll need a repro (i.e. based on the code of one of the stories).

As a side note, the related code that you point should never fail: if error is null and isPending is false, data should always be defined. Unless your data provider returns undefined data instead of an empty array?

[tjfdud]

@fzaninotto Thank you for the quick response.

What we know by now

• This seems to happen intermittently and mostly at the initial loading and/or after full refresh. Once ignored the error, it may work for the following attempts for a while.
• We also ensured that our custom dataProvider always returns [] even in error situation. It works fine on our production using react-admin 4.x.
• We noticed that, for List component, it uses same ListView component WITHOUT pagination prop. When we try switching our app to use List component just for test/debug purposes, we see it working fine. We just see this issue with InfiniteList.
• When the problem happens with InfiniteList, we can see that data is undefined.
  

[djhi]

Thanks for reporting this. Please provide a sample application showing the issue, preferably a sandbox forked from

• https://codesandbox.io/p/github/marmelab/react-admin-sandbox/main (v5)
• https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple (v5)
• https://stackblitz.com/github/marmelab/react-admin/tree/4.x/examples/simple (v4)

[rgore13]

We have tried using the latest version (5.4.2), but we are still encountering the issue with the InfiniteList component. We have observed that the List component uses the same ListView component but without the pagination prop. When we switched our app to use the List component for testing/debugging purposes, it worked fine.

We are only seeing this issue with the InfiniteList. We also tried reproducing the issue on a sandbox, but couldn't. Since this seems to be a matter of adding a null check, is it possible to get a fix?

[fzaninotto]

I'm sorry, but we definitely need a repro.