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)