# False positive smells about unused imports when there are 2 script tags in Vue3

**URL:** <https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784>\
**Category:** Report False-positive / False-negative...\
**Tags:** sonarqube-cloud\
**Created:** [September 6, 2023, 4:08pm UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784 "2023-09-06T16:08:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![fsuchan](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/fsuchan/32/45762_2.png) [@fsuchan](https://community.sonarsource.com/u/fsuchan)\
**Post date:** [September 6, 2023, 4:08pm UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/1 "2023-09-06T16:08:05Z")

</div>

When using 2 script tags in Vue3, there are false positive code smells:

`Remove unused import ...` although they are used. Usecases why 2 script tags are sometimes necessary are described [here](https://vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script).

---

<div class="post-metadata">

**Author:** ![Colin](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/colin/32/55255_2.png) [@Colin](https://community.sonarsource.com/u/Colin)\
**Post date:** [September 7, 2023, 4:40pm UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/2 "2023-09-07T16:40:00Z")

</div>

Hey there.

Can you include a more complete reproducer? A section of code that raises the issue specifically.

---

<div class="post-metadata">

**Author:** ![fsuchan](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/fsuchan/32/45762_2.png) [@fsuchan](https://community.sonarsource.com/u/fsuchan)\
**Post date:** [September 8, 2023, 9:29am UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/3 "2023-09-08T09:29:10Z")

</div>

@Colin sure thing, here you go:

```auto
<script lang="ts">
import { computed } from 'vue'
import {
  XCircleIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
  InformationCircleIcon,
} from '@heroicons/vue/20/solid'

type MessageType = 'error' | 'warning' | 'success' | 'info'

export type Props = {
  id: string
  type: MessageType
  title: string
}
</script>

<script setup lang="ts">
const props = defineProps<Props>()

defineSlots<{
  default: any
}>()

const classes = computed(() => {
  const c = {
    wrapper: '',
    title: '',
    body: '',
  }

  switch (props.type) {
    case 'error':
      c.wrapper = 'bg-red-50'
      c.title = 'text-red-800'
      c.body = 'text-red-700'
      break
    case 'warning':
      c.wrapper = 'bg-yellow-50'
      c.title = 'text-yellow-800'
      c.body = 'text-yellow-700'
      break
    case 'success':
      c.wrapper = 'bg-green-50'
      c.title = 'text-green-800'
      c.body = 'text-green-700'
      break
    case 'info':
      c.wrapper = 'bg-blue-50'
      c.title = 'text-blue-800'
      c.body = 'text-blue-700'
      break
  }
  return c
})
</script>

<template>
  <div :id="id" class="rounded-md p-4" :class="classes.wrapper">
    <div class="flex">
      <div class="flex-shrink-0">
        <XCircleIcon
          v-if="type === 'error'"
          class="h-5 w-5 text-red-400"
          aria-hidden="true"
        />
        <ExclamationTriangleIcon
          v-if="type === 'warning'"
          class="h-5 w-5 text-yellow-400"
          aria-hidden="true"
        />
        <CheckCircleIcon
          v-if="type === 'success'"
          class="h-5 w-5 text-green-400"
          aria-hidden="true"
        />
        <InformationCircleIcon
          v-if="type === 'info'"
          class="h-5 w-5 text-blue-400"
          aria-hidden="true"
        />
      </div>

      <div class="ml-3">
        <h3 class="text-sm font-medium" :class="classes.title">{{ title }}</h3>
        <div class="mt-2 text-sm" :class="classes.body">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![fsuchan](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/fsuchan/32/45762_2.png) [@fsuchan](https://community.sonarsource.com/u/fsuchan)\
**Post date:** [September 12, 2023, 11:52am UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/5 "2023-09-12T11:52:54Z")

</div>

Hi @Colin,

did the above snippet help or do you need further info?

---

<div class="post-metadata">

**Author:** ![Colin](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/colin/32/55255_2.png) [@Colin](https://community.sonarsource.com/u/Colin)\
**Post date:** [September 13, 2023, 1:14am UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/6 "2023-09-13T01:14:16Z")

</div>

Hey there.

Somebody will be here to take a look at this thread soon. In the meantime, thanks for your patience! Don’t forget you can always mark issues as **False-Positive** in the SonarCloud UI if, for example, they’re failing your Quality Gate.

---

<div class="post-metadata">

**Author:** ![alexander.kamushkin](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/alexander.kamushkin/32/45808_2.png) [@alexander.kamushkin](https://community.sonarsource.com/u/alexander.kamushkin)\
**Post date:** [September 19, 2023, 1:47pm UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/8 "2023-09-19T13:47:36Z")

</div>

Hi Florian,

Thank you very much for the code snippet - it does indeed raise S1128 (unused-import) issues on the component imports. However, I think you are using Vue3 in an undocumented way that probably should be avoided.

Vue3 documentation describes exposed component imports in `<script setup>` only - [\<script setup\> | Vue.js](https://vuejs.org/api/sfc-script-setup.html#using-components) . This is the configuration our rule supports, so if you move your imports to `<script setup>` they will be correctly processed by the rule (no S1128 issues).

Moreover, the Vue3 [documentation](https://vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script) specifically warns about using `<script>` and `<script setup>` at the same time:

> Support for combining `<script setup>` and `<script>` in the same component is limited to the scenarios described above. Specifically:
> 
> - Do **NOT** use a separate `<script>` section for options that can already be defined using `<script setup>`, such as `props` and `emits`.
> - Variables created inside `<script setup>` are not added as properties to the component instance, making them inaccessible from the Options API. Mixing APIs in this way is strongly discouraged.

The docs do not specifically mention your use case (exposing component imports from `<script>` ) but in my view, it should be avoided as well because this works in `<script>` only if `<script setup>` is also present (i.e. it is kind of a side-effect and not the feature that you should rely on).

So the right solution in this particular case IMHO would be to move the component imports into the `<script setup>` section.

---

<div class="post-metadata">

**Author:** ![azamat-sharapov](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/azamat-sharapov/32/45155_2.png) [@azamat-sharapov](https://community.sonarsource.com/u/azamat-sharapov)\
**Post date:** [September 25, 2023, 9:49am UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/9 "2023-09-25T09:49:56Z")

</div>

Hi Alexander,

I work with Florian. Thank you for detailed response, you are absolutely right and I did as you suggested.

We are using separate script tag for the `export` and putting import also in there felt more appropriate, since we always have script tags on top of file (coming from “module imports should be on top” best practise). However in this case, moving imports to the `<script setup>` seems like correct way, as Vue compiler manages to take them out of `setup()` automatically.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/sonarsource/user_avatar/community.sonarsource.com/system/32/31083_2.png) [@system](https://community.sonarsource.com/u/system)\
**Post date:** [October 2, 2023, 9:50am UTC](https://community.sonarsource.com/t/false-positive-smells-about-unused-imports-when-there-are-2-script-tags-in-vue3/98784/10 "2023-10-02T09:50:10Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.