reactjs - Vite projesinde React TS ile mutlak yol çalışmıyor

Vite react-ts projesinde mutlak yolun çalışması için uğraşıyorum.

İşte projeyi nasıl oluşturdum

npm init @vitejs/app
npx: installed 6 in 1.883s
√ Project name: ... test-vite
√ Select a framework: » react
√ Select a variant: » react-ts

Sonra TS resmi dokümanına dayanarak tsconfig.json dosyasına baseUrl ekledim:

{
  "compilerOptions": {
    "baseUrl": "./src",
    ...

basit bir bileşen ekleyerek takip edilmiştir (T:\test-vite\src\components\Test.tsx)

import React from "react";

const Test = () => <h1>This is a Test.</h1>;

export default Test;

Son olarak Test bileşenini App.tsx içinde ithal ediyorum
ama mutlak yolu kullanmama izin vermiyor:

import Test from "components/Test";

Bu hatayı alıyorum

oysa ki göreli yol kullanırsam, uygulama dev ve build modunda herhangi bir hata olmadan çalışıyor:

import Test from "./components/Test";

Projede mutlak yolu nasıl çalıştırabilirim?

Cevap #1

Burada iki problem var:

  • TypeScript'e import yolunu nasıl çözeceğini söyle
  • Vite'e import yolunu nasıl oluşturacağını söyle

Sadece TypeScript'e nasıl çözeceğini söylüyorsun, ama Vite nasıl derleyeceğini bilmiyor. Bu yüzden resmi belgedeki resolve.alias bölümüne bak, belki aradığın şey budur:

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

Bu şekilde (veya ./src altındaki herhangi bir modülü) path'i içe aktarabilirsiniz:

import Test from "@/components/Test";
import bar from "@/foo/bar"

Ayrıca, vite-tsconfig-paths vite eklentisini doğrudan kullanabilirsiniz, bu sayede resolve.alias yapılandırmasını manuel olarak yapmanıza gerek kalmaz

Aşağıdaki talimatları izleyin:

  1. vite-tsconfig-paths öğesini geliştirme bağımlılığı olarak yükleyin

  2. Vite.config.ts modülünü kullanarak vite-tsconfig-paths enjekte edin

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

Cevap #2

Arama sonuçları üzerinden buraya geldim, farklı bir şey arıyordum, yani basit bir mutlak import nasıl yapılır, mesela import { foo } from 'src/lib/foo.ts'

Yani tüm kodu içeren bir /src dizinine sahipseniz ve mutlak bir import yolu kullanmak istiyorsanız.

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: path.resolve('src/'),
    },
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  }
}

Bunun bir hile olduğunu unutmayın: src bir takma addır, bu yüzden Vite'de yol mutlak gibi görünür. Eğer kök dizinde /src'nin bitişiğinde başka bir dizininiz varsa, o dizin için başka bir takma ad eklemeniz gerekir.

Cevap #3

@Yuns çözümü işe yarıyor, ama vscode'da hata gösteriyor. Ve bu, vs code'da otomatik içe aktarmayı bozuyordu.

Hem vscode hem de vite'de çalışması için, alias'ı hem tsconfig hem de vite.config dosyalarına ekledim.

// tsconfig.json
{
  "paths": {
      "@/*": ["src/*"]
    }
  // ...
}


// vite.config.ts
{
  resolve: {
   alias: [{ find: '@', replacement: '/src' }],
  },
  // ...
}

Sonra, aşağıdaki gibi içe aktarabilirim (svelte uygulaması src dizininde)

import Header from '@/components/Header.svelte

Cevap #4

import {...} from "src/foo/bar"; arıyor musunuz?

Ben de kullanıcı Maciej Krawczyk gibi arama sonuçları aracılığıyla buraya geldim, ama @ kısmı da ilgimi çeken şey değildi. O kullanıcının cevabı bana yardımcı oldu, ama path.resolve kısmında sorun yaşadım (ReferenceError çünkü path tanımlı değildi), bu yüzden biraz farklı bir yaklaşım kullandım:

vite.config.ts
export default defineConfig({
  ...
  resolve: {
    alias: {
      src: "/src",
    },
  },
  ...
})

Vite'in çözümleyicisi, mutlak yol /src'i sunucunun hizmet verdiği yer olarak kabul eder (bkz. GH sorunu). Yani proje kökünden çalıştırıyor/derliyorsanız ve src üst düzey bir dizin olarak kullanılıyorsa — bu oldukça yaygındır — bu takma ad Vite'i doğru yöne yönlendirir.

tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "src/*": [
        "./src/*"
      ]
    }
  }
}

Bu temel olarak bu StackOverflow cevabını körü körüne takip etmek demek. TypeScript, bizim özel bir çözümleme yaptığımızı bilmek zorunda; aksi takdirde TS, var olmayan src paketiniz konusunda tedirgin olur ve nereye bakması gerektiğini bilemez. (Not: TS yapılandırmamı değiştirdikten sonra, VSCode değişikliği hemen algılamadı, bu yüzden hâlâ uyarılar alıyordum. Kapattım, yeniden açtım ve uyarıların gitmesi için yaklaşık 15 saniye beklemek zorunda kaldım.)

İlgili makaleler