-
versions used (SonarQube, Scanner, language analyzer)
SonarQube 8.6 Enterprise Edition
StencilJS 1.0.0 and above -
error observed
False Positive: Remove this unused import of 'h' -
minimal code sample to reproduce (with analysis parameter, and potential instructions to compile).
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-embedded-component'
})
export class MyEmbeddedComponent {
@Prop() color: string = 'blue';
render() {
return (
<div>My favorite color is {this.color}</div>
);
}
}
- Reason
The above code is a handbook-example, standard StencilJS component. Since StencilJS version 1.0.0, components require to importh(for reference, see this breaking change article). SonarQube considers each single StencilJS component smelly for this reason, leading to large numbers of false positives.
The h is a TypeScript factory function that allows you to write JSX syntax which is then compiled to a usual JavaScript function h():
const jsx = <ion-button>;
is the same as:
const jsx = h('ion-button', null, null);
This means that the h method is indeed being used despite not explicitly mentioned again in the code. SonarQube can know that h is a factory function because for JSX to work, it needs to be defined in the tsconfig.json file:
"jsxFactory": "h",
ReactJS uses a very similar approach, however their code does not require developers to explicitly embed the factory method h. So ReactJS developers do not have the problem in SonarQube, StencilJS developers however do.
