False positive: using 'class' attribute in JSX without React

Rules and Languages Report False-positive / False-negative...
, ,
1

SonarCloud is raising an issue which I believe to be a false positive. When using the class attribute in JSX but without React, it is flagged as an unknown attribute by Sonar.

Basic info

  • CI: Jenkins
  • Language: TSX
  • Quality profile: Sonar way (built in)

The issue

We use the StencilJS framework. Our code is written as TSX. The React package is installed, but not used in this part of the code.

Stencil uses the normal class attribute, as opposed to className in React. Since a few days, however, our TSX code using class attributes is getting flagged by SonarCloud with the typescript:S6747 rule: Unknown property ‘class’ found, use ‘className’ instead.

In fact, using class here is correct, while using className would be incorrect and give a TypeScript error.

Example code

render() {
	return (
		<div class="my-class">Sonar doesn't like this</div>
	);
}

For now, I can work around this by marking the issues as false positive. It would be great if this problem could be fixed.

If you need any additional info, let me know.

3

Thanks @matsgottenbos for reporting, indeed it’s a FP.

Just created a ticket to better handle cases like this.

5

We’re having the same issue, our Sonarcloud analysis suddenly reported 161 code smell issues after the last PR merge :pensive:.

CleanShot 2023-10-06 at 20.45.14@2x
CleanShot 2023-10-06 at 20.45.14@2x2678×1186 174 KB

CleanShot 2023-10-06 at 20.38.11@2x
CleanShot 2023-10-06 at 20.38.11@2x1920×1135 122 KB

CleanShot 2023-10-06 at 20.40.38@2x
CleanShot 2023-10-06 at 20.40.38@2x1868×652 67.5 KB

6

Thanks @dgonzalezr,

we’ll try to prioritize this ticket for our next hardening. In the meantime, feel free to mark the issues as “won’t fix” or disable the rule in your quality profile.

Cheers,
Victor

7

This looks like a much larger issue than just the stencilJS. using @react-three/fiber and after the updates to Sonar Way quality gate on 2023/10/05 it has flagged a large amount of “invalid” jsx property usage. We have the types installed and they weren’t flagged as issues prior.

9

Thanks Scott,

thanks for the feedback, we’ll have this into account.

In the meantime, there is a workaround you all can use @dgonzalezr @matsgottenbos @Scott_Beck by whitelisting specific JSX attributes in the rule parameters:

Cheers,
Victor

11

How do I go about adding this whitelist to my VSCode extension? It’s driving me nuts with all these highlighted while trying to use Solid JS.

Edit:
This fixed it for me:

  1. Go to “Quick Fix…”:
  2. “Sonar Lint: Deactivate Rule: Typescript:S6747”

PS: The rule is: JSX elements should not use unknown properties and attributes (typescript:S6747). I would love to have more granularity, but this is a good sanity fix for now.