rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
14.3k stars 2.19k forks source link

"Maximum call stack size exceeded" when OneOf has many options #3829

Open scooby359 opened 1 year ago

scooby359 commented 1 year ago

Prerequisites

What theme are you using?

core

Version

5.1.0

Current Behavior

I'm passing in a JSF with a large number of "OneOf" options - specifically two fields, one with 178 options, the other field with 260 options.

The form renders and behaves as expected when running the site locally.

When deployed to a production environment, it fails to work as expected. The form is rendered and the dropdowns functional, but validation for the whole form fails to occur. No error is logged to the console, but by logging the "onChange" event, I can see the message "Maximum call stack size exceeded" in multiple locations. As validation does not occur, the submit button does not become enabled.

Input Schema:

{
    "type": "object",
    "properties": {
        "productCode": {
            "title": "Product Code (3 chars)",
            "type": "string",
            "minLength": 3,
            "maxLength": 3
        },
        "country": {
            "title": "Country",
            "type": "string",
            "oneOf": [
                {
                    "const": "2",
                    "title": "Afghanistan"
                },
                {
                    "const": "15",
                    "title": "Åland Islands"
                }
                // .. Cut for conciseness. 260 objects total
            ]
        },
        "currency": {
            "title": "Billing Currency Assignment",
            "type": "string",
            "oneOf": [
                {
                    "const": "-1",
                    "title": "???"
                },
                {
                    "const": "158",
                    "title": "AED"
                }
                // .. Cut for conciseness. 178 objects total
            ]
        }
    },
    "required": [
        "productCode",
        "country",
        "currency"
    ]
}

Output of the change event errors:

errors: [
    {
        "stack": "Maximum call stack size exceeded"
    }
]

Expected Behavior

Expect the form with validation work as expected in a production environment.

Steps To Reproduce

  1. Create a Form component, passing in the above form schema with the stated number of "OneOf" options.
  2. Observe that in a local dev environment, the form works as expected.
  3. Deploy to a production environment and observe that the form fails to validate

Environment

- OS: Windows 11
- Node: 16.7.1
- npm: 8.15.0

Tested on multiple browsers - Edge, Chrome and Firefox, all show the same behaviour.

Anything else?

image

nickgros commented 1 year ago

@scooby359 since the 'Maximum call stack size exceeded' message is in the errors/errorSchema properties, I think that this may actually be thrown by ajv, rather than RJSF. Can you see if you can validate data against your schema using Ajv without RJSF? That this only happens in production will make it extra challenging to figure out :slightly_smiling_face:

shresthadeepesh commented 1 year ago

I am also facing the same issue, I have a dropdown list containing 559 options. Whenever I set the options to be 545 it works fine with the validator. Adding an extra option in the array results in Maximum call stack size exceeded. I tried in the playground of rjsf and when the validate option is enabled it results in the same issue.

yderevianko-cartera commented 1 year ago

I had same issue with default validator and was able to reproduce it in playground as well. What helped me was changing validator version to AJV8_2019 from default AJV8 on playground and than in my project using this advice. https://rjsf-team.github.io/react-jsonschema-form/docs/usage/validation/#ajvclass

To reproduce just create any select field with 500+elements in anyOf

noynek commented 6 months ago

Ran into the same issue recently. Did anyone find a workaround?

Mentioum commented 3 months ago

I can work around it by using enumNames but I feel uncomfortable using that since it doesn't seem to be the recommended approach these days.

nickgros commented 3 months ago

We deprecated enumNames because it's not a standard JSON Schema property, and to my knowledge, I think RJSF is the only tool that uses it. We have an open issue to port the feature to uiSchema (#4215). I think it would be wise to keep enumNames around until #4215 (which is not currently planned) is done. I don't think we are planning on removing enumNames any time soon (i.e. not in RJSF v6).

We're still waiting for a playground reproduction or CodeSandbox so someone can investigate if this is an issue in RJSF or Ajv. If certain workarounds are working for some and not others, it's possible we have multiple different bugs in this issue.