I’m curious if there are any special plugins for VS Code to help to properly “compile” or display the TypeScript React source code for React JSONForms?
JSONForms is working fine, but when I open the editor within VS Code it’s showing many components as an error, such as “‘Hidden’ cannot be used as a JSX component.” The source is selected as a TypeScript React for the editor’s language mode.
Since the JSONForms runs fine, I’m assuming that error message is invalid, and that it has to be an issue with the IDE. Thanks for any help that you can provide.
You’re browsing the source files of our packages within your dependencies, i.e. node_modules/@jsonforms/xxx. I’m not sure whether it’s really expected that VS Code properly provides Intellisense for them there. Maybe it would if we didn’t also publish our tsconfig files which are not meant for this use case. Actually we probably should not publish our source files at all as this just increases the npm install size without much benefit.
I would recommend opening our sources in an own workspace (or multi-root workspace) in VS Code by cloning the JSON Forms repo.
I"m not sure if I’m really understanding what you’re recommending.
If I clone the JSON Forms repo, are you then suggesting that I should make changes to that source to modify the behavior of some of the core components of JSON Forms, instead of putting the new source in my project?
For example, I was needing to modify the behavior of the MaterialArrayControlRenderer so I can adding column filtering (exclusions) on the generated matrix. So instead of creating those components with the added features in my project, are you suggesting that I should just modify the original source? I’m not sure I really like that idea of touching the JSON Forms source, since that would make it a mess when trying to upgrade to a newer version of JSON Forms.
As far as that general error with the use of the Hidden component (and many other components), I’m also seeing that error when I copy the type script code in to my project. It’s like type script is not fully supported within VS Code, which is why I’m wondering if there is some other dependency that JSON Forms uses that was not picked up with the NMS install. Yeah, I know that does not sound “right”, as far as nms works, but I’m at a loss as to why the JSON Forms source won’t even compile within my project. I’m not sure if that makes too much sense as to the problem that I’m having with this.
I’m wondering if it may be a version conflict issue on my end…
Looking at the package.json settings, JSON Forms is using the v3.0.0-alpha.1 release, but the person who setup the project I’m working with, done something odd where it only works with react v17.0.2. With react having a current release of v18.1.0, I’m thinking the issue is related to “my” version of react being out of date with the version of react that JSON Forms v3.0.0-alpha.1 has been designed to use.
As an update… I’ve installed the seed app, and vs code has no problem compiling those source members. So there’s something “wrong” with my project, which it was given to me like that. Figures… lol. I should just build a fresh environment myself and see if that resolves those conflict.
Hi @rbluer, nice that you were able to solve the issues
If I clone the JSON Forms repo, are you then suggesting that I should make changes to that source to modify the behavior of some of the core components of JSON Forms, instead of putting the new source in my project?
For example, I was needing to modify the behavior of the MaterialArrayControlRenderer so I can adding column filtering (exclusions) on the generated matrix. So instead of creating those components with the added features in my project, are you suggesting that I should just modify the original source? I’m not sure I really like that idea of touching the JSON Forms source, since that would make it a mess when trying to upgrade to a newer version of JSON Forms.
To me it looked like you were browsing the JSON Forms source code which is (unnecessarily) bundled with the release by looking at it in your node_modules directory. So I would not be surprised if you get compiler errors/warnings there, as the source code there is not meant to be used like that. So my recommendation was, that if you want to browse the source code, I would just open the actual sources in your editor. Of course that source should not be edited (except if you want to contribute something )
However if it now works for you then that’s also great!
