Type 'string' is not assignable to type 'Path<UnPackAsyncDefaultValues<TFieldValues>'

[jnaputi94]

Hi all,

I am having an issue that wasn't present before in regards to the <Controller /> component. I have the following interface (name is simplified) that used to work:

interface Props<TFieldValues extends FieldValues> extends UseControllerProps<TFieldValues> {
  fieldName: Path<TFieldValues>
}

And the form component is as follows:

const Input = <TFieldValues extends FieldValues>({fieldName}: Props<TFieldValues>) => {
  return (
    <Grid {props}>
        <Controller name={fieldName} {otherProps} />
    </Grid>
}

It would be called like this:

<Input fieldName='title' />

The above worked fine; however, after running a babel update from v7.20.5 to v7.20.7, there was a dependency that was missing -- @babel/helper-remap-async-to-generator -- and this was installed.

After getting that yarn problem resolved, the type of fieldName has changed from Path<TFieldValues> to Path<UnPackAsyncDefaultValues<TFieldValues>> and I am no longer able to call the <Input /> component with fieldName as a string now.

Type 'string' is not assignable to type 'Path<UnPackAsyncDefaultValue<TFieldValues>>'.

I was wondering if anyone has seen this issue before, and is there a way to pass in a string still as the field name?

[Moshyfawn]

Try using

import type { FieldPath, FieldValues } from "react-hook-form" 

type InputProps<TFieldValues extends FieldValues> = {
  fieldPath: FieldPath<TFieldValues>
}

[jnaputi94]

Same problem: Type 'string' is not assignable to type 'Path<UnPackAsyncDefaultValues<TFieldValues>>'

[Moshyfawn]

Can you elaborate on what you're trying to achieve? Because I see that you extend UseControllerProps which already has the field name value which you're trying to pass via fieldPath

[jnaputi94]

Yup! The custom input component was designed to remove code duplicity across our existing forms. We are currently using Material UI's DatePicker component, and we have them set up in the following flow: Grid -> Controller -> DatePicker. So that we can customize each specific instance of the custom input, we decided to have the Props interface extend UseControllerProps.

[tgdn]

Did you solve this @jnaputi94? I'm facing a similar issue.