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

[scooby359]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

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?

[nickgros]

@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 🙂

[shresthadeepesh]

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]

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]

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

[Mentioum]

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]

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.

[daviemakz]

Hey, can I bump this issue. It appears to be thrown in my case from the get names() method function in the class. As the others have said, reducing the options stops the call stack error from being called

[Mr-Goldberg]

Ran into the same issue today. Weirdly, I can't reproduce it in the playground.

"oneOf": [
        {
          "const": "PoJXw3VyosbscDA",
          "title": "123789"
        },
... 700+ items

[Mr-Goldberg]

@nickgros Could you please help using ui:enumNames as a workaround?
I have multiple enums in the schema, but the documentation only has an example for a single enum. It is unclear how to link values and names:

const schema: RJSFSchema = {
  type: 'number',
  enum: [1, 2, 3],
};
const uiSchema: UiSchema = {
  'ui:enumNames': ['one', 'two', 'three'],
};

[jaggaer-mplanic]

Hi everyone, we have the same issue getting this "Maximum call stack size exceeded" error after changing enum/enumNames to oneOf.
What is interesting, it happens only on Windows OS in Chrome and Firefox, while Linux and iOS does not have this issue. Same app, same configuration, same browsers, everything...
The error shows up in console when form submit is triggered programmatically. formRef.current.onSubmit()
I will try to reproduce it on the playground.
We are using React 19, @rjsf/validator-ajv8

[nickgros]

@Mr-Goldberg You can follow the uiSchema convention by putting ui:enumNames in a key that matches the property.

Playground example

[Mr-Goldberg]

@nickgros Thank you! Somehow, I didn't realize that usage pattern 😅