Deploy Baru Bikin Error? Ini Cara Mengatasi Chunk Load Error Next Js

Ditulis oleh Next.js

Chunk load error setelah deploy baru hampir selalu berarti browser meminta file JavaScript lama yang sudah tidak ada di server. Solusi tercepat yang aman adalah muat ulang halaman sekali untuk mengambil referensi chunk terbaru, lalu periksa tab Network kalau error berlanjut.

Penyebab Chunk Load Error di App Router

Next.js memberi nama file chunk dengan hash tiap build. Deploy baru mengganti hash itu, sementara tab lama masih menyimpan HTML yang menunjuk ke hash lama.

  • Tab dibuka sebelum deploy, lalu pindah halaman dan Next.js gagal mengunduh chunk lama yang sudah dihapus.
  • Cache browser atau CDN menahan halaman lama, sehingga referensi aset tidak sinkron dengan hasil build terbaru.
  • Dynamic import memakai next/dynamic gagal di tengah jalan karena koneksi putus, mode offline, atau pemblokir script.

Tabel Cek Cepat Chunk Load Error

Baca pesan asli di console browser sebelum mengubah kode, karena teks Loading chunk failed punya penyebab berbeda.

Gejala Penyebab Cek Pertama
Error muncul tepat setelah deploy Chunk lama sudah diganti Reload sekali, cek build ID terbaru
Error saat offline atau sinyal lemah Chunk gagal diunduh Buka Network, lihat status failed atau pending
Error hanya di sebagian user Adblock atau jaringan lambat Uji tanpa ekstensi dan throttling lambat

BACA JUGA:

Cara Memperbaiki Chunk yang Gagal Dimuat

Ikuti urutan ini supaya tidak langsung menyalahkan kode:

  1. Reproduksi dengan tab lama. Biarkan tab terbuka, lakukan deploy, lalu navigasi client side.
  2. Buka DevTools, tab Network, filter JS. Cari file berstatus 404 atau failed.
  3. Bersihkan cache halaman lama dengan hard reload, lalu uji navigasi ulang.
  4. Kalau 404 hilang setelah reload, masalahnya deploy, bukan bug komponen.
  5. Kalau gagal walau koneksi normal, periksa dynamic import dan Error Boundary.

Contoh Error Boundary Client Component untuk rute yang memakai dynamic import:

'use client';

import { Component, type ReactNode } from 'react';

export class ChunkErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>Bagian halaman gagal dimuat.</p>
          <button onClick={() => window.location.reload()}>
            Muat ulang halaman
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

Untuk navigasi App Router yang gagal karena data basi, panggil router.refresh() dari Client Component navigation, bukan reload penuh berulang. Reload otomatis hanya boleh dipakai dengan syarat:

  • Hanya sekali per sesi error, bukan loop.
  • Hanya setelah error chunk terkonfirmasi, bukan semua error render.
  • User diberi tombol dan pesan, bukan reload diam diam.
  • URL dan input form penting tidak hilang akibat reload.

FAQ

Apakah cukup reload halaman untuk chunk load error?

Ya untuk chunk usang setelah deploy, karena reload mengambil HTML dan hash chunk terbaru.

Kenapa chunk error muncul tiap selesai deploy?

Karena user masih memakai HTML lama yang menunjuk ke file hash lama yang sudah tidak diterbitkan.

Apakah dynamic import selalu mencegah chunk error?

Tidak, dynamic import justru memecah kode jadi chunk tambahan yang tetap bisa gagal bila jaringan bermasalah.

Artikel Terkait