How to access form context created in a library from app

[douwepausma]

I've created a library package that uses react-hook-form and exports an array of components amongst which a wrapper that uses FormProvider. All input components that comes with the package work as expected and are able to useFormContext.

The problem is that when I try to directly use useFormContext in my Next.js app (for example in a custom input component) the hook returns null which results in ERROR: Cannot read properties of null (reading 'register').

// src/app/page.js
import { MyForm, MyFormInput } from 'my-custom-form'
import CustomInput from '@/components/custom-input'

export default function Page() {
    return (
        <MyForm>
            <MyFormInput /> // This component is provided by the library and works fine
            <CustomInput /> // This component is provided by the app and doesn't work
        </MyForm>
    )
}

// src/components/custom-input.js (Next.ts App)
'use client'
import { useFormContext } from 'react-hook-form'

export default function CustomInput() {
    const { register } = useFormContext();  // ERROR: Cannot read properties of null (reading 'register')

    return <input {...register('name')} />
}

// node_modules/my-custom-form/dist/index.js (My Package)
'use client'
import { useForm, FormProvider } from 'react-hook-form'

export default function MyForm({ children }) {
    const methods = useForm();

    return (
        <FormProvider {...methods}>
            <form>
                {children}
            </form>
        </FormProvider>
    )
}

Details

• The library has react-hook-form as external / peer-dependency
• The library and app require the same version of react-hook-form
• The library and app are both a esnext module
• The library uses rollup.js and the app use [email protected] without TurboPack

Similiar topics

#3894 discusses a similar issue, but as I read it, they are having problems with inputs provided by the library not being able to use useFormContext(), which is not the case for me.

[BrendanC23]

Can you post a CodeSandbox that reproduces your problem?

[douwepausma]

We'll after hours of searching without result. I tried something which managed to work. I just exported a custom hook from the package to use in my app and it seems to be working... bitter sweet.

// node_modules/my-custom-form/dist/my-form-context.js (My Package)
import { useFormContext } from 'react-hook-form';

export const useMyFormContext = useFormContext();

[craigmcc]

@douwepausma Per the RHF documentation, you should be wrapping the form itself in a FormProvider. That is what makes the context available to useFormContext calls in the components themselves. This works fine for all my forms that have components that rely on useFormContext() internally.

Why does it work for the library-provided component? Probably because the component itself is doing something similar.