Build ErrorNext.jsImportBuild5 mnt baca

Mengatasi Module not found: Can't resolve di Next.js

Build Next.js gagal karena import tidak ketemu. Checklist path, alias, dan case sensitivity.

1 · Gejala & Log Pesan Error

error.log

./src/app/page.tsx
Module not found: Can't resolve '@/components/Button'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/page.tsx

// kadang: lolos di Windows/Mac, gagal saat deploy di Vercel (Linux)

2 · Akar Penyebab Masalah

Import Menunjuk ke File yang Tidak Ada (di Mata Bundler)

Pesan ini artinya: "aku mengikuti import-mu, tapi tidak menemukan file itu". Penyebabnya berurutan dari yang paling umum:

Typo atau path salah: @/components/Button padahal file-nya @/components/Buttons atau ada di folder lain.
Case sensitivity: file-nya button.tsx tapi di-import Button. Windows/Mac (case-insensitive) memaafkan ini, Linux tidak. Makanya lolos lokal tapi gagal di Vercel.
Alias @ belum dikonfigurasi: @ harus dipetakan ke ./src/* di tsconfig.json (atau jsconfig.json).
File belum disimpan / belum ada: import ditulis dulu, file-nya menyusul (atau lupa di-commit ke git).

3 · Solusi & Diff Kode

✕ Sebelum (bermasalah)

before

// ❌ salah satu dari ini
import Button from "@/components/Button"; // file-nya button.tsx (huruf kecil)
// tsconfig.json tanpa paths → "@" tidak dikenal
{
  "compilerOptions": { /* tidak ada "paths" */ }
}

✓ Sesudah (diperbaiki)

after

// ✔ samakan persis nama file (case-sensitive)
import Button from "@/components/button";

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

Langkah Perbaikan

Verifikasi file-nya ada: ls src/components/ dan cocokkan nama persis, termasuk huruf besar-kecil.
Samakan case: kalau file-nya button.tsx, import-nya harus @/components/button, bukan Button. Berlaku juga untuk nama folder.
Cek alias: pastikan tsconfig.json punya baseUrl + paths seperti contoh di atas, lalu restart dev server.
Cek git: git status untuk memastikan file yang di-import ikut ter-commit. File yang hanya ada di laptopmu tidak ada di server build.
Setelah perbaiki: hapus cache rm -rf .next lalu build ulang untuk memastikan bersih.