Adding<FilterButton /> cause an error "Uncaught TypeError: Cannot read properties of undefined (reading 'filter')"

[mirus-ua]

What you were expecting:
Work as expected out of the box

What happened instead:
Uncaught TypeError: Cannot read properties of undefined (reading 'filter') when I added <FilterButton />

Steps to reproduce:
This almost clear boilerplate

Related code:
App.tsx

const App = () => (
  <Admin
    loginPage={LoginPage}
    dataProvider={dataProvider}
    authProvider={authProvider}
  >
    <Resource
      name="v1/user"
      list={UserList}
      create={UserCreate}
      icon={UserIcon}
      edit={UserEdit}
      show={UserShow}
    />
  </Admin>
);

UserList.tsx

const ListActions = (props: any) => {
  return (
    <TopToolbar>
      <FilterButton />
      <CreateButton />
      <ExportButton />
    </TopToolbar>
  );
};

const UserList = (props: any) => {
  return (
    <List {...props} actions={<ListActions />}>
      <Datagrid>
        <TextField source="id" />
        <TextField source="name" />
        <EmailField source="email" />
      </Datagrid>
    </List>
  );
};

Environment

• React-admin version: "^3.19.5"
• Last version that did not exhibit the issue (if applicable): none
• React version: "^17.0.2"
• Browser: chrome
• Stack trace (in case of a JS error):

Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
    at FilterButton (FilterButton.js:46)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at unbatchedUpdates (react-dom.development.js:22438)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.tsx:7)
    at Module../src/index.tsx (index.tsx:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.ts:16)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
FilterButton @ FilterButton.js:46
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.tsx:7
./src/index.tsx @ index.tsx:18
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.ts:16
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 
        
       The above error occurred in the <FilterButton> component:

    at FilterButton (http://localhost:3000/static/js/vendors~main.chunk.js:158934:27)
    at div
    at Toolbar (http://localhost:3000/static/js/vendors~main.chunk.js:32152:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:42205:31)
    at TopToolbar (http://localhost:3000/static/js/vendors~main.chunk.js:155120:25)
    at ListActions (http://localhost:3000/static/js/main.chunk.js:912:5)
    at div
    at Toolbar (http://localhost:3000/static/js/vendors~main.chunk.js:32152:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:42205:31)
    at ListToolbar (http://localhost:3000/static/js/vendors~main.chunk.js:156225:31)
    at div
    at ListView (http://localhost:3000/static/js/vendors~main.chunk.js:156325:23)
    at ListContextProvider (http://localhost:3000/static/js/vendors~main.chunk.js:109670:18)
    at List (http://localhost:3000/static/js/vendors~main.chunk.js:155865:79)
    at UserList
    at WithPermissions (http://localhost:3000/static/js/vendors~main.chunk.js:108000:26)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:196162:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:196364:29)
    at ResourceContextProvider (http://localhost:3000/static/js/vendors~main.chunk.js:116984:21)
    at ResourceRoutes (http://localhost:3000/static/js/vendors~main.chunk.js:116850:20)
    at Resource (http://localhost:3000/static/js/vendors~main.chunk.js:116922:18)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:196162:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:196364:29)
    at RoutesWithLayout (http://localhost:3000/static/js/vendors~main.chunk.js:117111:24)
    at div
    at main
    at div
    at div
    at LayoutWithoutTheme (http://localhost:3000/static/js/vendors~main.chunk.js:153456:24)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:42205:31)
    at C (http://localhost:3000/static/js/vendors~main.chunk.js:196419:37)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:193211:75)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:40907:24)
    at Layout (http://localhost:3000/static/js/vendors~main.chunk.js:153574:26)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:196162:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:196364:29)
    at div
    at CoreAdminRouter (http://localhost:3000/static/js/vendors~main.chunk.js:116486:87)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:196162:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:196364:29)
    at CoreAdminUI (http://localhost:3000/static/js/vendors~main.chunk.js:116702:18)
    at AdminUI
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:195793:30)
    at ConnectedRouter (http://localhost:3000/static/js/vendors~main.chunk.js:49157:7)
    at ConnectedRouterWithContext (http://localhost:3000/static/js/vendors~main.chunk.js:49280:25)
    at ConnectFunction (http://localhost:3000/static/js/vendors~main.chunk.js:193211:75)
    at TranslationProvider (http://localhost:3000/static/js/vendors~main.chunk.js:125498:28)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:192922:20)
    at CoreAdminContext (http://localhost:3000/static/js/vendors~main.chunk.js:116249:28)
    at AdminContext
    at Admin (http://localhost:3000/static/js/vendors~main.chunk.js:160696:25)
    at App

React will try to recreate this component tree from scratch using the error boundary you provided, LayoutWithoutTheme.

[WiXSL]

I couldn't reproduce this problem in the simple project,
Please provide a CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple) where I can reproduce the error you are describing

[mirus-ua]

I use a custom data provider ra-data-nestjsx-crud, so I can't put a snippet to codesandbox. Could the problem be with the provider? I can't find any specific requirements

[WiXSL]

Doesn't look like a dataProvider problem.
You are going to have to publish a reproducible sample in order to see what is wrong

[vastsy]

I am having same issue on my test application.
My app consists from 3 parts:

MongoDB (logos-backup.zip) https://drive.google.com/file/d/1qBjUMf8YEfm7qPK1N2_KnGDJig6ugOh0/view?usp=sharing
NodeJS API (auth-srv-new.zip) https://drive.google.com/file/d/1q6Og3fp_wQv2_xy2B29ei6JXKm0N4ThF/view?usp=sharing
React-Admin front end (test-admin.zip) https://drive.google.com/file/d/1q9OmL6HHlU1pygmqMjBk74rXuW90DhPE/view?usp=sharing

Every zip file has INSTALL.txt file which explains how to perform installation.

Your help is appreciated!

Happy New Year!

[FernandoVelcic]

Hello everyone, I have the same problem, I added FilterButton to the actions of my resource because the documentation example suggest that and I receive the same error.

[hlesev]

@Miruzz @FernandoVelcic for the FilterButton to function you have to add filters prop in the List component. Here is an example how to do it filters: Filter Inputs. The FilterButton and filters are placed on different sections in the documentation and this can lead to pondering how to use it the first time. Hope this helps.

[WiXSL]

@hlesev,
Thank you, you are right, making this, a documentation bug.

@fzaninotto,
We could validate the filter and return null inside the FilterButton component code.

[fzaninotto]

I think the FilterButton should throw an error when there is no filters- albeit probably a more explicit error.

The documentation may explain that the <FilterButtun> is not to be included if there is no filters.