TypeError: Cannot read property 'fulfilled' of undefined
See original GitHub issueDescribe the bug I have a Codesandbox running a library called React Hook Form. If you add two friends in the code pen and then remove the first friend and then submit the form you see the error. The stack trace shows the error at a line in react-hook-form.js. BUT if you dig deeper the error is actually coming from line 84 of runValidations.js where the check for !r.fulfilled throws an error saying:
"TypeError: Cannot read property 'fulfilled' of undefined at eval (eval at <anonymous> (https://yycrz.csb.app/node_modules/yup/lib/util/runValidations.js), <anonymous>:1:3) at eval (https://yycrz.csb.app/node_modules/yup/lib/util/runValidations.js:84:17) at Array.filter (<anonymous>) at eval (https://yycrz.csb.app/node_modules/yup/lib/util/runValidations.js:83:32) at async Promise.all (index 0) at async validateWithSchema (https://yycrz.csb.app/node_modules/react-hook-form/dist/react-hook-form.js:383:21) at async eval (https://yycrz.csb.app/node_modules/react-hook-form/dist/react-hook-form.js:886:28)"
To Reproduce https://codesandbox.io/s/react-hook-form-array-fields-validation-using-refs-yycrz?from-embed
Add two friends and then delete one friend. When you submit the form, you can see the error Chrome dev tools.
NOTE: if you do not provide a runnable reproduction the chances of getting feedback are significantly lower
Expected behavior A clear and concise description of what you expected to happen. Handle the scenario where r is undefined to fail gracefully so it does not break the running script.
Platform (please complete the following information):
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Additional context Add any other context about the problem here. Also, one of the folks at React Hook Form asked me to share this screenshot:
Issue Analytics
- State:
- Created 4 years ago
- Reactions:7
- Comments:19 (6 by maintainers)
Top GitHub Comments
@jquense So, this is the source of the bug: https://github.com/jquense/yup/blob/27b287ba0dd8981ddb330c28123b41d85c4c8853/src/util/runValidations.js#L38-L49
Here,
promises.map
is supposed to map fulfilled and rejected promises to the appropriate value object. However,Array.map
does not iterate over the empty spots in sparse arrays:It can probably be said that the error originates here: https://github.com/jquense/yup/blob/27b287ba0dd8981ddb330c28123b41d85c4c8853/src/array.js#L87
Here, no validation will be generated for empty Array positions.
It seems to me that for the purposes of this library, it makes sense to convert empty array positions to
undefined
in the output.I’m having the same issue, removing first element breaks validation. I’m using React Hook Form.
Adding check here https://github.com/jquense/yup/blob/0c27f076668632912311226259745d19129bf9bb/src/util/runValidations.js#L62
.filter(r => r ? !r.fulfilled : false)
fixes it for me locally. Hope it will be fixed.