Webpack – Critical dependency: the request of a dependency is an expression

Gambaran Umum Error

Pesan kesalahan “Webpack – Critical dependency: the request of a dependency is an expression” muncul ketika Webpack menemui ketergantungan dinamis yang tidak dapat ditentukan pada waktu kompilasi. Ini sering terjadi saat menggunakan ekspresi dalam pernyataan impor, yang membuat Webpack tidak dapat menganalisis dan menyertakan semua ketergantungan yang diperlukan dalam bundle akhir. Hal ini berpotensi menyebabkan aplikasi tidak berfungsi dengan baik atau tidak dapat menemukan modul yang diperlukan.

Penyebab Umum

Beberapa penyebab umum dari kesalahan ini meliputi:

1. Penggunaan ekspresi dinamis dalam impor:
2. Menggunakan variabel atau ekspresi untuk menentukan jalur modul yang akan dimuat.
3. Ketergantungan yang tidak diatur dengan benar:
4. Modul yang tidak diatur dalam konfigurasi Webpack, atau tidak terdeteksi oleh Webpack.
5. Versi Webpack yang tidak sesuai:
6. Menggunakan versi Webpack yang lebih lama mungkin menyebabkan masalah dalam menangani ketergantungan dinamis.
7. Masalah dengan plugin atau loader:
8. Beberapa plugin atau loader mungkin tidak mendukung cara tertentu dalam mengelola ketergantungan.

Metode Solusi

Metode 1: Mengubah Impor ke String Eksplisit

Salah satu solusi paling sederhana adalah memastikan bahwa semua ketergantungan diimpor menggunakan string eksplisit. Contoh:

const asset = 'config.json';
lazy(async () => await import(asset));

Pastikan untuk mengubah ekspresi dinamis menjadi string eksplisit agar Webpack dapat menganalisisnya dengan benar. Penggunaan template literal juga dianjurkan:

``javascript
lazy(async () => await import($