REACT JSX Syntax is being flagged as errors in IDEA
Answered
IntelliJ IDEA 2021.1.2 (Ultimate Edition)
Build #UI-211.7442.40, built on May 31, 2021
I have two almost identical REACT projects open using IDEA. One of the projects flags the REACT JSX syntax as errors:
The other project does not:
Why? What setting needs to be changed on the first project?
Thank you
Please sign in to leave a comment.
In Settings | Languages & Frameworks | JavaScript, make sure to set JavaScript Language version to ECMAScript 6+
I'd also recommend re-opening the project after changing the language version. If it doesn't work immediately, try invalidating caches (File > Invalidate caches, Invalidate and Restart)
If it doesn't help, make sure that there are no nested
.ideafolders in your project structure, it can be https://youtrack.jetbrains.com/issue/WEB-36242Thank you.
JavaScript language version is set to ECMAScript 6+
Confirmed there is only one .idea folder in the project structure.
Invalidate Caches -> "Invalidate and Restart" .... completed this twice.
The IDEA is still flagging some JSX syntax
When Invalidating Caches am I to select anything in the "Optional" section of the "Invalidate Caches" dialog that pops up?
No, you aren't...
What errors can you see namely? Could you share a project/files the issue can be repeated with?
I cannot namely describe the errors. As you can see by the pic I posted there are select HTML nodes that are being flagged, like <Row and <Col and in my routes.js file the entire content of the <Switch> node is flagged red.
Are you asking to share the entire project files?
>I cannot namely describe the errors
Please hover over red-highlighed tags and take screenshots of error tooltips
Remember, as I said, I have another React project open in IDEA that has JSX coding in it and there is no flagging of the JSX syntax in that project at all.
Thank you
Strange tooltip... Haven't seen anything like that.
What is written to the Problems view? What errors can you see there?
strange... Not sure where this error comes from. Please right-click a file and run Inspect Code, then share a screenshot of inspection results panel
When I right-click on any file I do not see a an "Inspect Code" option anywhere
It's Analyze > Inspect Code...
Ah, i see now. This is JavaScript and TypeScript | General | React JSX syntax used inspection (Settings | Editor | Inspections), you must have it enabled for your project
This doesn't make sense to me but...
in Settings | Editor | Inspections I clicked the General node check box which set all subordinate checkboxes on. I then UNCHECKED the "React JSX syntax used" checkbox and clicked "Apply", then "OK" Now all of the red "React JSX syntax is used" errors went away.
Thank you for your time with this issue. Now the code is much easier to read. :>).
Gary