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.

Yup resolver silently ignores error that are not ValidationError

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
jorisrecommented, Jan 18, 2022

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

1reaction
jorisrecommented, Jan 18, 2022

Fixed in the last version

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - react-hook-form yup resolver, reactStrap problem ...
I have a form with helper components that contain my Input component. correctly returns validation error if the Input ...
Read more >
Validation Error Explanations for Genomes - NCBI - NIH
If the organism is not a prokaryote, then you can ignore this error and we will address it during processing. SEQ_FEAT.IllegalDbXref.
Read more >
A Comprehensive Guide To Error Handling In Node.js
Ignoring errors is unsafe, and you should not trust the contents of result before checking for errors. If you want to use this...
Read more >
Ajv options - Ajv JSON schema validator
This page describes properties of the options object that can be passed to Ajv constructor. For example, to report all validation errors (rather...
Read more >
Response validation with Yup - DEV Community ‍ ‍
Sometimes one would silently fail causing the API to be a 200 with invalid data. ... and handle any ValidationError that yup might...
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