MR Ferry

Minified React Error adalah error yang biasanya terjadi pada framework berbasis SSR (Server Side Rendering) atau SSG (Static Site Generator) seperti GatsbyJS, React, NextJS, dan sejenisnya. Biasanya terdapat setidaknya 3 error: Minified React error #425, Minified React error #418, dan Minified React error #423. Ketiga error tersebut root cause-nya biasanya sama. Inti dari permasalahan ketiganya adalah terjadi perbedaan antara konten hasil build dari server dengan konten awal yang dimuat di browser.

Sebelum kita telaah lebih jauh solusinya, kita perlu pahami dulu masalahnya. Pada saat pertama kali menampilkan sebuah halaman website yang menggunakan SSR atau SSG, sebenarnya server melakukan generate konten halamannya dengan output halaman statis berupa HTML & CSS doang. Setelah itu server akan mengirimkan JS dan browser akan mengeksekusi JS yang diterima untuk melakukan update tampilannya di browser sampai fully-rendered dan website menjadi interaktif. Proses transisi dari halaman yang tadinya statis menjadi interaktif itu disebut dengan Hydration pada React. Makanya website tersebut loading awalnya jadi cukup cepat dan SEO-nya cenderung bagus.

Masalahnya, kalau konten hasil logic dari saat build di server berbeda dengan konten hasil logic di browser saat pertama kali dimuat, maka akan muncul error itu. Perbedaan itu biasanya terjadi karena ada logic yang hasilnya dinamis, seperti tampilan tanggal, function Math.Random(), atau sejenisnya. Di kasus yang gw hadapi, masalahnya adalah terkait tanggal. Di server gw menggunakan UTC. Sedangkan timezone browser dan data tanggal yang gw simpan adalah Asia/Jakarta (+07:00). Jadinya saat pertama load atau hard refresh, muncul waktu dalam zona UTC, lalu sepersekian detik kemudian terjadi “quick flash” sehingga itu berubah menjadi waktu Asia/Jakarta sesuai waktu browser gw. Ketidaksamaan hasil tampilan dari server dengan browser itu yang mengakibatkan error. Kalau di server localhost biasanya ga kejadian karena timezone di local dengan browser harusnya sama.

Ada beberapa trik yang bisa digunakan. Kalau kasusnya spesifik terkait tanggal seperti yang gw alami, bisa dengan mendefinisikan timezone pada sebelum digunakan. Contoh kasusnya ketika menggunakan date-fns untuk mengkonversi tanggal dengan format tertentu seperti ini:

function formatToPattern(dateArg, formatString) {
  return format(dateArg, formatString);
}

Function tersebut menerima value dateArg dalam bentuk string seperti “2023-04-18T03:00+07:00”. Karena gw menggunakan library seperti date-fns, tanggal tersebut akan di-convert menggunakan objek Date, baik di server maupun di browser nanti. Hasilnya tentu saja bakal berbeda karena servernya belum tentu timezone-nya sama dengan timezone browser yang mengakses halaman tersebut. Inilah penyebab error tersebut.

Untuk memperbaikinya, kita perlu convert tanggalnya menjadi locale string beserta option timezone yang ingin dijadikan patokan seperti berikut agar apapun timezonenya nanti di browser maupun di server hasilnya jadi selaras dan ga error.

function formatToPattern(dateArg, formatString) {
  const date = typeof dateArg === "string" ? new Date(dateArg) : dateArg;
  const zonedDate = date.toLocaleString("en-US", { timeZone: "Asia/Jakarta" });
  return format(zonedDate, formatString);
}

Setelah melakukan hal di atas, silakan commit, deploy, dan liat langsung hasilnya di server😎.

Untuk kasus lainnya, terutama yang bukan terkait tanggal bisa dengan menambahkan logic untuk menampilkan placeholder yang kita inginkan saat pertama kali load. Sehingga baik di sisi server dan browser saat pertama kali load kontennya berupa placeholder yang sama dan terhindar dari error. Konten aslinya akan di-load belakangan di sisi browser saja. Contoh di case gw adalah ketika menampilkan logic updated date dengan value kalimat jarak waktu antara waktu terakhir perubahan dengan waktu browser saat ini.

{<span className="page-info">
  {`updated ${formatDistanceToNow(updatedAt)} ago`}
</span>}

Code di atas juga akan error karena di dalam logic formatDistanceToNow() terdapat logic menggunakan Date.now() di function date-fns yang dapat membuat hasil render antara server dan browser berbeda. Solusinya kita akan menggunakan useState() & useEffect() untuk mengecek statenya saat pertama kali load di browser dengan membuat function isClientRendered(). Kita set initial valuenya jadi false lalu ganti state-nya menjadi true setelah pertama kali render di browser agar kita bisa menampilkan konten tertentu hanya di browser saja tanpa terjadi Hydration error.

function isClientRendered() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);
  return isClient;
}

Lalu kita modif code di bagian render-nya dengan menambahkan logic conditional seperti berikut:

{<span className="page-info">
  {`updated ${isClientRendered() ? formatDistanceToNow(updatedAt) : "…"} ago`}
</span>}

Jadi saat pertama kali render di server maupun di browser yang muncul adalah karakter “…” karena state awal isClient adalah false. Setelah itu di browser state isClient akan berubah jadi true dan itu akan me-render ulang konten di browser karena hasil logic conditional di atas berubah. Sekarang errornya sudah tidak ada lagi di console.log dan konten yang muncul udah sesuai dengan yang diinginkan😎.

Itulah fixing singkat terkait Minified React Error. Setidaknya kalau ada yang masih bingung terkait error ini bisa tercerahkan. Nanti kalau ada info tambahan bakal gw update di sini.