Fix FP S1128 (`unused-imports`): Vue.js imports used in templates

[ilia-kebets-sonarsource]

The script attribute lang="ts" is necessary for this FP to occur.

<template>
  <Foo />
</template>

<script setup lang="ts">
import Foo from './Foo' // FP
</script>

Reported in:

• https://community.sonarsource.com/t/remove-this-unused-import-of-xxx-rule-is-not-detecting-them-in-template-vue-js/74330
• https://community.sonarsource.com/t/false-postive-javascript-s1128-with-vue-script-setup-lang-ts/73990
• https://community.sonarsource.com/t/vue3-composition-api-and-script-setup-syntax-reports-unused-imports-since-october-22/74614

[Zorin95670]

Also appear, if we are not on TS script :) Example with no TS script : https://sonarcloud.io/project/issues?resolved=false&sinceLeakPeriod=true&types=CODE_SMELL&id=ditrit_leto-modelizer&open=AYOJrJ45O7ogrcn3JpkB

[ilia-kebets-sonarsource]

Thanks for notifying us @Zorin95670. The current fix does also fix the issue you linked to.

[ferferga]

@ilia-kebets-sonarsource Hello, sorry for necropost, but I've been following this issue since it was created because I'm affected. I've been tracking it until the day of it being closed and since it's not very old, I think it's better than opening a new issue.

The issue it's not solved for me. I've kept waiting and waiting (just to see if Sonar somehow needed to flush its cache or "refresh" itself), but still no luck, even after modifying the affected files directly.

Not sure if it's relevant, but my imports are not default ones, like this: import { Swiper } from 'swiper/vue';

[ilia-kebets-sonarsource]

Hey @ferferga,

Could you provide a more elaborate code example of how you use your component and where is the issue raised?

[ferferga]

@ilia-kebets-sonarsource I can share the full files without issues, since I'm working in a open source project. This code smell is reported 3 times in my repo. I attach the relevant line that SonarCloud highlights and the ID of the detected code smell in the dashboard (obtained from the open query parameter):

• AYdGwQKIUNJ8O0FnkdeL: https://github.com/jellyfin/jellyfin-vue/blob/master/frontend/src/components/Layout/Carousel/Carousel.vue#L53
• AYdGwQLbUNJ8O0FnkdeO: https://github.com/jellyfin/jellyfin-vue/blob/master/frontend/src/components/Layout/SwiperSection.vue#L47
• AYdGwQTPUNJ8O0Fnkde-: https://github.com/jellyfin/jellyfin-vue/blob/master/frontend/src/pages/playback/music/index.vue#L85

Some key things I noticed:

• All 3 of them are Remove this unused import of 'Swiper'. It looks like SwiperSlide is correctly detected as used without issues.
• I wonder if it has to do because I also import Swiper as a type? (But I don't in all of them)
• I have another guess in that the import is from swiper/vue and not swiper, and all the affected files import both from swiper and swiper/vue.
• Local eslint (with eslint-plugin-imports) doesn't detect any of those as unused. It does if I remove those components from the template (as expected), so this issue is solely in Sonar's side.

Don't hesitate in contacting me if you need further details to triage this issue or there's something else I can be helpful with to help with this.

[ilia-kebets-sonarsource]

Can you please report this under the relevant product at https://community.sonarsource.com/ ?