Ketika Anda bekerja dengan Webpack untuk mengelola JavaScript dalam proyek seperti CodeIgniter, Laravel, atau Node.js, mungkin Anda akan menemui error seperti ini saat proses build:

ERROR in ./assets/src/js/frontend.js 1:0-23
Module not found: Error: Can't resolve 'jquery' in 'C:laragonwwwtechpakjhonassetssrcjs'

Apa Arti Error Ini?

Pesan error ini berarti Webpack tidak dapat menemukan module jquery saat mencoba memproses file frontend.js.

Webpack menggunakan sistem modular berbasis Node.js, sehingga semua dependensi harus diinstal terlebih dahulu, termasuk jQuery. Jika tidak, ia tidak bisa menyertakan (bundle) library tersebut ke dalam output akhir (bundle.js).

Penyebab Umum

1. Belum Menginstal jQuery – Anda menggunakan import 'jquery' atau plugin yang membutuhkan jQuery, tetapi belum menginstalnya.

2. Salah dalam Penulisan Import – Misalnya import jquery from 'jquery' (harusnya huruf kecil semua).

3. File package.json tidak memiliki dependensi jquery.

4. Webpack tidak dikonfigurasi untuk menyediakan jQuery secara global, padahal diperlukan oleh plugin pihak ketiga (misalnya Bootstrap v4).

Langkah-Langkah Penanganan

1. Install jQuery Menggunakan NPM

Langkah pertama dan paling penting adalah menginstal jQuery menggunakan npm:

npm install jquery --save

Penjelasan:

• jquery akan masuk ke node_modules

• Flag --save akan menambahkan dependensi ke package.json agar jQuery otomatis ikut saat proyek di-clone dan dijalankan ulang

Jika menggunakan Yarn, perintahnya:

yarn add jquery

2. Tambahkan Import jQuery di File JavaScript Anda

Di file assets/src/js/frontend.js, Anda perlu menambahkan baris import jQuery:

import $ from 'jquery';
import jQuery from 'jquery';

// Jika Anda butuh jQuery tersedia di global scope (misalnya untuk plugin lama)
window.$ = $;
window.jQuery = jQuery;

Ini memungkinkan Anda menggunakan $() seperti biasa di seluruh file.

3. Konfigurasi Webpack Agar jQuery Tersedia Secara Global (Opsional)

Jika Anda menggunakan plugin seperti Bootstrap 4, Owl Carousel, atau plugin jQuery lawas yang mengharapkan jQuery tersedia secara global, Anda bisa memanfaatkan ProvidePlugin milik Webpack.

Buka file webpack.config.js, lalu tambahkan ini:

const webpack = require('webpack');

module.exports = {
  // ... konfigurasi lainnya ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
};

Dengan ini, Anda tidak perlu lagi menulis import $ from 'jquery' di setiap file. Webpack akan secara otomatis menyediakan jQuery sebagai variabel global.

4. Jalankan Ulang Build Webpack

Setelah semuanya dikonfigurasi, jalankan kembali Webpack:

npm run build

Atau jika Anda tidak memiliki skrip build di package.json, gunakan perintah manual:

npx webpack --mode development

Jika tidak ada error, maka proses bundle akan berjalan lancar dan file JavaScript Anda akan tercompile dengan jQuery di dalamnya.

Tips Debugging Tambahan

• Pastikan struktur folder Anda benar dan file frontend.js berada dalam jalur sesuai dengan konfigurasi Webpack.

• Gunakan console.log($) setelah import untuk memastikan bahwa jQuery telah berhasil dimuat.

• Cek versi jQuery yang terinstal dengan npm list jquery.

Error Can't resolve 'jquery' di Webpack adalah masalah umum yang muncul ketika Anda mengimpor jQuery tetapi belum menginstalnya atau belum mengkonfigurasinya dengan benar.

Untuk mencegah error serupa:

• Selalu install dependensi yang Anda gunakan (npm install nama-library)

• Perhatikan penulisan import (huruf kecil, case-sensitive)

• Gunakan ProvidePlugin untuk dukungan global jQuery jika diperlukan

Contoh Struktur File Webpack Project

project-root/
├── assets/
│   └── src/
│       └── js/
│           └── frontend.js
├── dist/
│   └── bundle.js
├── node_modules/
├── package.json
├── webpack.config.js