I just spun up a new Nextjs app and added the core, examples, react, and vanilla renderer packages and and followed the example here: Create a JSON Forms App - JSON Forms (with vanilla instead of material) and the form renders. I do get a warning that says
Warning: Prop htmlFor did not match. Server: “#/properties/name-input” Client: "#/properties/name2-input.
I am guessing this is something to do with JSONForms not being compatible with server components?? Would this library be a good fit or should I keep looking?
We don’t do anything special in regards to server side rendering so I’m not sure how this breaks for you.
The mismatch of name2-input and name2-input must be caused by our id cache. We determine the input ids via the structure of the JSON Schema. However there can be arbitrary many forms rendered at the same time, so we maintain a global cache of used ids and store and remove them based on the component lifecycle.
If you need to manually control the cache then you can import createId, removeId and clearAllIds from @jsonforms/core.
Hey @kyle / @sdirix, I ran into the same issue. Seems to only be an issue in development mode. Looks like this behaviour conflicts with React StrictMode (which renders twice) and thus the ids on the second pass are different incremented by the default behaviour. Workaround is to toggle strictmode off, but there must be a better way. I can work on a PR for this if you are interested.