Pada saat menulis kode dalam bahasa pemrograman TypeScript maupun JavaScript yang berbasis modul, kita pasti sering melakukan importing modul. Pada umumnya cara melakukan importing adalah dengan cara relative paths, cara ini digunakan untuk menunjuk lokasi di mana modul yang akan di import. Contohnya seperti ini.

import ModuleX from "../../../libraries/modulex.ts"

Cara tersebut sah-sah saja, akan tetapi bagaimana jika lokasi modul yang akan di-import tempatnya cukup dalam atau terlalu banyak folder, cara ini akan menyita banyak space pada baris import sehingga kurang baik ketika dibaca. Untuk mengatasi masalah ini, ada cara di TypeScript yaitu menggunakan paths alias dengan cara menambahkan properti paths di dalam file tsconfig.json seperti ini:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@comps/*": ["src/components/*"],
      "@libs/*": ["src/libraries/*"]
    }
  }
}

Dengan mengatur path alias seperti di atas, maka jika ingin meng-import modul yang ada di dalam folder src, components, dan libraries cukup dengan langsung arahkan ke path alias-nya. Contohnya seperti ini.

import ComponentA from "@libs/modulex.ts"

Dengan cara tersebut tidak perlu lagi mengetikan relative path secara panjang, cukup gunakan alias yang sebelumnya telah diatur. Namun tidak selesai di sana, masih ada hal yang perlu diatur, terutama jika kita menggunakan webpack, karena path alias yang diatur tidak secara otomatis akan terbaca oleh webpack. Alih-alih ter-bundle, tapi malah error karena webpack tidak bisa menemukan modul yang dimaksud.

Untuk mengatasi masalah ini, kita harus menambahkan konfigurasi lagi agar webpack dapat membaca lokasi sebenarnya dari path alias yang dibuat tadi. Cara teremudahnya adalah dengan menggunakan plugin bernama “tsconfig-paths-webpack-plugin”. Plugin ini mampu melakukan generate secara otomatis path yang diatur di dalam file tsconfig.json.

Instalasi Plugin

Pertama-tama install terlebih dahulu plugin “tsconfig-paths-webpack-plugin” dengan menggunakan command berikut.

# Jika menggunakan npm
npm i -D tsconfig-paths-webpack-plugin

# Jika menggunakan yarn
yarn add -D tsconfig-paths-webpack-plugin

# Jika menggunakan pnpm
pnpm i -D tsconfig-paths-webpack-plugin

Mengatur Webpack

Setelah plugin ter-install, selanjutnya adalah mengatur konfigurasi webpack untuk menambahkan plugin. Caranya adalah import terlebih dahulu plugin yang ter-install lalu masukkan plugin ke dalam konfigurasi webpack-nya.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
  ...
}

Setelah itu, maka path alias yang telah ditambahkan melalui tsconfig.json akan otomatis ditambahkan juga di konfigurasi webpack sehingga pada saat bundling, webpack dapat membaca path asli dari alias yang dimaksud.

Untuk mengetahui lebih rinci terkait “tsconfig-paths-webpack-plugin”, kamu dapat membacanya di halaman resminya langsung di sini: https://github.com/dividab/tsconfig-paths-webpack-plugin

Pembaruan 2026: Bagaimana dengan Vite, Bun, atau SWC?

Sejak artikel ini ditulis, ekosistem build tools telah berkembang pesat. Jika Anda tidak lagi menggunakan Webpack mentah, kemungkinan besar alat Anda sudah mendukung path alias secara lebih efisien.

1. Vite

Jika Anda menggunakan Vite, Anda tidak butuh plugin tambahan di sisi Webpack. Namun, agar Vite membaca tsconfig.json Anda, disarankan menggunakan plugin vite-tsconfig-paths:

npm i -D vite-tsconfig-paths

Lalu di vite.config.ts:

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

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

2. Bun & Deno

Jika Anda menjalankan TypeScript menggunakan Bun atau Deno, kabar baiknya adalah mereka membaca compilerOptions.paths secara asli (native) dari tsconfig.json. Anda tidak perlu plugin apa pun; cukup jalankan kode Anda, dan alias akan terbaca secara otomatis.

3. SWC & Next.js

Jika Anda menggunakan Next.js (yang menggunakan SWC sebagai pengganti Babel/Webpack), mereka juga sudah mendukung paths secara otomatis selama Anda mengonfigurasinya dengan benar di tsconfig.json.

Sekian artikel saya kali ini, semoga dapat membantu permasalahan yang ditemui, dan terima kasih. 😊