Cara Mengatasi Module Not Found Next Js karena Import Salah Path

Ditulis oleh Next.js

Error Module not found di Next.js hampir selalu berarti path import tidak cocok dengan lokasi file asli. Perbaiki dulu tulisan pathnya, lalu cek alias @ di tsconfig.json, lalu pastikan dependensi sudah terinstal. Hapus folder .next setelah path diperbaiki agar cache build lama tidak menutupi hasil.

Penyebab Module Not Found Paling Sering di App Router

Next.js membaca import persis seperti tertulis. Satu level ../ yang kurang langsung memicu error, terutama di struktur app/dashboard/page.tsx yang berlapis.

  • Path relatif salah: ./Button padahal file ada di ../components/Button.
  • Alias @ tidak terbaca karena paths di tsconfig.json belum benar.
  • File belum tersimpan atau nama file beda huruf besar kecil, misalnya Navbar.tsx diimport sebagai navbar.
  • Dependensi belum diinstal setelah clone project atau tambah package baru.
  • Import file server-only dari Client Component, misalnya modul yang memakai akses database langsung.

Di Linux dan Vercel, sistem file bersifat case-sensitive. Import jalan di Windows atau Mac, lalu gagal saat build Vercel, biasanya karena masalah huruf besar kecil ini.

Tabel Diagnosis Cepat Module Not Found

Baca baris pertama error. Next.js selalu menyebut modul yang gagal dan file yang memicunya, contohnya Module not found: Can’t resolve ‘@/components/Button’ in ‘/app/dashboard’.

Masalah Penyebab Solusi
Can’t resolve ‘./…’ Jumlah ../ salah Hitung ulang struktur folder
Can’t resolve ‘@/…’ Alias belum dikonfigurasi Perbaiki tsconfig paths
Can’t resolve ‘lodash’ Package belum diinstal Jalankan npm install
Gagal hanya di Vercel Beda case penulisan nama file Samakan import dengan nama file

Langkah Memperbaiki Import dan Dependensi Error

  1. Reproduksi error dengan npm run dev dan catat nama modul yang hilang.
  2. Perbaiki path relatif dari lokasi file yang mengimport, bukan dari root project.
  3. Cek alias di tsconfig.json bila memakai @.
  4. Instal ulang dependensi bila modul dari node_modules.
  5. Hapus cache .next, lalu jalankan build ulang.
// Import relatif yang benar
import Button from "../components/Button";

// Import dengan alias @
import Button from "@/components/Button";

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

Untuk komponen berat yang hanya dipakai di browser, dynamic import membantu memisahkan bundle, tetapi tidak memperbaiki path yang memang salah tulis.

FAQ

Apakah hapus node_modules selalu diperlukan?

Tidak. Cukup bila pesan error menunjuk package npm, mulai dari npm install dulu.

Kenapa error hanya muncul saat build Vercel?

Umumnya karena perbedaan case nama file atau file belum ter-commit ke repository.

Apakah use client memperbaiki module not found?

Tidak. Direktif itu mengatur batas Server dan Client Component, bukan menyelesaikan path import.

Artikel Terkait