Skip to content

Unable to use ReactNode as validation error in React 19 #4038

@pciarach

Description

@pciarach

Bug report

Current Behavior

When I use ReactNode for the validation errors in React 19 I end up with the following error:

Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at (...)\node_modules\formik\node_modules\deepmerge\dist\umd.js:55:30
    at Array.forEach (<anonymous>)
    at forEach ((...)\node_modules\formik\node_modules\deepmerge\dist\umd.js:55:22)
    at mergeObject ((...)\node_modules\formik\node_modules\deepmerge\dist\umd.js:79:10)
    at deepmerge ((...)\node_modules\formik\node_modules\deepmerge\dist\umd.js:38:5)
    at cloneUnlessOtherwiseSpecified ((...)\node_modules\formik\node_modules\deepmerge\dist\umd.js:57:23)
    at Array.forEach (<anonymous>)
    (...)

Expected behavior

No errors ;)

Suggested solution(s)

I think that providing custom isMergeableObject function in the deepmerge options (here) could solve it

Additional context

React 19 changed $$typeof property value from react.element to react.transitional.element which is not handled by deepmerge library. Related issue: TehShrike/deepmerge#265 (in the comment there is a link to a workaround which could be used in this case I suppose)

Your environment

Software Version(s)
Formik 2.4.6
React 19.1.1
TypeScript N/A
Browser N/A
npm/Yarn N/A
Operating System N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions