useFormContext returns null

[evgvis]

Hi. i have some internal library where i created few components based on [email protected]. everything was ok when i build library in one js bundle. then i have split library by component (1 component = 1 file) and forms components broke.
i see an error "Cannot destructure property 'control' of 'Object(...)(...)' as it is null" because useFormContext returns null;

some part of my components.
Form:

const Form = (props) => {
    const { formProps = {}, className = "", children } = props;

    const reactHookFormMethods = useForm({ validateCriteriaMode: "all", ...formProps });

    return (
        <FormContext {...reactHookFormMethods} >
            <form>
                {children}
                <Button .../>
            </form>
        </FormContext>
    );
};

Input:

const Input = (props) => {
    const { name, label, ... } = props;
    const { register, errors = {}, getValues, triggerValidation, setError, clearError } = useFormContext();
    
    const inputRef = useRef();

    return (
        <div>
            <label htmlFor={name}>
                <InputComponent
                    id={name}
                    name={name}
                    ref={e => {
                        register(e, validation);
                        inputRef.current = e;
                    }}
                />
                <span>{label}</span>
            </label>
        </div>
    )
}

[bluebill1049]

make sure your FormProvider does wrap up the entire forms.

[evgvis]

thank you, but all my form-components inside my Form component:

import Form from "ui-components/forms/Form";
import Input from "ui-components/forms/Input";

const Layout = (props) => {
	return (
		<Form formProps={{ onSaveFunc: console.log }} >
			<Input name="any" label="Enter anything" />
		</Form>
	(
};

maybe i have problem because of wrong config babel or webpack. what do you think ?

[bluebill1049]

Don't think so, you may want to reproduce that in a CSB, happy to take a look at it.

[evgvis]

I'd love to, but the library deployed to internal npm.

[evgvis]

ps. if you have some time, maybe you want to make small call where i will show you code of two my projects

[evgvis]

i have updated react-hook-form. but with 6.14.1 i have the same error(

[evgvis]

@bluebill1049 hi)
i created test-lib with few component - https://github.com/evgvis/test-lib
then published it to npm - https://www.npmjs.com/package/@evgvis/test-lib
and created csb - https://codesandbox.io/s/xenodochial-sutherland-wo2hp?file=/src/App.js

may i ask you to review it ;)
thanks

[bluebill1049]

yea, it's a strange one. not sure why this is happening.

[evgvis]

oh(( sad to hear this. thanks for trying to help ;)

[bluebill1049]

do you have a different instance of React?

[evgvis]

for now i use 16.13.1, should i try 17.0.1?

[bluebill1049]

that should be fine tho...

[evgvis]

@bluebill1049 i solved this issue)
basically what i need it is just adding react-hook-form as external library in webpack config
and now, csb is working :)

[stevenirby]

@neotrow I too ran into an issue using useFormContext with next.js.

For now I just did this:

const { register, unregister, formState } = useFormContext() ?? {};
...

if (!register) return null;

Very dirty but I was able to build.

[neotrow]

@stevenirby

That was also my first approach but a lot of our code is dependent on what we get back from useFormContext so it would just fail somewhere else.

My use case was that we created a package that contains some common components. We fixed it by exporting the useFormContext in our package:
https://github.com/neolution-ch/react-hook-form-components/blob/main/src/index.ts#L13

And then in the app itself importing the useFormContext from our package instead of from react-hook-form-components directly.

I think it's an issue with react contexts in general that get messy if they get initialised once in the app and once in the package but i didn't investigate any further.

[damneddutch]

@neotrow , absolute rockstar! with a little tweaking of your code, got my shared component working as well! What got me at first was that the component must reside inside the imported FormContext.Provider as well.

[hoa-nguyen-bk]

Thank you @stevenirby , because of little dirty code:

const { register, unregister, formState } = useFormContext() ?? {};
...

if (!register) return null;

but I soon really that I forget the <FormProvider />, you save my day, thank you so much

[paolobiavati]

basically what i need it is just adding react-hook-form as external library in webpack config

the linked git hub repo is private...

[mcgrealc]

Stuck on this issue as well - using RHF 7.39.1, have added RHF to webpack externals, wrapped the component from my library in FormProvider but still useFormContext is null

[mcgrealc]

Just to answer my own question and to verify what @smeng9 said earlier in the thread - use rollup rather than webpack. My React App is ESM so rollup is the only option (only option that worked for me) to build your library to be compatible.

[thedocbwarren]

Can we open as a issue for better tracking?

[carboni-rob]

I think the easiest solution in this case is not to use the form context and apply a control inversion pattern. We need to pass the methods to the parent from the child, instead of getting them in the child via context. So we need something like:

