Duplication of imports (PartiallyEnd: #3632/scriptSetup.vue)

[francoism90]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.1

Vue version

3.5.13

TypeScript version

5.7.2

System Info

This is a dev container and running on Flatpak.

package.json dependencies

{
  "name": "laravel-vite",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "run-p type-check \"build-only {@}\" --",
    "dev": "vite",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
    "lint:eslint": "eslint . --fix",
    "lint": "run-s lint:*",
    "format": "prettier --write resources/"
  },
  "dependencies": {
    "@heroicons/vue": "^2.2.0",
    "@inertiajs/vue3": "^2.0.0",
    "axios": "^1.7.9",
    "laravel-echo": "^1.17.1",
    "laravel-precognition-vue-inertia": "^0.5.14",
    "pinia": "^2.3.0",
    "vite-plugin-pwa": "^0.21.1",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.9",
    "@tailwindcss/typography": "^0.5.15",
    "@tsconfig/node22": "^22.0.0",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.10.5",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "@vitest/eslint-plugin": "1.1.24",
    "@vue/eslint-config-prettier": "^10.1.0",
    "@vue/eslint-config-typescript": "^14.2.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.7.0",
    "autoprefixer": "^10.4.20",
    "chokidar": "^4.0.3",
    "concurrently": "^9.1.2",
    "cssnano": "^7.0.6",
    "daisyui": "^4.12.23",
    "eslint": "^9.17.0",
    "eslint-plugin-oxlint": "^0.15.5",
    "eslint-plugin-vue": "^9.32.0",
    "jsdom": "^25.0.1",
    "laravel-vite-plugin": "^1.1.1",
    "npm-run-all2": "^7.0.2",
    "oxlint": "^0.15.5",
    "postcss": "^8.4.49",
    "postcss-import": "^16.1.0",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "pusher-js": "^8.4.0-rc2",
    "stylelint": "^16.12.0",
    "stylelint-config-standard-scss": "^14.0.0",
    "tailwindcss": "^3.4.17",
    "typescript": "~5.7.2",
    "vite": "^6.0.7",
    "vite-plugin-vue-devtools": "^7.6.8",
    "vitest": "^2.1.8",
    "vue-tsc": "^2.2.0"
  }
}

Steps to reproduce

1. Open .vue file
2. Save file
3. Duplicates import

What is expected?

Do not duplicate import

What is actually happening?

<script setup lang="ts">
import NavBar from '@/components/Navigation/NavBar.vue' /* PartiallyEnd: #3632/scriptSetup.vue */
import NavDrawer from '@/components/Navigation/NavDrawer.vue'
import NavBar from '@/components/Navigation/NavBar.vue'
</script>

Link to minimal reproduction

No response

Any additional comments?

No response

[francoism90]

Downgrading the VueJS extensions to 2.1.10 fixes the issue.

Upgrading to the latest version, causes this issue.

[KazariEX]

I'm not sure if I understand what you mean, could you provide a gif or video that reproduces the steps?

[francoism90]

@KazariEX Thanks for your reply.

I do not have a screenrecoder app, but this happens:

1. Open VueJS file, like AppLayout.vue:

<script setup lang="ts">
import NavDrawer from '@/components/Navigation/NavDrawer.vue'
import NavBar from '@/components/Navigation/NavBar.vue'
</script>

<template>
  <div class="drawer">
    <NavBar />
    <NavDrawer />
  </div>
</template>

2. Hit Save (ctrl+s)

3. Final result:

<script setup lang="ts">
import NavBar from '@/components/Navigation/NavBar.vue' /* PartiallyEnd: #3632/scriptSetup.vue */
import NavDrawer from '@/components/Navigation/NavDrawer.vue'
import NavBar from '@/components/Navigation/NavBar.vue'
</script>

<template>
  <div class="drawer">
    <NavBar />
    <NavDrawer />
  </div>
</template>

It seems to import the same component on it's own, in the previous version (2.1.10) it doesn't do this.

[ukiyo-epoch]

I'm working with vscode, also met this problem when use extension v2.2.0, but need to downgrade it to v2.1.6 to fix the issue.
my code:

import type { DescData } from '@arco-design/web-vue/es/descriptions/interface'

hit save(ctrl + s) and then it becomes:

import type { DescData } from '@arco-design/web-vue/es/descriptions/interface'    /* PartiallyEnd: #3632/both.vue */
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface'

[bmulholland]

This happens when using prettier-plugin-organize-imports, without vscode, as well. See simonhaenisch/prettier-plugin-organize-imports#139

@KazariEX what more info do you need? Happy to help out. Downgrading vue-tsc alone fixes the issue.

[bmulholland]

Here's an example: the prettier command changes the file as shown. vue-tsc is run via prettier-plugin-organize-imports.

[francoism90]

This is also how you can trigger this:

<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue'
import { Head } from '@inertiajs/vue3' /* PartiallyEnd: #3632/scriptSetup.vue */
import { Head } from '@inertiajs/vue3'
</script>

<template>
  <Head title="Home" />

  <AppLayout>
    <div class="container">foo</div>
  </AppLayout>
</template>

However, adding something after the imports 'fixes' the issue:

<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue'
import { Head } from '@inertiajs/vue3'

const foo = 'bar';
</script>

<template>
  <Head title="Home" />

  <AppLayout>
    <div class="container">foo</div>
  </AppLayout>
</template>

It seems to expects something after the imports?

[xiebiao360]

It seems that the same problem occurs not only in the TS project, but also when I use JS

<script setup>
import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue';
import VerticalNavGroup from '@layouts/components/VerticalNavGroup.vue';
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'; /* PartiallyEnd: #3632/scriptSetup.vue */
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue' 
</script>

<template>
  <!-- 👉 Dashboards -->
  <VerticalNavGroup
    :item="{
      title: 'Dashboards',
      badgeContent: '5',
      badgeClass: 'bg-error',
      icon: 'ri-home-smile-line',
    }"
  >
    <VerticalNavLink
      :item="{
        title: 'Analytics',
        to: '/dashboard',
      }"
    />
  </VerticalNavGroup>
</template>

[xiebiao360]

Removing or modifying 'source.organizeImports' to 'never' can be corrected

// Extension: ESLint
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit",
  "source.fixAll.stylelint": "explicit",
  "source.organizeImports": "explicit"  // remove it or modify it to "never"
},

[Uninen]

Bumped into this today. This helped:

  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "never",
      "source.sortImports": "never",
    }
  },