Hi!
After looking for spots in the rendering methods as to why I am getting Max call stack errors (only happens on windows chrome so around 8000-12000) the only thing that fixes it is cutting down on the amount of countries in the multiple choice list. There are around 200 in the multiple choice list.
Any tips on how to solve this issue?
Hi @AudunBeck,
I’m not sure how there can be a max call stack error, no matter how many options there are. Can you provide some more information, i.e. which version of JSON Forms and which renderer set you are using? Ideally you could also post a JSON Schema and UI schema to replicate the issue exactly.
I cannot share much of the code.
The version used is the 3.0.0-beta.5 for both core and react. We are also using a custom render, but based closely on MUI.
I have removed everything but the list mentioned with 206 countries, and the problem still persists.
The schema.json looks like this
{
"required": ["countryCitizenship"],
"type": "object",
"properties": {
"countryCitizenship": {
"type": "array",
"uniqueItems": true,
"items": {
"type": "string",
"oneOf": [
{
"const": "Afghanistan",
"title": "Afghanistan"
},
{
"const": "Albania",
"title": "Albania"
},
{
"const": "Algeria",
"title": "Algeria"
},
{
"const": "Andorra",
"title": "Andorra"
},...
And keeps going for 200+ more countries.
I tried 200+ countries in the JSON Forms React Material seed and it works without errors. Are you sure the problem is not within the custom renderer(s) you are using?
I have gone ahead and removed all custom renderers and the JsonForms component is only outputting this
return (
<div data-testid={dataTestId || 'form'}>
Test
<JsonForms
schema={schema}
uischema={undefined}
renderers={[]}
data={data}
/>
</div>
);
This will run in dev(which it has done before) and tell me its there is no applicable render. But when built it will hit the max call stack (which its always done)
This is the current schema used to test,
{
"required": ["countryCitizenship"],
"type": "object",
"properties": {
"countryCitizenship": {
"type": "array",
"uniqueItems": true,
"items": {
"type": "string",
"oneOf": [
{
"const": "Afghanistan",
"title": "Afghanistan"
},
{
"const": "Albania",
"title": "Albania"
},
{
"const": "Algeria",
"title": "Algeria"
},
{
"const": "Andorra",
"title": "Andorra"
},
{
"const": "Angola",
"title": "Angola"
},
{
"const": "Anguilla",
"title": "Anguilla"
},
{
"const": "Antigua & Barbuda",
"title": "Antigua & Barbuda"
},
{
"const": "Argentina",
"title": "Argentina"
},
{
"const": "Armenia",
"title": "Armenia"
},
{
"const": "Aruba",
"title": "Aruba"
},
{
"const": "Aserbajdsjan",
"title": "Aserbajdsjan"
},
{
"const": "Australia",
"title": "Australia"
},
{
"const": "Bahamas",
"title": "Bahamas"
},
{
"const": "Bahrain",
"title": "Bahrain"
},
{
"const": "Bangladesh",
"title": "Bangladesh"
},
{
"const": "Barbados",
"title": "Barbados"
},
{
"const": "Belgia",
"title": "Belgia"
},
{
"const": "Belize",
"title": "Belize"
},
{
"const": "Benin",
"title": "Benin"
},
{
"const": "Bermuda",
"title": "Bermuda"
},
{
"const": "Bhutan",
"title": "Bhutan"
},
{
"const": "Bolivia",
"title": "Bolivia"
},
{
"const": "Bosnia & Hercegovina",
"title": "Bosnia & Hercegovina"
},
{
"const": "Botswana",
"title": "Botswana"
},
{
"const": "Brasil",
"title": "Brasil"
},
{
"const": "Brunei",
"title": "Brunei"
},
{
"const": "Bulgaria",
"title": "Bulgaria"
},
{
"const": "Burkina Faso",
"title": "Burkina Faso"
},
{
"const": "Burundi",
"title": "Burundi"
},
{
"const": "Cayman Islands",
"title": "Cayman Islands"
},
{
"const": "Chad",
"title": "Chad"
},
{
"const": "Chile",
"title": "Chile"
},
{
"const": "Colombia",
"title": "Colombia"
},
{
"const": "Cook Islands",
"title": "Cook Islands"
},
{
"const": "Costa Rica",
"title": "Costa Rica"
},
{
"const": "Cote D Ivoire",
"title": "Cote D Ivoire"
},
{
"const": "Cruise Ship",
"title": "Cruise Ship"
},
{
"const": "Cuba",
"title": "Cuba"
},
{
"const": "Danmark",
"title": "Danmark"
},
{
"const": "De britiske jomfruøyene",
"title": "De britiske jomfruøyene"
},
{
"const": "De forente arabiske emirater",
"title": "De forente arabiske emirater"
},
{
"const": "Djibouti",
"title": "Djibouti"
},
{
"const": "Dominica",
"title": "Dominica"
},
{
"const": "Dominikanske republikk",
"title": "Dominikanske republikk"
},
{
"const": "Ecuador",
"title": "Ecuador"
},
{
"const": "Egypt",
"title": "Egypt"
},
{
"const": "Ekvatorial-Guinea",
"title": "Ekvatorial-Guinea"
},
{
"const": "El Salvador",
"title": "El Salvador"
},
{
"const": "Estland",
"title": "Estland"
},
{
"const": "Etiopia",
"title": "Etiopia"
},
{
"const": "Falklandsøyene",
"title": "Falklandsøyene"
},
{
"const": "Fiji",
"title": "Fiji"
},
{
"const": "Filippinene",
"title": "Filippinene"
},
{
"const": "Finland",
"title": "Finland"
},
{
"const": "Frankrike",
"title": "Frankrike"
},
{
"const": "Fransk Polynesia",
"title": "Fransk Polynesia"
},
{
"const": "Fransk Vestindia",
"title": "Fransk Vestindia"
},
{
"const": "Færøyene",
"title": "Færøyene"
},
{
"const": "Gabon",
"title": "Gabon"
},
{
"const": "Gambia",
"title": "Gambia"
},
{
"const": "Georgia",
"title": "Georgia"
},
{
"const": "Ghana",
"title": "Ghana"
},
{
"const": "Gibraltar",
"title": "Gibraltar"
},
{
"const": "Grenada",
"title": "Grenada"
},
{
"const": "Grønland",
"title": "Grønland"
},
{
"const": "Guam",
"title": "Guam"
},
{
"const": "Guatemala",
"title": "Guatemala"
},
{
"const": "Guernsey",
"title": "Guernsey"
},
{
"const": "Guinea",
"title": "Guinea"
},
{
"const": "Guinea Bissau",
"title": "Guinea Bissau"
},
{
"const": "Guyana",
"title": "Guyana"
},
{
"const": "Haiti",
"title": "Haiti"
},
{
"const": "Hellas",
"title": "Hellas"
},
{
"const": "Honduras",
"title": "Honduras"
},
{
"const": "Hong Kong",
"title": "Hong Kong"
},
{
"const": "Hviterussland",
"title": "Hviterussland"
},
{
"const": "India",
"title": "India"
},
{
"const": "Indonesia",
"title": "Indonesia"
},
{
"const": "Irak",
"title": "Irak"
},
{
"const": "Iran",
"title": "Iran"
},
{
"const": "Irland",
"title": "Irland"
},
{
"const": "Island",
"title": "Island"
},
{
"const": "Isle of Man",
"title": "Isle of Man"
},
{
"const": "Israel",
"title": "Israel"
},
{
"const": "Italia",
"title": "Italia"
},
{
"const": "Jamaica",
"title": "Jamaica"
},
{
"const": "Japan",
"title": "Japan"
},
{
"const": "Jersey",
"title": "Jersey"
},
{
"const": "Jomfruøyene (USA)",
"title": "Jomfruøyene (USA)"
},
{
"const": "Jordan",
"title": "Jordan"
},
{
"const": "Kambodsja",
"title": "Kambodsja"
},
{
"const": "Kamerun",
"title": "Kamerun"
},
{
"const": "Kapp Verde",
"title": "Kapp Verde"
},
{
"const": "Kasakhstan",
"title": "Kasakhstan"
},
{
"const": "Kenya",
"title": "Kenya"
},
{
"const": "Kina",
"title": "Kina"
},
{
"const": "Kirgisiske republikk",
"title": "Kirgisiske republikk"
},
{
"const": "Kongo",
"title": "Kongo"
},
{
"const": "Kroatia",
"title": "Kroatia"
},
{
"const": "Kuwait",
"title": "Kuwait"
},
{
"const": "Kypros",
"title": "Kypros"
},
{
"const": "Laos",
"title": "Laos"
},
{
"const": "Latvia",
"title": "Latvia"
},
{
"const": "Lesotho",
"title": "Lesotho"
},
{
"const": "Libanon",
"title": "Libanon"
},
{
"const": "Liberia",
"title": "Liberia"
},
{
"const": "Libya",
"title": "Libya"
},
{
"const": "Liechtenstein",
"title": "Liechtenstein"
},
{
"const": "Litauen",
"title": "Litauen"
},
{
"const": "Luxembourg",
"title": "Luxembourg"
},
{
"const": "Macau",
"title": "Macau"
},
{
"const": "Madagaskar",
"title": "Madagaskar"
},
{
"const": "Makedonia",
"title": "Makedonia"
},
{
"const": "Malawi",
"title": "Malawi"
},
{
"const": "Malaysia",
"title": "Malaysia"
},
{
"const": "Maldivene",
"title": "Maldivene"
},
{
"const": "Mali",
"title": "Mali"
},
{
"const": "Malta",
"title": "Malta"
},
{
"const": "Marokko",
"title": "Marokko"
},
{
"const": "Mauritania",
"title": "Mauritania"
},
{
"const": "Mauritius",
"title": "Mauritius"
},
{
"const": "Mexico",
"title": "Mexico"
},
{
"const": "Moldova",
"title": "Moldova"
},
{
"const": "Monaco",
"title": "Monaco"
},
{
"const": "Mongolia",
"title": "Mongolia"
},
{
"const": "Montenegro",
"title": "Montenegro"
},
{
"const": "Montserrat",
"title": "Montserrat"
},
{
"const": "Mozambique",
"title": "Mozambique"
},
{
"const": "Namibia",
"title": "Namibia"
},
{
"const": "Nederland",
"title": "Nederland"
},
{
"const": "Nederlandske Antillene",
"title": "Nederlandske Antillene"
},
{
"const": "Nepal",
"title": "Nepal"
},
{
"const": "New Caledonia",
"title": "New Caledonia"
},
{
"const": "New Zealand",
"title": "New Zealand"
},
{
"const": "Nicaragua",
"title": "Nicaragua"
},
{
"const": "Niger",
"title": "Niger"
},
{
"const": "Nigeria",
"title": "Nigeria"
},
{
"const": "Norge",
"title": "Norge"
},
{
"const": "Oman",
"title": "Oman"
},
{
"const": "Pakistan",
"title": "Pakistan"
},
{
"const": "Palestina",
"title": "Palestina"
},
{
"const": "Panama",
"title": "Panama"
},
{
"const": "Papua Ny-Guinea",
"title": "Papua Ny-Guinea"
},
{
"const": "Paraguay",
"title": "Paraguay"
},
{
"const": "Peru",
"title": "Peru"
},
{
"const": "Polen",
"title": "Polen"
},
{
"const": "Portugal",
"title": "Portugal"
},
{
"const": "Puerto Rico",
"title": "Puerto Rico"
},
{
"const": "Qatar",
"title": "Qatar"
},
{
"const": "Reunion",
"title": "Reunion"
},
{
"const": "Romania",
"title": "Romania"
},
{
"const": "Russland",
"title": "Russland"
},
{
"const": "Rwanda",
"title": "Rwanda"
},
{
"const": "Saint Pierre & Miquelon",
"title": "Saint Pierre & Miquelon"
},
{
"const": "Samoa",
"title": "Samoa"
},
{
"const": "San Marino",
"title": "San Marino"
},
{
"const": "Satellite",
"title": "Satellite"
},
{
"const": "Saudi-Arabia",
"title": "Saudi-Arabia"
},
{
"const": "Senegal",
"title": "Senegal"
},
{
"const": "Serbia",
"title": "Serbia"
},
{
"const": "Seychellene",
"title": "Seychellene"
},
{
"const": "Sierra Leone",
"title": "Sierra Leone"
},
{
"const": "Singapore",
"title": "Singapore"
},
{
"const": "Slovakia",
"title": "Slovakia"
},
{
"const": "Slovenia",
"title": "Slovenia"
},
{
"const": "Spania",
"title": "Spania"
},
{
"const": "Sri Lanka",
"title": "Sri Lanka"
},
{
"const": "St Kitts og Nevis",
"title": "St Kitts og Nevis"
},
{
"const": "St Lucia",
"title": "St Lucia"
},
{
"const": "St Vincent",
"title": "St Vincent"
},
{
"const": "St. Lucia",
"title": "St. Lucia"
},
{
"const": "Storbritannia",
"title": "Storbritannia"
},
{
"const": "Sudan",
"title": "Sudan"
},
{
"const": "Surinam",
"title": "Surinam"
},
{
"const": "Sveits",
"title": "Sveits"
},
{
"const": "Sverige",
"title": "Sverige"
},
{
"const": "Swaziland",
"title": "Swaziland"
},
{
"const": "Syria",
"title": "Syria"
},
{
"const": "Sør-Afrika",
"title": "Sør-Afrika"
},
{
"const": "Sør-Korea",
"title": "Sør-Korea"
},
{
"const": "Tadsjikistan",
"title": "Tadsjikistan"
},
{
"const": "Taiwan",
"title": "Taiwan"
},
{
"const": "Tanzania",
"title": "Tanzania"
},
{
"const": "Thailand",
"title": "Thailand"
},
{
"const": "Timor L'Este",
"title": "Timor L'Este"
},
{
"const": "Togo",
"title": "Togo"
},
{
"const": "Tonga",
"title": "Tonga"
},
{
"const": "Trinidad og Tobago",
"title": "Trinidad og Tobago"
},
{
"const": "Tsjekkia",
"title": "Tsjekkia"
},
{
"const": "Tunisia",
"title": "Tunisia"
},
{
"const": "Turkmenistan",
"title": "Turkmenistan"
},
{
"const": "Turks & Caicos",
"title": "Turks & Caicos"
},
{
"const": "Tyrkia",
"title": "Tyrkia"
},
{
"const": "Tyskland",
"title": "Tyskland"
},
{
"const": "USA",
"title": "USA"
},
{
"const": "Uganda",
"title": "Uganda"
},
{
"const": "Ukraina",
"title": "Ukraina"
},
{
"const": "Ungarn",
"title": "Ungarn"
},
{
"const": "Uruguay",
"title": "Uruguay"
},
{
"const": "Usbekistan",
"title": "Usbekistan"
},
{
"const": "Venezuela",
"title": "Venezuela"
},
{
"const": "Vietnam",
"title": "Vietnam"
},
{
"const": "Yemen",
"title": "Yemen"
},
{
"const": "Zambia",
"title": "Zambia"
},
{
"const": "Zimbabwe",
"title": "Zimbabwe"
},
{
"const": "Østerrike",
"title": "Østerrike"
}
]
}
}
}
}
So something is happening when the schema is being read by JsonForms.
I might have done something wrong in the implementation, but I cannot figure out what that would be.
Appreciate the help a lot!
My last post got spamfiltered for the addition of the 200+ countries in the example i posted.
But following up here
Switching from
oneOf:[ {"const" "varName", "title":"titleName"}]
to
enum:[ "varName1", "varName2"]
Seemed to work in testing, but isnt ideal for our usecase. Does oneOf not work for bigger arrays?
My last post got spamfiltered for the addition of the 200+ countries in the example i posted.
Post is now approved
Switching from
oneOf:[ {"const" "varName", "title":"titleName"}]to
enum:[ "varName1", "varName2"]Seemed to work in testing, but isnt ideal for our usecase. Does oneOf not work for bigger arrays?
This should not be necessary, I don’t see how the difference between these two structures could lead to a max call stack error. My previous screenshot was also based on a oneOf with 200+ entries, so it definitely works for me.
I have gone ahead and removed all custom renderers and the JsonForms component is only outputting this
return ( <div data-testid={dataTestId || 'form'}> Test <JsonForms schema={schema} uischema={undefined} renderers={[]} data={data} /> </div> );This will run in dev(which it has done before) and tell me its there is no applicable render. But when built it will hit the max call stack (which its always done)
Okay, so the issue is only occurring for you when doing a production build? I tried to reproduce that but I’m still not successful.
Note that you need to make sure that all parameters you hand over to JsonForms are either stable or at least memoized. For example handing over a new renderers array with each render will lead to a full rerender of the form. Handing over a new instance of schema will also lead to a rerender and even a new change event.
Did you try with the latest JSON Forms to see whether the issue even exists there? To further help you we need a reproducible example as otherwise it’s just looking around in the dark on my side which is not very efficient.
Hi! I think I have been able to reproduce the error in the example app from the JSONforms docs using this schema file.
Had to link because of character limit.
It seems to come from the validation, as if i switch to “NoValidation” the app runs.
When this was done on the original code it also worked.
So there seems to be something to do with the validation.