"function nested too deeply" error when enum has many options

General
1

Hello! We have an enum with 266 options.

WIth the upgrade to JSONForm 3 from 2.5, we’re seeing the following stack trace:

    Uncaught InternalError: function nested too deeply
    validate core.ts:55
    coreReducer core.ts:167
    <anonymous> JsonFormsContext.tsx:126
    JsonFormsStateProvider JsonFormsContext.tsx:123
    unstable_runWithPriority scheduler.development.js:468

I was able to reproduce in the material renderers example set with 300 options, using the following schemas (I removed the options for length!):

const schema = {
  "properties": {
    "too_many_options": {
      "oneOf": [
{const: "test1", title: "test1"},
{const: "test2", title: "test2"},
...
{const: "test296", title: "test296"},
{const: "test297", title: "test297"},
{const: "test298", title: "test298"},
{const: "test299", title: "test299"},
{const: "test300", title: "test300"},
      ]
    }
  }
};

const uischema = {
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "label": "More options than any sane person could want",
      "scope": "#/properties/too_many_options"
    }
  ]
};

This is a pretty simple set of schemas but please let me know if there’s something I can change to make this work!

2

So one way to get rid of this error is to set validationMode='NoValidation'. But we do need validation for fields other than this very large drop-down.

I’m reading up on ajv now trying to see if there’s something I can tweak in that configuration.

3

Hi @sarahtrefethen,

This is interesting, so it seems like this an AJV issue? Can you reproduce the problem simply by using AJV? You can create an AJV instance as used within JSON Forms by calling createAjv() which we offer in @jsonforms/core.

4

Hi Stefan!

We are already using a custom AJV instance, and I would love to find a setting that would address this. AJV does offer an option to change validation of enums to a loop (Ajv options | Ajv JSON schema validator) but this is a oneOf.

It’s worth noting that this problem happens with the examples in the JSONforms repository at the 300 option mark in Firefox and Chromium. It needs to go up much higher in Chrome (I now have an example with 1000 options, which breaks.) Our app crashes much earlier in chrome, I imagine because of other processes using up resources.

5

Hi @sarahtrefethen,

If you use the oneOf of title,const pairs simply to have proper labels for enums in the UI then you have an alternative approach available: Use regular enums (which allows you to use the AJV loop option) and then deliver proper labels for the enums via our i18n support.

Note that his requires the i18n function to be very performant as we currently call it on every data change. If not then I would recommend to memoize its internal lookups for your form instance.

Another alternative is to just use a custom renderer and model the enums outside of JSON Schema, skipping AJV completely. This is usually the approach for large enums which are often not even known beforehand and are just fetched dynamically from an API.

1 Like
6

Hi @sdirix!

Thank you so much for your response. I think you’ve given me the answer but I could use a little more guidance on implementing it.

We are, in fact, populating these dropdown from an API call, so I would like to make a custom renderer. Is there any way to do this without changing the format of our schemas? I tried replacing the OneOf control, but the values I’m passing into the component from outside the schema are failing validation against the placeholder values we have in our schema.

I can see how I could do a custom tester with a key word in the scope, but modifying the schemas we have in use is going to be difficult.

Thank you so much for your help!

7

Hi @sarahtrefethen,

The schema needs to fit to the data as otherwise you will have validation errors. If you’re unable to adapt the schemas on the backend (or wherever they are coming from) you could still preprocess them before handing them over to JSON Forms and replace the oneOf with a simple string property.

1 Like
8

Hi there,

We are consistently seeing the error with ajv on firefox (works on all other browsers) if we have an enum with too many values using the oneOf enum approach. We do so to add the i18n key.

An easy fix (as also stated above) is to use the simply enum with enum: [“A”, “B”…]. But then the i18n keys won’t be consistent which is a problem when it is a central definition.

Our specific scenario is that we have a country selector.

I was trying this approach but I am not sure if I have a way out?

"definitions": {
    "myEnum": {
      "i18n": "myKey",
      "enum": [
        "A", "B"....
       ]
   }
 ...
}

Any pointers?

9

For our situation, we used Stefan’s suggestion to bypass AJV for this specific component. Good luck!

10

I fixed this using a custom renderer in vue posted below. We have backend driven schemas and ui schemas, so it was best for us to keep everything, including the ‘title’ on the backend. I’m sure this isn’t the optimal solution, especially if you need to run translations, but this worked for us.

<template>
    <div class="flex gap-1">
        <label :for="control.id" class="block text-sm font-medium text-gray-700">
            {{ control.label }}
        </label>
        <p v-if="control.required" class="text-sm text-red-500">*</p>
    </div>
    <select
        class="block w-full py-1 px-1 border-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm"
        :value="control.data"
        @change="
            (e) => {
                select((e.target as HTMLSelectElement).value);
            }
        "
    >
        <option v-for="checkElement in control.schema.enum" :key="checkElement" :value="checkElement">
            {{ control.uischema.options?.values?.[checkElement] ?? checkElement }}
        </option>
    </select>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { type RendererProps, rendererProps, useJsonFormsOneOfControl } from '@jsonforms/vue';
import { and, type ControlElement, hasOption, type JsonFormsRendererRegistryEntry, optionIs, rankWith, uiTypeIs } from '@jsonforms/core';
import { useVanillaArrayControl } from '@jsonforms/vue-vanilla';

const controlRenderer = defineComponent({
    name: 'EnumWithValueMapRenderer',
    props: {
        ...rendererProps<ControlElement>(),
    },
    setup(props: RendererProps<ControlElement>) {
        const control = useJsonFormsOneOfControl(props);

        return useVanillaArrayControl(control);
    },
    methods: {
        select(value: string): void {
            this.handleChange(this.control.path, value);
        },
    },
});

export default controlRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
    renderer: controlRenderer,
    tester: rankWith(5, and(uiTypeIs('Control'), optionIs('render', 'enumWithValueMap'), hasOption('values'))),
};
</script>

then your schema can have:

"properties": {
  "field-1": {
         "title": "Gimme some data",
        "type": "string",
        "enum": [
          "foo",
          "bar"
        ]
  }
}

and corresponding ui schema:

elements: [
  {
            "type": "Control",
            "scope": "#/properties/field-1",
            "options": {
              "render": "enumWithValueMap",  // important to make sure the ui picks it up
              "values": {. // UI looks here to find the titles based on the value in the schema
                "foo": "Foo title",
                "bar": "Bar title",
              }
  }
]
1 Like