Formcontext returns 'null' inside SOME SimpleForm components.

What you were expecting: React-hook-form methods such as useWatch, useFormContext, etc. to work correctly inside a SimpleForm component.

What happened instead: React-hook-form methods inside SOME SimpleForms fail with the error “cannot read properties of null (reading ‘control’)”. In this case, particularly when used in my codebase to wrap inputs on a modal form on a list view’s bulk actions. Elsewhere, such Create and Edit forms, the react-hook-form methods return the expected values.

Steps to reproduce: I’ll provide screenshots below, but perhaps the most frustrating aspect of this bug is that I have been unable to replicate it in a CodeSandbox. Since the problem is likely something to do with my local, I hope this issue can potentially help other RA users who may run into that same problem.

Related code: The below code is a VERY stripped down component which is breaking when used as a Bulk action on a list view in my codebase.

import React from 'react';
import { SimpleForm, TextInput } from 'react-admin';
import { useWatch } from 'react-hook-form';

const TestForm = () => (
    <SimpleForm>
        <TestInputs />
    </SimpleForm>
);

const TestInputs = () => {
    const test = useWatch({ name: 'test' });
    return <TextInput source="test" />;
};

export default TestForm;

Other information: As mentioned above, I really believe that the issue is on my side (especially since I can’t recreate it on CodeSandbox), but my code follows the patterns that previously worked when RA was using react-final-form, and I’m hoping this issue can be used to point me in the right direction for debugging the problem, and hopefully help others who have have run into the same issue or will in the future.

Screenshot for the stack trace below.

Environment

• React-admin version: 4.0.0.rc-1
• Last version that did not exhibit the issue (if applicable): 3.19.10
• React version: 17.0.2
• Browser: Chrome
• Stack trace (in case of a JS error):

[toniweser]

I was working on a project, where we were using Material UI and included React Admin at a later point.

As React Admin is providing also Material UI dependencies, we did forget to remove the previously used Material UI dependencies. Probably this was causing the error.

After removing the Material UI dependencies, everything was working fine.

[anon-r-7]

Ah nvm this is on me. Using yarn workspaces and thought I had a clean yarn install but I didn’t.