const Form = ({formMethods}) => {
    return (
        <form onSubmit={formMethods.handleSubmit(onSubmit)}>
            {children}
            <Button .../>
        </form>
    );
};

and

const Input = (props) => {
   const methods = useForm();

    return (
        <Form
           formMethods={methods}
        >
           <CustomInput ... />
        </Form>
    )
}

This works for us, I hope it helps.

[alvamanu]

this kills the purpose of context though. You can simply destructure all methods you need from useForm when initializing it and then pass them as props

[UnicornRider26]

Beware of the different package versions in case this happens to you in cross-package usage situation (as it did to me)

[klapec]

I wish I found this comment sooner... Thank you!!!

[lhotamir]

If you are using rollup for your library and webpack for your app, make sure your rollup output is in the es format.

output: {
      file: pkg.main,
      format: 'es',
      ...

[jahabeebs]

For anyone reading this who happens to be using a component library that uses react-hook-form like shadcn/ui make sure your Form component is being imported from the component library you're using (like import { Form } from '@/components/ui/form') and not from react-hook-form itself!

[fhub-1]

thanks a lot working fine :((((

[codewithmecoder]

I did not expect that. thank you.

[altanyenigun]

this solved my problem too, thank you.

[mestir]

T1000

[ludo237]

Stumble upon this stupid import today, thanks

[GlennOlsson]

For future reference;

I hade the same problem when creating a library that applies the context, when the projects using the library were Webpack Module Federated. It was not enough to only add react-hook-form as an external for my library, I also had to add it to the shared object of the ModuleFederationPlugin configuration, like

new ModuleFederationPlugin({
  shared: {
    "react-hook-form": {
      singleton: true,
      version: "7.27.0"
    }
    // ...
  },
  // ...
})

Hope this can help someone

[alvamanu]

I'd like to share my take on this.

Looks like as soon as you initiate your form with useForm, hooks from RHF library are inaccessible to children components. So I tried [sazzadtanim]s solution, but I'm not initiating props in children components before the return (all passed props or "methods" are run AFTER return). I'm actually running the prop directly and also making sure it runs only when it's accessible (props.getValues && props.getValues()). Looks like NextJS isn't following ReactJS loading patterns on build. Thank you sazzadtanim!

[edwardnz2017]

I also had this issue and found a simple workaround.

Original issue:

export const Component = () => {
  // This is where the issue happened for me, as useFormContext was null
  const { setValue } = useFormContext()
  
  useEffect(() => {
    setValue("foo") 
  }, [setValue])
};

Fix:

export const Component = () => {
  const methods = useFormContext()
  
  useEffect(() => {
    if (methods && methods.setValue) {
      setValue("foo") 
    }
  }, [methods])
};

By simply adding a check to make sure that it isn't null, it got rid of the error.

[imranDev20]

const methods = useFormContext() ?? {};

const { fields, append, remove } = useFieldArray({
control: methods && methods.control,
name: "products",
});

Doesn't seem to be working for me.

[roaugusto]

Based on @edwardnz2017 comment, I was able to solve the problem in a simpler way:

type CustomInputProps = ComponentProps<'input'> & {
   name:string
}

export function CustomInput({ ...props }: CustomInputProps) {
   const methods = useFormContext()

   return <input id={props.name} {...props} {...methods?.register(props.name)} />
}

[Kepron]

If none of the other comments seem to match your situation, and you think everything in your code is correct and in right place, there's something I'd like you to check. It's pretty simple. If you render the function/const where you use useFormContext as a function, you will also get this error.

All I did was change this part of my code;

{filteredInputs.map(([key, items], index) => (
  <Grid key={key} size={{ xs: 12, sm: filteredInputs.length % 2 !== 0 && index === filteredInputs.length - 1 ? 12 : 6 }}>
    {ResAddRenderInputs(key, items)}
  </Grid>
))}

to this:

{filteredInputs.map(([key, items], index) => (
  <Grid key={key} size={{ xs: 12, sm: filteredInputs.length % 2 !== 0 && index === filteredInputs.length - 1 ? 12 : 6 }}>
    <ResAddRenderInputs itemKey={key} items={items} />
  </Grid>
))}

[acbonnyac]

Another option I'd add is to have your React component to take useFormContext as a prop. Something like this:

interface Props {
    // useFormContext does not work when used across packages
    // We need to get this from the caller instead
    useFormContext?: typeof useFormContext;
}

const YourComponent: React.FC<Props> = ({
    useFormContext: useFormContextFunc = useFormContext,
}) => {
    const {
        watch,
        register,
        formState: { errors },
    } = useFormContextFunc();
    ...
};

This way, you can still test your component within NPM package by using useFormContext on its own project without having to pass around form methods. For the caller side on the other project, you can pass in useFormContext function to your React component so it's still going to work with useForm from outside.