Joi validation works in code sandbox but not when running locally

[juliushuck]

Describe the bug

• Joi validation works in code sandbox but not when running locally
• And no data is displayed when I click on the submit button
• In the code sandbox it works like I expect it

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-hook-form-joiresolver-v6-yejqe?file=/src/index.js
2. Download the files
3. Run "npm i" in the folder
4. Start with "start" script

Codesandbox link (Required)
https://codesandbox.io/s/react-hook-form-joiresolver-v6-yejqe?file=/src/index.js

Expected behavior
Validation like in the code sandbox, username display in the alert

Screenshots
https://user-images.githubusercontent.com/41862965/109089198-2131e700-7711-11eb-8b2d-67eac4903038.mov

Desktop (please complete the following information):

• OS: macOS Big Sur
• Browser:Chorme
• Version: Chrome 84.0.4147.135 (Official Build) (64-bit)

[bluebill1049]

That doesn't really help us to investigate. You can try to create a repo and see if you can reproduce that.

[juliushuck]

Here: https://github.com/juliushuck/issue-react-hook-form-joiresolver-v6 but it should be the same as the code sandbox i linked to

[jorisre]

Hi @juliushuck 👋🏻

Firstly, you can use joi instead of @hapi/joi

After investigation, the problem schema seems not be in React Hook Form / @hookform/resolvers.

You can try to validate your schema:

try {
    await schema.validateAsync(values);
} catch(e) {
    // Got an error, but not the expected error, I think it's a Joi issue
}

[juliushuck]

I'm now using joi directly, I also tried joi-browser but they both have kind of the following result.

I tried your try-catch code. And it is catching nothing for me, BUT joi returns the error for the username. When I do console.log(schema.validate(values)); I get the following in the console.

That means, that joi is working, right?

I also updated my repo, so its current code prints the error generated by joy in the console.

[jorisre]

Yes, it works with schema.validate but it doesn't work with schema.validateAsync, I've the following error:

TypeError: Cannot read property 'defaults' of undefined

Here is how I get the error:

const { register, handleSubmit, errors } = useForm({
    resolver: async (values) => {
      try {
        await schema.validateAsync(values); // For testing purpose
      } catch(e) {
        console.log(e); // Log the error
      }

      return await joiResolver(schema)(values);
    },
  });

Joi resolver uses validateAsync that's why you get nothing, in your case, validateAsync seems not work, I think it's a Joi issue.

[juliushuck]

Ok, then I will create an issue on the joi repo.

[bluebill1049]

Thanks very much @jorisre for looking into this.