Open
Description
What version of Ajv are you using? Does the issue happen if you use the latest version?
I use Ajv Version 8.17.1 and the issue still happens
Ajv options object
const ajv = new Ajv({ strict: false });JSON Schema
{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"properties": {
"select_string_type": {
"type": "string",
"oneOf": [
{
"const": "test_1",
"title": "test_1"
},
{
"const": "test_2",
"title": "test_2"
},{
"const": "test_3",
"title": "test_3"
},{
"const": "test_4",
"title": "test_4"
},{
"const": "test_5",
"title": "test_5"
},
...
{
"const": "test_294",
"title": "test_294"
},{
"const": "test_295",
"title": "test_295"
},{
"const": "test_296",
"title": "test_296"
},{
"const": "test_297",
"title": "test_297"
},{
"const": "test_298",
"title": "test_298"
},{
"const": "test_299",
"title": "test_299"
},{
"const": "test_300",
"title": "test_300"
}
],
"title": "__(SELECT_STRING)",
"x-jsf-presentation": {
"inputType": "select"
}
},
"select_number_type": {
"type": "number",
"oneOf": [
{
"const": 0,
"title": "one"
},
{
"const": 1,
"title": "two"
}
],
"title": "__(SELECT_NUMBER)",
"x-jsf-presentation": {
"inputType": "select"
}
},
"string_type": {
"type": "string",
"title": "__(STRING)",
"maxLength": 64,
"x-jsf-presentation": {
"inputType": "text"
}
}
},
"allOf": [
{
"if": {
"properties": {
"select_number_type": {
"const": 0
}
}
},
"then": {
"properties": {
"string_type": {
"minLength": 1,
"maxLength": 64
}
},
"required": [
"string_type"
]
},
"else": {
"properties": {
"string_type": {
"x-jsf-presentation": {
"inputType": "hidden"
}
}
}
}
}
],
"required": [
"select_string_type",
"select_number_type"
]
}Sample data
{
"select_string_type": "test_1",
"select_number_type": 0,
"string_type": "string example"
}
Your code
<script setup>
import { ref } from "vue";
import Ajv from "ajv";
import schema from "./../assets/schema/schema.json?raw";
const elements_select_string = ref([
"test_1",
"test_2",
"test_3",
"test_4",
...
"test_297",
"test_298",
"test_299",
"test_300",
]);
const selectStringElement = ref("");
const selectNumberElement = ref(0);
const stringElement = ref("string example");
async function createJSON() {
let config = {
jsonFile: {
version: "0.1.0",
form: {
select_string_type: selectStringElement.value,
select_number_type: selectNumberElement.value,
string_type: stringElement.value,
},
},
};
await validateJSON(config);
}
async function validateJSON(config) {
const ajv = new Ajv({ strict: false });
try {
const validate = ajv.compile(JSON.parse(schema));
const valid = validate(config.jsonFile.form);
if (valid) {
console.log("JSON valid");
} else {
console.log("JSON invalid", validate.errors);
}
} catch (error) {
console.error("Error:", error);
}
}
</script>
<template>
<div>
<h1>Example</h1>
<form>
<label for="select_string_type">Choose Select String Type:</label>
<select v-model="selectStringElement" id="select_string_type">
<option
v-for="select in elements_select_string"
:key="select"
:value="select"
>
{{ select }}
</option>
</select>
<br />
<label for="select_number_type">Choose Select Number Type:</label>
<select v-model="selectNumberElement" id="select_number_type">
<option value="0">one</option>
<option value="1">two</option>
</select>
<br />
<label for="string_type">String Type: </label>
<input
v-model="stringElement"
id="string_type"
name="string_type"
type="text"
/>
<br />
<input
type="button"
name="submit_form"
id="submit_form"
value="Submit Form"
@click="createJSON"
/>
</form>
</div>
</template>Validation result, data AFTER validation, error messages
Error: InternalError: function nested too deeply
validateJSON HelloWorld.vue:333
createJSON HelloWorld.vue:325
callWithErrorHandling runtime-core.esm-bundler.js:199
callWithAsyncErrorHandling runtime-core.esm-bundler.js:206
invoker runtime-dom.esm-bundler.js:729
addEventListener runtime-dom.esm-bundler.js:680
patchEvent runtime-dom.esm-bundler.js:698
patchProp runtime-dom.esm-bundler.js:775
mountElement runtime-core.esm-bundler.js:4873
processElement runtime-core.esm-bundler.js:4820
patch runtime-core.esm-bundler.js:4688
mountChildren runtime-core.esm-bundler.js:4932
mountElement runtime-core.esm-bundler.js:4855
processElement runtime-core.esm-bundler.js:4820
patch runtime-core.esm-bundler.js:4688
mountChildren runtime-core.esm-bundler.js:4932
mountElement runtime-core.esm-bundler.js:4855
processElement runtime-core.esm-bundler.js:4820
patch runtime-core.esm-bundler.js:4688
componentUpdateFn runtime-core.esm-bundler.js:5326
run reactivity.esm-bundler.js:225
setupRenderEffect runtime-core.esm-bundler.js:5454
mountComponent runtime-core.esm-bundler.js:5229
processComponent runtime-core.esm-bundler.js:5182
patch runtime-core.esm-bundler.js:4700
componentUpdateFn runtime-core.esm-bundler.js:5326
run reactivity.esm-bundler.js:225
setupRenderEffect runtime-core.esm-bundler.js:5454
mountComponent runtime-core.esm-bundler.js:5229
processComponent runtime-core.esm-bundler.js:5182
patch runtime-core.esm-bundler.js:4700
render2 runtime-core.esm-bundler.js:5979
mount runtime-core.esm-bundler.js:3941
mount runtime-dom.esm-bundler.js:1767
<anonymous> main.js:11
HelloWorld.vue:341:12
What results did you expect?
When using Chrome, the validation works without any problems. When using Firefox, this issue occurs without any changes made. I tried different approaches with the parameters, but nothing seems to work. As soon as there are more than 250 options, this error occurs.
This issue is happening when using AJV in a Vue.js project with Composition API.
I've added the Vue project below. You can unpack it and run npm run dev in the folder where the entire project is located.