# Vue max call stack error

**URL:** <https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625>\
**Category:** General\
**Created:** [February 25, 2025, 12:17pm UTC](https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625 "2025-02-25T12:17:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vonnegut](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vonnegut/32/1242_2.png) [@vonnegut](https://jsonforms.discourse.group/u/vonnegut)\
**Post date:** [February 25, 2025, 12:17pm UTC](https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625/1 "2025-02-25T12:17:41Z")

</div>

Hi,

I am trying to add JSON forms to my Vue project. In trying to render the following schema, I get a maximum call stack error

```auto
{
            "$schema": "https://json-schema.org/draft/2020-12/schema",
            "$id": "https://github.com/estaid-app/integration-pipeline/stages/logger/configuration",
            "$ref": "#/$defs/Configuration",
            "$defs": {
              "Configuration": {
                "properties": {
                  "keys": {
                    "items": {
                      "type": "string"
                    },
                    "type": "array"
                  }
                },
                "additionalProperties": false,
                "type": "object"
              }
            }
          }

```

SAme thing happens when try it here: [https://jsonforms-editor.netlify.app/](https://jsonforms-editor.netlify.app/).

However, I believe that my form is valid syntax. What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [February 25, 2025, 12:57pm UTC](https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625/2 "2025-02-25T12:57:20Z")

</div>

Hi @vonnegut,

It seems we have a bug in our resolving code which errors when the root of the handed over schema contains `$ref` itself.

If you change the schema to the following, it works:

```json
{
  "$id": "https://github.com/estaid-app/integration-pipeline/stages/logger/configuration",
  "$defs": {
    "Configuration": {
      "properties": {
        "keys": {
          "items": {
            "type": "string"
          },
          "type": "array"
        }
      },
      "additionalProperties": false,
      "type": "object"
    }
  },
  "properties": {
    "Configuration": {
      "$ref": "#/$defs/Configuration"
    }
  }
}

```

Please open an issue in the repository for this. Feel free to contribute a fix too if you want to 😉

* * *

Note that AJV which we use for validation does not support the `2020-12` schema out of the box, so specifically referring to it will produce an error.

---

<div class="post-metadata">

**Author:** ![vonnegut](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vonnegut/32/1242_2.png) [@vonnegut](https://jsonforms.discourse.group/u/vonnegut)\
**Post date:** [February 25, 2025, 3:10pm UTC](https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625/3 "2025-02-25T15:10:25Z")

</div>

Thanks for the answer. That makes sense.

Does the missing support for 2020-12 also explain why [https://jsonforms-editor.netlify.app/](https://jsonforms-editor.netlify.app/) following does not display the following?

````auto
{
              "$id": "https://github.com/estaid-app/integration-pipeline/stages/persist_account/configuration",
              "$defs": {
                "Configuration": {
                  "properties": {
                    "keyMapping": {
                      "$ref": "#/$defs/KeyMapping"
                    }
                  },
                  "additionalProperties": false,
                  "type": "object",
                  "required": [
                    "keyMapping"
                  ]
                },
                "KeyMapping": {
                  "properties": {
                    "name": {
                      "type": "string"
                    },
                    "number": {
                      "type": "string"
                    },
                    "type": {
                      "type": "string"
                    }
                  },
                  "additionalProperties": false,
                  "type": "object",
                  "required": [
                    "name",
                    "number",
                    "type"
                  ]
                }
              }
            }```
````

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [February 25, 2025, 3:36pm UTC](https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625/4 "2025-02-25T15:36:44Z")

</div>

@vonnegut, the schema is not complete as it does not define a root element.

Using the following schema:

```json
{
  "$id": "https://github.com/estaid-app/integration-pipeline/stages/persist_account/configuration",
  "$defs": {
    "Configuration": {
      "properties": {
        "keyMapping": {
          "$ref": "#/$defs/KeyMapping"
        }
      },
      "additionalProperties": false,
      "type": "object",
      "required": [
        "keyMapping"
      ]
    },
    "KeyMapping": {
      "properties": {
        "name": {
          "type": "string"
        },
        "number": {
          "type": "string"
        },
        "type": {
          "type": "string"
        }
      },
      "additionalProperties": false,
      "type": "object",
      "required": [
        "name",
        "number",
        "type"
      ]
    }
  },
  "properties": {
    "Configuration": {
      "$ref": "#/$defs/Configuration"
    }
  }
}

```

works fine in the JSON Forms Editor.

* * *

Note that the JSON Forms Editor is a proof of concept, is no longer maintained and is based on an older version of JSON Forms from 4 years ago.

---

<div class="post-metadata">

**Author:** ![vonnegut](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vonnegut/32/1242_2.png) [@vonnegut](https://jsonforms.discourse.group/u/vonnegut)\
**Post date:** [February 25, 2025, 4:03pm UTC](https://jsonforms.discourse.group/t/vue-max-call-stack-error/2625/5 "2025-02-25T16:03:41Z")

</div>

> [@sdirix](#):
>
> from

@sdirix much appreciated. I will open an issue for the first issue and look in to why the forms I generate seem to be missing the said root element.