Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Yup resolver silently ignores error that are not ValidationError #320

Closed
zero734kr opened this issue Jan 14, 2022 · 7 comments
Closed

Yup resolver silently ignores error that are not ValidationError #320

zero734kr opened this issue Jan 14, 2022 · 7 comments
Labels
question Further information is requested

Comments

@zero734kr
Copy link

Describe the bug
For example, when a TypeError (TypeError: You cannot `concat()` schema's of different types: string and number) is thrown by the schema validator (validator of the schema itself), the yup resolver silently ignores the error because the error.field described in this line of code is missing, falling back to a blank array.

To Reproduce
Steps to reproduce the behavior:

  1. Create a simple object schema like below and use it in the input element:
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

import "./styles.css";

const SignupSchema = yup.object().shape({
  name: yup.string().required(),
  value: yup.string().when("name", {
    is: "test",
    then: yup.number().required()
    // TypeError: You cannot `concat()` schema's of different types: string and number
    // is thrown in this case but there isn't any warning about that.
    // As the error is silently ignored, when the user clicks the submit button
    // nothing happens instead of alerting the stringified json data as described in line 27 of this sandbox.
  })
});

function App() {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(SignupSchema)
  });

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name</label>
        <input type="text" name="name" ref={register} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <label>Value</label>
        <input type="text" name="value" ref={register} />
        {errors.value && <p>{errors.value.message}</p>}
      </div>
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
  1. Write 'test' in the first input element
  2. Write any text in the second input element
  3. Submit the form by clicking the button, but nothing happens.

Codesandbox link (Required)
Include a codesandbox will help us to investigate the issue quicker.

My fork of yup resolver template

Expected behavior

Error TypeError: You cannot `concat()` schemes of different types: string and number thrown.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

@bluebill1049
Copy link
Member

bluebill1049 commented Jan 14, 2022

We don't validate your schema. This should be taken care of at your schema level check, resolver only focuses on ValidationError. cc @jorisre

@bluebill1049 bluebill1049 added the question Further information is requested label Jan 14, 2022
@zero734kr
Copy link
Author

I meant yup's schema validator, not @hookform/resolvers. Sorry if it was confusing.

@jorisre
Copy link
Member

jorisre commented Jan 17, 2022

In your case, Yup fails but the thrown error does not contain the path of the field. So we can't attach the error to a react-hook-form field. Do you see what I mean?

@zero734kr
Copy link
Author

In your case, Yup fails but the thrown error does not contain the path of the field. So we can't attach the error to a react-hook-form field. Do you see what I mean?

Yes I understand.
But I think the situation is like a bug, because it omits the thrown error and I was debugging for hours to find the cause.
So, instead of attaching the error to some react-hook-form field, how about throwing it anyway to some error handler like next.js catches in their debugger? In this case I can at least know there is an error and I need to solve that.

@bluebill1049
Copy link
Member

Maybe that's something we can consider. What's your thoughts @jorisre?

@jorisre
Copy link
Member

jorisre commented Jan 18, 2022

Yep, sounds good to me. I'll open a PR. Thanks for the issue.

jorisre added a commit that referenced this issue Jan 18, 2022
* chore: update deps

* fix(yupResolver): silently fail

* fix: import format => .mjs
@jorisre
Copy link
Member

jorisre commented Jan 18, 2022

Fixed in the last version

@jorisre jorisre closed this as completed Jan 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants