# Absolute imports Js for vite

## #Javascript

ปกติการ import โดยทั่วไปจะใช้ลักษณะ path อย่างนี้

```
import Cards from "components/cards";
```

แต่เมื่อใช้ Vite จะต้องทำในลักษณะนี้

```
import Cards from “/src/components/cards.jsx”
```

เพราะว่าตัว Vite ไม่มี inbuilt src path ในตัว

> ### วิธีแก้ไข

ให้ไปที่ไฟล์ vite.config.js และแก้ไขดังนี้

```
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});
```

## #TypeScript

ส่วนสำหรับ Typescrit ให้ตั้งค่าตามนี้ ไปที่ไฟล์ vite.config.js และแก้ไขดังนี้

```
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
   alias : [{ find: "@", replacement: "/src" }]    
  },
  plugins: [react()],
});
```

และในไฟล์ tsconfig.json ให้ใส่ค่าดังนี้

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

{% hint style="info" %}

## Ref&#x20;

1.<https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/>

2.<https://www.telerik.com/blogs/whats-vite-guide-modern-super-fast-project-tooling>
{% endhint %}
