question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type NestedValue + yupResolver fails type checking after v1.3.7

See original GitHub issue

Describe the bug When I try to type useForm with property that is an array of strings, like:

import * as yup from 'yup'
import { NestedValue } from 'react-hook-form'

interface ApplicationCreationFormValidation {
  scopes: NestedValue<string[]>
}

const schema = yup
  .object({
    scopes: yup.array().of(yup.string()).required('You must select at least one scope')
  })
  .required()

const form = useForm<ApplicationCreationFormValidation>({
    defaultValues: { scopes: [] },
    mode: 'onTouched',
    resolver: yupResolver(schema)
  })

I get de following type error:

Screen Shot 2021-11-30 at 11 07 59

To Reproduce To reproduce you can go to the codesandbox that @bluebill1049 posted on an issue related to it:

If you bump the version to the latest it crashes.

Codesandbox link (Required) https://codesandbox.io/s/infallible-panini-7duc6?file=/src/App.tsx

Expected behavior it shouldn’t have any type error

Desktop (please complete the following information):

  • OS: macOS Big Sur
  • Browser Chrome
  • Version 95.0.4638.69 (Official Build) (arm64)

Additional context I’ve noticed that stopped working after v1.3.7. In my case, if I downgrade the version to 1.3.7, it works.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
ifightcrimecommented, Mar 20, 2022

@bluebill1049 hmm this doesn’t seem like a version issue? I’m getting the same thing on react-hook-form@7.27.1 with @hookform/resolvers@2.8.8.

...
          Types of property 'address' are incompatible.
            Type '{ matching_place_name?: string | undefined; id: string; place_name: string; geometry: { type?: string | undefined; coordinates: [number, number]; }; }' is not assignable to type 'NestedValue<{ matching_place_name?: string | undefined; id: string; place_name: string; geometry: { type?: string | undefined; coordinates: [number, number]; }; }>'.
              Property '[$NestedValue]' is missing in type '{ matching_place_name?: string | undefined; id: string; place_name: string; geometry: { type?: string | undefined; coordinates: [number, number]; }; }' but required in type '{ [$NestedValue]: never; }'.

I’m using Zod. My workaround is likely going to be the same as @jonatassales, but not ideal.

1reaction
ifightcrimecommented, Mar 20, 2022

Traced down react-hook-form/react-hook-form#7888 and it’s fixed in v8! So looks like this was technically a version issue after all. 😜

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - react-hook-form v7 `resolver` type error when using ...
I have an interface for the form like this: interface FormData { name: string; age: number | ""; hobbies: string[]; }.
Read more >
@hookform/resolvers - npm
React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types and Typanion.
Read more >
Advanced Usage - React Hook Form
Step 3: Write tests. The following criteria are what we try to cover with the tests: Test submission failure. We are using waitFor...
Read more >
react-hook-form | Yarn - Package Manager
... developers to convert error messages to String to pass the type check ... Deprecate NestedValue and UnpackNestedValue type, will be removed in...
Read more >
Type NestedValue + yupResolver fails type checking after v1.3.7
Starting at version 2 of resolvers, you've to use the v7 version of react-hook-form.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found