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

[ylkhayat]

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.

[fzaninotto]

I don't know what you're trying to achieve with the JSX you passed as custom actions, but with this code the error is normal. The cations component must contain a FilterForm if you add a FilterButton, as explained in https://marmelab.com/react-admin/FilteringTutorial.html#using-the-custom-filters-in-the-list-actions

[ylkhayat]

@fzaninotto I've followed all the documentation explicitly and tried all the possible cases, including the one you suggested, and no it's not working, that's basically why I created an Issue to get more insights about a potential bug. A similar topic was mentioned here #7501. I think there's a problem with the Form/SimpleForm, or maybe the issue exists in my setup.

More Info (as labeled)

I need to customize the actions because I need to omit the default CreateButton and needed to do something more with it. So I've extracted the logic and included the FilterButton

Tried usecases:

1. Tried the simplest one where we include a TextInput inside the filters prop and the List had the normal ListActions (not overriden)

<List filters={[<TextInput variant="outlined" placeholder="Example" label="City" source="city" />]} />

Result - did not work, also shows the Cannot read properties of null (reading 'control')
NB - I noticed that the list renders correctly with the FilterButton but when clicking on any filter to pop up for input, it starts showing the error message above.

2. Wrapping the List from (example n.1) inside a Form

<Form>
  <List filters={[<TextInput variant="outlined" placeholder="Example" label="City" source="city" 
  />]} />
</Form>

Result - did not show the error message, but it was not filtering properly

3. Wrapping the List from (example n.1) inside a SimpleForm

<SimpleForm>
  <List filters={[<TextInput variant="outlined" placeholder="Example" label="City" source="city" 
  />]} />
</SimpleForm>

Result - did not work, also shows the Cannot read properties of null (reading 'control')

---

In conclusion, I tried a lot of use cases and it was not just reading the context properly, I even tried creating my own form to wrap the List within, (was chaotic) did not also work.

Also, I suspect that it might an issue from my setup but I am curious how is that possible, I have all the correct dependencies installed.

NB:

I am using Yarn PnP. (updated the issue description)

[ylkhayat]

@fzaninotto

Ticket Update

The issue is with PnP. I changed my .yarnrc.yml

From

yarnPath: .yarn/releases/yarn-3.2.0.cjs
packageExtensions:
    "@mui/styled-engine@*":
        dependencies:
            "@emotion/react": "*"
            "@emotion/styled": "*"
    "@mui/x-date-pickers@*":
        dependencies:
            "@babel/runtime": "*"
    ra-core@*:
        dependencies:
            connected-react-router: "*"
            history: <5
    ra-ui-materialui@*:
        dependencies:
            react-hook-form: "*"
    react-admin@*:
        dependencies:
            prop-types: "*"
            "@types/prop-types": "*"
        peerDependencies:
            "@types/react-router-dom": "*"

To

yarnPath: .yarn/releases/yarn-3.2.0.cjs
packageExtensions:
    # "@mui/styled-engine@*":
    #     dependencies:
    #         "@emotion/react": "*"
    #         "@emotion/styled": "*"
    # "@mui/x-date-pickers@*":
    #     dependencies:
    #         "@babel/runtime": "*"
    # ra-core@*:
    #     dependencies:
    #         connected-react-router: "*"
    #         history: <5
    # ra-ui-materialui@*:
    #     dependencies:
    #         react-hook-form: "*"
    # react-admin@*:
    #     dependencies:
    #         prop-types: "*"
    #         "@types/prop-types": "*"
    #     peerDependencies:
    #         "@types/react-router-dom": "*"

nodeLinker: node-modules

And it worked as expected. Any idea if my .yarnrc.yml should be optimized a little to make it work or simply React Admin was not tested with PnP?

[djhi]

Indeed, we did not test it with PnP

[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.

[fzaninotto]

Thanks for the investigation and the detailed report.

I'm OK with your first suggestion. Would you like to open a PR for it?

[strarsis]

I have the same issue, but using npm, no yarn/yarn pnp.
Edit: It was caused by an <ArrayInput>.

[andrecastelo]

So for me the issue was not related to yarn pnp, but I am using yarn, and I had this on my package.json:

"react-hook-form": "^7.31.3",

Then a commit removed the ^ and broke everything. The issue, like @magnattic said, is related to two instances of the same package installed. I think react-admin uses another version of the package. After I readded the ^, cleared node_modules and reinstalled, it is working again.

[makivlach]

@andrecastelo This solved the problem for me! <3

[heljah]

Hi! After upgrading to version 5, this problem showed up. I'm using yarn. I noticed that in my yarn-lock file there are two different versions of react-hook-form, react-hook-form "^7.52.0" for react-admin version 5.0.0 and react-hook-form "^7.43.9" for react-admin version ^4.9.0.

[djhi]

This usually means you have multiple versions of react-hook-form installed. Check your lock files and merge duplicates manually

[heljah]

Yes, react-admin 5.0.0 installs two versions. I solved it by adding react-hook-form as peer dependency in my package.json file:

  "peerDependencies": {
    "react-hook-form": "7.52.0"
  }