typescript - VSCode, derleme sırasında .vue importu için TS hatası 'modül bulunamıyor' gösteriyor

Kısaca, vscode bir modülde bu hatayı gösteriyor:

Modül '@/components/SidebarToggleIcon' bulunamıyor

Ancak derleme sırasında böyle bir hata görünmez.

Bu bir VueJS projesidir ve SidebarToggleIcon bir .vue dosyasıdır; TypeScript, <script lang="ts"> bölümünde yer almaktadır. Bu hata daha önce VSCode'da ve derleme sırasında görünüyordu, ta ki @vue/eslint-config-typescript paketini ekleyene kadar. Şimdi ise sadece VSCode'da görünmektedir.

Sidebar.vue

<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';

@Component
export default class LayoutSidebar extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }
}

</script>

SidebarToggleIcon.vue

<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';

const preferenceModule: PreferencesStore = getModule(PreferencesStore);

@Component
export default class SidebarToggleIcon extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }

    toggle(){
        preferenceModule.ToggleSidebar();
    }
}
</script>

Bu neden oluyor? Bunu nasıl çözebilirim?

Düzenleme: Bu @ alias ile ilgili bir sorun değil, bunlar doğru şekilde çözülüyor (ekran görüntüsünde hatanın üstündeki satır bunu kullanıyor ve projede başka yerlerde de kullanıyorum), bu hata göreli yollar kullanıldığında da ortaya çıkıyor. TSConfig dosyamda uygun "paths": { "@/*": ["src/*"] } öğesi var. Eğer sorun bu olsaydı derleme sırasında da bu hatayı alırdım, ama almıyorum, bu yalnızca VSCode’da görülüyor.

Cevap #1

Benim için, PhpStorm'da bir Vite & Vue 3 projesi için src dizininde bir shims dosyası oluşturmak yeterliydi. Bileşenlerimin çoğu sadece script setup kullanıyor.

src/shims-vue.d.ts

declare module '*.vue';

Cevap #2

TypeScript Vue Plugin (Volar) VS Code uzantısını yükledim ve sorun çözüldü.

Bu VS Code yerleşik uzantısını devre dışı bırakmayı unutmayın: TypeScript ve JavaScript Dil Özellikleri. Buradan daha fazla okuyabilirsiniz.

  1. Proje çalışma alanınızda, komut paletini Ctrl+Shift+P ile açın (macOS için: ⌘+Shift+P).
  2. Type built yazın ve "Extensions: Show Built-in Extensions" seçeneğini seçin. Uzantı arama kutusuna typescript yazın (@builtin önekini kaldırmayın).

  1. “TypeScript ve JavaScript Dil Özellikleri”nin küçük dişli simgesine tıklayın ve “Devre Dışı Bırak (Çalışma Alanı)” seçeneğini seçin.
  2. Çalışma alanını yeniden yükleyin. Bir Vue veya TS dosyası açtığınızda Devralma modu etkinleştirilecektir.
  3. (Opsiyonel) Eğer webpack veya vite (veya başka bir modül paketleyici) için özel yol takma adı belirlediyseniz, TypeScript desteği için yol takmasını eklemeyi unutmayın
tsconfig.json
{
  "compilerOptions": {
    /* other configs */
    "paths": {
      "@/*": [
        "./src/*" // set path `@/*` as alias of `src/*`
      ]
    },
    /* other configs */
  }
}

Cevap #3

Bunun nedeni, TypeScript'in webpack takma adlarını otomatik olarak çözmemesidir.

TS'nin takma adları çözmesi için, bunlar tsconfig.json içinde compilerOptions.paths altında eklenmelidir:

{  
  "compilerOptions": {
   "paths": {
     "@/*": [
      "./*"
     ]
    }
  }
}

Bu değişikliklerden sonra IDE'nizi yeniden yükleyin

Cevap #4

Sidebar.vue dosyasında, import bildirimine ".vue" uzantısını eklemeyi deneyin, şöyle bir şey:

import SidebarToggleIcon from '@/components/SidebarToggleIcon.vue';

Cevap #5

Benim bilgisayarımda, VS Code uzantısı Vetur, çok projeli depomdaki <script lang="ts"> Vue bileşenlerindeki @/ importlarım için hata mesajı üretiyor.

Görünüşe göre Vetur, VS Code çalışma alanının üst düzey klasöründe tsconfig.json dosyasına bakıyor. tsconfig.json dosyası olan Vue uygulamam bir alt klasörde. Vetur, TypeScript derleyicisini çağırırken doğru ayarları geçirmiyor.

Çözüm 1 (geçici çözüm)

VS Code'u Vue projesinin kök klasöründen başlatın. (Doğru tsconfig.json dosyasının bulunduğu aynı klasör.)

code .

tsconfig.json'in compilerOptions.paths özelliğine ek olarak compilerOptions.baseUrl özelliğini içerdiğinden emin olun (Vetur SSS).

Bu, proje düzeyindeki .vscode klasörüne artık erişilemediğinden VS Code ayarlarımı ve uzantı ayarlarımı değiştiriyor. (Çalışma alanı düzeyindeki ve Vue düzeyindeki .vscode klasörlerini senkron tutmak için sembolik bağlantılar kullanıyorum.)

Çözüm 2 (hile)

Çalışma alanımda tek bir Vue projesi var, bu yüzden tüm çalışma alanı klasörüme (Vue uygulama klasörümün üst klasörü) değiştirilmiş bir tsconfig.json dosyası ekledim.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["myVue/src/*"]
    }
  },
  "exclude": ["node_modules"]
}

"baseUrl" özelliğine, "paths" özelliğine ek olarak ihtiyacım vardı (yine Vetur SSS).

Değişikliklerin geçerli olması için VS Code'u yeniden başlattım.

"exclude" özelliği gerekli olmayabilir, ama Vetur'un TypeScript derleyicisini node_modules klasöründe çalıştırarak zaman kaybetmesinden paranoyakça endişeleniyorum.

Arka plan

Bu, şu anda açık olan Vetur sorunu Çoklu kök desteği #424 ile ilgili olabilir. (Özet: Vetur, VS Code çalışma alanının en üst düzey klasöründe tam olarak bir SPA bekliyor.)

Cevap #6

İçe aktarmada .vue uzantısını ekledikten sonra, vue dosyaları için TypeScript şimleri ekleyerek bu hatayı çözdüm.

typings/sfc.d.ts içinde şunu içeren bir dosya oluşturdum:

declare module '*.vue' {
    import Vue from 'vue'
    export default Vue
}

Referanslar: https://github.com/vuejs/vue/issues/5298#issuecomment-453036640

Cevap #7

Biraz geç ama yerel TS eklentilerini yüklemesi için VSCode'da TS'nin çalışma alanı sürümünü kullandığınızdan emin olun. Bu yoruma bakın: https://github.com/vitejs/vite/issues/965#issuecomment-717248892

VSCode ile çalışma alanınızın TS Sürümünü seçebilirsiniz:

İlgili makaleler