Skip to content
This repository has been archived by the owner on Sep 1, 2024. It is now read-only.

Vague error message for oneOfType #226

Closed
vinhlh opened this issue Oct 2, 2018 · 4 comments
Closed

Vague error message for oneOfType #226

vinhlh opened this issue Oct 2, 2018 · 4 comments

Comments

@vinhlh
Copy link

vinhlh commented Oct 2, 2018

Type definitions

    overlayClassName: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.shape({
        base: PropTypes.string.isRequired,
        afterOpen: PropTypes.string.isRequired,
        beforeClose: PropTypes.string.isRequired
      })
    ]),

Usage

overlayClassName={{
        base: 'modal-overlay',
        afterOpen: 'modal-overlay--opened'
      }}

Error received

Warning: Failed prop type: Invalid prop `overlayClassName` supplied to `Modal`.

In my case, I am using react-modal, and after upgrading to new version, a new prop attribute is added.
It will be much better if we show some kinds of warnings:

Warning: Failed prop type: Invalid prop `overlayClassName.beforeClose` supplied to `Modal`. Expected `string` but  received `undefined`

I would like to improve it if you guys agree.

@neelav
Copy link

neelav commented Feb 19, 2019

I'm running into this same issue. It looks like the validate function inside createUnionTypeChecker is dropping the error message returned from checker. Maybe it should concatenate the error messages together?

@ljharb
Copy link
Contributor

ljharb commented Feb 21, 2019

Duplicate of #9.

@ljharb ljharb closed this as completed Feb 21, 2019
@mikeplis
Copy link

mikeplis commented Jun 3, 2019

@ljharb #9 was closed by #198 but I'm still seeing this issue.

CodeSandbox: https://codesandbox.io/s/vague-error-message-for-proptypesoneoftype-v16ft

Code:

function Button({ myProp, ...rest }) {
  return <button {...rest} />;
}

Button.propTypes = {
  myProp: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ])
};

function App() {
  return (
    <div className="App">
      <Button myProp={["hello"]}>Hello</Button>
    </div>
  );
}

PropTypes validation warning:

Warning: Failed prop type: Invalid prop `myProp` supplied to `Button`.

I would expect the warning to tell me that I need to pass in either a string or a number to myProp.

@ljharb
Copy link
Contributor

ljharb commented Jun 3, 2019

@MPLIS that's because the commit is currently unreleased.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants