Filters - Cannot read properties of null (reading 'control')

What you were expecting:

Normal filtering for the list

What happened instead:

Steps to reproduce:

1. Add a resource
2. Access the list for this resource
3. Modify the <List /> to contain some filters

Related code:

const postFilters = [
  <TextInput variant="outlined" label="City" source="city" />,
];

<List
    filters={postFilters}
    actions={
      <TopToolbar>
        <FilterButton />
      </TopToolbar>
    }
    sort={{ field: 'created_at', order: 'DESC' }}>
    {...}
</List>

Environment

• React-admin version: 4.1.0
• Last version that did not exhibit the issue (if applicable): 3.x
• React version: 18.1.0
• Browser: Chrome

NB

Using yarn PnP for this project which might be something related to the issue.

[magnattic]

@yousseftarekkh and I investigated the issue further and found the culprit. For anyone else using yarn pnp and having this problem, here is the solution:

We had different versions of react-hook-form installed in the same project, which under pnp leads to problems with the react context not working. (The Provider and Context must be from the same version or the context will be empty.)

yarn why -R react-hook-form ├─ my-project │ ├─ react-admin@npm:4.1.0 [31191] (via npm:4.1.0 [31191]) │ │ ├─ ra-ui-materialui@npm:4.1.0 [e24d5] (via npm:^4.1.0 [e24d5]) │ │ │ └─ react-hook-form@npm:7.29.0 [31191] (via npm:7.31.3 [31191]) │ │ └─ react-hook-form@npm:7.31.3 [31191] (via npm:7.31.3 [31191]) │ └─ react-hook-form@npm:7.31.2 [31191] (via npm:7.31.3 [31191])

After making sure that all versions are exactly the same, it worked. Specifically we fixed the missing dependency of ra-ui-materialui to react-hook-form in the .yarnrc.yml like this:

ra-ui-materialui@*:
    peerDependencies:
       react-hook-form: "*"

This way it is using the version from react-admin.

Also we made sure that in our project we are using the same version of react-hook-form as the one that react-admin installs. Now they are in sync and everything works again:

├─ my-project │ ├─ react-admin@npm:4.1.0 [31191] (via npm:4.1.0 [31191]) │ │ └─ react-hook-form@npm:7.31.3 [31191] (via npm:7.31.3 [31191]) │ └─ react-hook-form@npm:7.31.3 [31191] (via npm:7.31.3 [31191])

So what can react-admin do to help people that use yarn pnp?

• Add the missing peerDependency to the package.json of ra-ui-materialui. Right now this is implicitly using the package without declaring it, which to me looks like a mistake.
• Consider making react-hook-form a peerDependency of react-admin. Many people will also need to work with the forms library in their own project and keeping the versions in sync will be much easier if it is a peerDependency instead of a dependency.

[djhi]

Indeed, we did not test it with PnP