Cara Mengatasi Vite Manifest Not Found pada Laravel

Laravel menggunakan Vite sebagai alat untuk mengelola dan membangun file front-end seperti CSS, JavaScript, gambar, serta aset lainnya.

Dalam proses pengembangan, Vite membantu developer menjalankan perubahan secara cepat melalui development server. Namun, ketika aplikasi dipindahkan ke hosting atau mode production, Laravel membutuhkan file hasil build yang tersimpan di dalam folder public/build.

Jika folder atau file tersebut tidak tersedia, Laravel akan menampilkan error seperti berikut:

Illuminate\Foundation\ViteManifestNotFoundException

Vite manifest not found at:
public/build/manifest.json

Error ini cukup sering terjadi ketika aplikasi Laravel baru saja diunggah ke cPanel, dipindahkan ke server lain, atau belum menjalankan proses build.

Pada tutorial ini, kita akan membahas penyebab dan solusi lengkap untuk mengatasi Vite Manifest Not Found pada Laravel.

Apa Itu File Vite Manifest?

File manifest adalah file JSON yang dibuat secara otomatis oleh Vite setelah proses build selesai.

Lokasi default file tersebut adalah:

public/build/manifest.json

File ini berisi informasi mengenai hasil kompilasi aset aplikasi, seperti:

• File CSS

• File JavaScript

• Nama file hasil hashing

• Lokasi aset

• Hubungan antarfile

Laravel membaca file manifest untuk mengetahui file CSS dan JavaScript mana yang harus dimuat pada halaman website.

Contoh isi file manifest:

{
    "resources/css/app.css": {
        "file": "assets/app-D8jK2mP.css",
        "src": "resources/css/app.css",
        "isEntry": true
    },
    "resources/js/app.js": {
        "file": "assets/app-A7nL5qX.js",
        "src": "resources/js/app.js",
        "isEntry": true
    }
}

Nama file hasil build biasanya memiliki kode unik atau hash agar browser dapat mengenali versi terbaru dari aset.

Penyebab Vite Manifest Not Found

Terdapat beberapa penyebab yang paling sering menimbulkan error ini.

1. Belum Menjalankan NPM Install

Setelah project Laravel diunduh atau dipindahkan, folder node_modules biasanya belum tersedia.

Tanpa dependency tersebut, proses build tidak dapat dilakukan.

2. Belum Menjalankan NPM Run Build

File manifest.json baru dibuat setelah perintah build dijalankan.

Jika developer hanya mengunggah source code tanpa melakukan build, folder public/build tidak akan tersedia.

3. Folder Public Build Tidak Ikut Diunggah

Proses build mungkin sudah dilakukan di localhost, tetapi folder public/build tidak ikut diunggah ke hosting.

Hal ini sering terjadi saat upload project secara manual melalui cPanel.

4. Path Public Laravel Berbeda

Pada shared hosting, isi folder public Laravel sering dipindahkan ke public_html.

Jika lokasi build tidak disesuaikan, Laravel dapat mencari manifest di folder yang salah.

5. File Input Vite Tidak Sesuai

Error juga dapat terjadi jika file yang dipanggil melalui directive @vite tidak terdaftar atau tidak tersedia.

Contoh:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Jika salah satu file tidak ada, proses build dapat mengalami masalah.

6. Konfigurasi Vite Salah

File vite.config.js yang tidak sesuai dapat menyebabkan hasil build disimpan ke lokasi berbeda.

7. Folder Build Terhapus

Folder build dapat terhapus ketika melakukan deployment, update project, ekstraksi file, atau menjalankan proses pembersihan tertentu.

Solusi 1: Jalankan NPM Install

Buka terminal atau Command Prompt, kemudian masuk ke folder utama project Laravel.

Contoh:

cd C:\xampp\htdocs\nama-project

Setelah itu, jalankan:

npm install

Perintah ini akan mengunduh seluruh dependency front-end yang tercantum di dalam file package.json.

Setelah selesai, akan terbentuk folder:

node_modules

Folder node_modules tidak perlu diunggah ke hosting karena ukurannya cukup besar. Yang perlu diunggah adalah hasil build di dalam public/build.

Solusi 2: Jalankan NPM Run Build

Setelah dependency berhasil terinstal, jalankan:

npm run build

Jika proses berhasil, Vite akan membuat folder berikut:

public/build

Di dalamnya biasanya terdapat:

manifest.json
assets/

Pastikan file ini tersedia:

public/build/manifest.json

Setelah itu, jalankan kembali Laravel.

php artisan serve

Kemudian buka aplikasi melalui browser.

Solusi 3: Gunakan NPM Run Dev untuk Localhost

Saat proses development di localhost, Anda dapat menggunakan:

npm run dev

Biarkan terminal Vite tetap berjalan.

Pada terminal lain, jalankan:

php artisan serve

Dengan metode ini, Laravel akan mengambil aset langsung dari Vite development server.

Biasanya terdapat dua terminal aktif:

Terminal pertama:

php artisan serve

Terminal kedua:

npm run dev

Metode ini digunakan saat mengembangkan aplikasi, bukan untuk server production.

Perbedaan NPM Run Dev dan NPM Run Build

npm run dev digunakan ketika aplikasi masih dalam tahap pengembangan.

Fungsinya:

• Menjalankan Vite development server.

• Memperbarui tampilan secara otomatis.

• Memudahkan proses coding.

• Tidak membuat file production final.

Sementara itu, npm run build digunakan sebelum aplikasi diunggah ke hosting atau server production.

Fungsinya:

• Mengompilasi CSS dan JavaScript.

• Mengoptimalkan ukuran file.

• Membuat folder public/build.

• Membuat file manifest.json.

• Menyiapkan aset untuk production.

Untuk deployment, gunakan:

npm run build

Solusi 4: Pastikan Folder Public Build Ikut Diunggah

Jika aplikasi dijalankan di cPanel, pastikan folder hasil build telah diunggah.

Struktur yang harus tersedia:

public_html/build/manifest.json
public_html/build/assets/

Jika struktur Laravel menggunakan folder public secara langsung, lokasinya dapat berupa:

nama-project/public/build/manifest.json

Periksa melalui File Manager cPanel dan pastikan file tersebut benar-benar tersedia.

Jangan hanya mengunggah folder resources, karena file dalam folder tersebut belum dapat digunakan langsung oleh browser.

Solusi 5: Periksa Directive Vite di Blade

Buka file layout utama Laravel.

Biasanya terletak di:

resources/views/layouts/app.blade.php

Periksa bagian berikut:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Pastikan file berikut benar-benar tersedia:

resources/css/app.css
resources/js/app.js

Jika aplikasi hanya menggunakan JavaScript, Anda dapat menyesuaikannya menjadi:

@vite('resources/js/app.js')

Jika nama file berbeda, sesuaikan dengan struktur project.

Contoh:

@vite(['resources/css/main.css', 'resources/js/main.js'])

Pastikan file tersebut juga terdaftar dalam vite.config.js.

Solusi 6: Periksa Vite Config

Buka file:

vite.config.js

Konfigurasi standar Laravel biasanya seperti berikut:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Pastikan bagian input sesuai dengan file yang dipanggil melalui @vite.

Jika pada Blade memanggil:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Maka file tersebut juga harus terdaftar di dalam konfigurasi Vite.

Setelah melakukan perubahan, jalankan kembali:

npm run build

Solusi 7: Bersihkan Cache Laravel

Laravel dapat menyimpan konfigurasi atau view lama yang menyebabkan perubahan belum terbaca.

Jalankan:

php artisan optimize:clear

Perintah tersebut akan membersihkan beberapa cache sekaligus, seperti:

• Configuration cache

• Route cache

• View cache

• Application cache

Setelah itu, jalankan kembali:

npm run build

Kemudian cek aplikasi.

Solusi 8: Hapus Folder Build dan Build Ulang

Jika file manifest rusak atau tidak sesuai dengan source code terbaru, hapus folder build lama.

Windows:

rmdir /s /q public\build

Linux atau macOS:

rm -rf public/build

Kemudian jalankan:

npm run build

Cara ini akan membuat ulang seluruh aset dan file manifest.

Solusi 9: Pastikan Node.js dan NPM Tersedia

Periksa versi Node.js:

node -v

Periksa versi NPM:

npm -v

Jika perintah tidak dikenali, berarti Node.js belum terinstal atau belum masuk ke PATH sistem.

Install Node.js terlebih dahulu, lalu tutup dan buka kembali terminal.

Setelah itu, ulangi:

npm install
npm run build

Solusi 10: Periksa Package JSON

Buka file:

package.json

Pastikan terdapat script berikut:

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

Jika bagian build tidak tersedia, perintah npm run build tidak dapat dijalankan.

Pastikan juga dependency seperti vite dan laravel-vite-plugin tersedia.

Contoh:

{
    "devDependencies": {
        "axios": "^1.7.4",
        "laravel-vite-plugin": "^1.0",
        "vite": "^6.0.0"
    }
}

Versi package dapat berbeda tergantung versi Laravel dan waktu pembuatan project.

Solusi di cPanel Tanpa Node.js

Tidak semua shared hosting menyediakan Node.js atau akses terminal.

Jika cPanel tidak mendukung perintah NPM, lakukan proses build di komputer lokal.

Langkah-langkahnya:

1. Buka project Laravel di komputer.

2. Jalankan npm install.

3. Jalankan npm run build.

4. Pastikan folder public/build terbentuk.

5. Kompres folder build.

6. Upload ke cPanel.

7. Ekstrak ke folder public website.

Struktur akhirnya harus seperti berikut:

public_html/build/manifest.json
public_html/build/assets/

Dengan cara ini, server hosting tidak perlu menjalankan Node.js.

Solusi Jika Folder Public Dipindahkan ke Public HTML

Pada cPanel, struktur project sering dibuat seperti berikut:

/home/username/laravel-app
/home/username/public_html

Isi folder laravel-app/public disalin ke public_html.

Dalam kondisi ini, folder build juga harus berada di:

/home/username/public_html/build

Pastikan isi foldernya:

build/manifest.json
build/assets/

Jangan menyimpan hasil build hanya di:

/home/username/laravel-app/public/build

jika website membaca aset dari public_html.

Periksa File Index PHP

Jika project Laravel disimpan di luar public_html, periksa file:

public_html/index.php

Pastikan path ke project utama sudah benar.

Contoh:

require __DIR__.'/../laravel-app/vendor/autoload.php';

$app = require_once __DIR__.'/../laravel-app/bootstrap/app.php';

Meskipun kesalahan ini biasanya menyebabkan Error 500, konfigurasi path yang tidak benar juga dapat menimbulkan masalah saat Laravel membaca lokasi public path.

Mengubah Public Path Laravel

Pada struktur hosting tertentu, Laravel perlu diarahkan agar mengenali public_html sebagai folder public.

Salah satu pendekatannya adalah mengatur public path pada file bootstrap aplikasi sesuai versi Laravel dan struktur project.

Namun, metode ini harus dilakukan dengan hati-hati karena penerapannya dapat berbeda antarversi Laravel.

Untuk shared hosting, cara paling sederhana biasanya adalah:

• Menyimpan core Laravel di luar public_html.

• Menyalin isi folder public ke public_html.

• Memastikan folder build berada di public_html.

• Menyesuaikan path pada index.php.

Error Manifest Exists tetapi Tetap Tidak Terbaca

Terkadang file manifest.json tersedia, tetapi Laravel masih menampilkan error.

Periksa beberapa hal berikut.

Nama File

Pastikan namanya benar:

manifest.json

Bukan:

manifest.JSON
manifest.json.txt
manifest

Huruf Besar dan Kecil

Server Linux membedakan huruf besar dan kecil.

Folder:

build

berbeda dengan:

Build
BUILD

Permission File

Gunakan permission yang aman.

Folder:

755

File:

644

Lokasi File

Pastikan file berada di lokasi public yang digunakan domain.

File Rusak

Buka manifest.json dan pastikan isinya berupa JSON yang valid.

Jika kosong atau rusak, lakukan build ulang.

Error Unable to Locate File in Vite Manifest

Selain Vite Manifest Not Found, terdapat error lain seperti:

Unable to locate file in Vite manifest:
resources/css/app.css

Error ini berarti file manifest tersedia, tetapi file yang dipanggil melalui @vite tidak ditemukan di dalam manifest.

Penyebabnya antara lain:

• File input tidak terdaftar di vite.config.js.

• Nama file salah.

• File dipindahkan.

• Hasil build masih menggunakan konfigurasi lama.

Solusinya:

1. Periksa file yang dipanggil melalui @vite.

2. Periksa bagian input pada vite.config.js.

3. Pastikan nama dan lokasi file sama.

4. Hapus folder public/build.

5. Jalankan kembali npm run build.

6. Upload hasil build terbaru.

Error NPM Is Not Recognized

Pesan error:

'npm' is not recognized as an internal or external command

Artinya Node.js belum terinstal atau PATH belum terbaca.

Solusinya:

• Install Node.js.

• Tutup terminal.

• Buka terminal baru.

• Jalankan node -v.

• Jalankan npm -v.

Jika versi muncul, lanjutkan proses build.

Error NPM Run Build Gagal

Jika proses build gagal, baca pesan error yang muncul di terminal.

Beberapa penyebab umum:

• File CSS tidak ditemukan.

• File JavaScript tidak ditemukan.

• Syntax error.

• Package belum terinstal.

• Versi Node.js tidak sesuai.

• Konfigurasi Vite salah.

• Import file salah.

Coba jalankan:

npm install

Kemudian:

npm run build

Jika masih gagal, hapus node_modules dan file lock, kemudian install ulang.

Windows:

rmdir /s /q node_modules
del package-lock.json
npm install
npm run build

Linux atau macOS:

rm -rf node_modules
rm package-lock.json
npm install
npm run build

Gunakan langkah ini hanya jika dependency project mengalami masalah.

Checklist Mengatasi Vite Manifest Not Found

Gunakan checklist berikut untuk memastikan seluruh konfigurasi sudah benar:

• Node.js sudah terinstal.

• NPM dapat dijalankan.

• npm install berhasil.

• npm run build berhasil.

• Folder public/build tersedia.

• File manifest.json tersedia.

• Folder assets tersedia.

• Directive @vite menggunakan path yang benar.

• Input pada vite.config.js sesuai.

• Folder build ikut diunggah ke hosting.

• Lokasi build sesuai dengan public path.

• Cache Laravel sudah dibersihkan.

• Permission file dan folder sudah benar.

Tips Agar Error Tidak Terulang

Agar masalah Vite Manifest Not Found tidak kembali terjadi, lakukan beberapa hal berikut:

• Selalu jalankan npm run build sebelum deployment.

• Jangan menghapus folder public/build di production.

• Pastikan folder build masuk ke paket upload.

• Periksa hasil build setelah melakukan perubahan CSS atau JavaScript.

• Gunakan proses deployment yang konsisten.

• Pisahkan konfigurasi development dan production.

• Simpan dokumentasi struktur hosting.

• Lakukan backup sebelum memperbarui aplikasi.

Mengapa Memilih Ovla Media?

Ovla Media menyediakan layanan pengembangan, deployment, dan perbaikan aplikasi berbasis Laravel.

Kami membantu menangani berbagai kendala seperti:

• Vite Manifest Not Found

• HTTP Error 500

• Route Laravel 404

• Storage Link bermasalah

• Konfigurasi .env

• Koneksi database gagal

• Migrasi shared hosting

• Deploy Laravel ke cPanel

• Deploy Laravel ke VPS

• Optimasi performa aplikasi

• Integrasi Payment Gateway

• Integrasi WhatsApp API

• Maintenance Laravel

Setiap proses dilakukan dengan memperhatikan keamanan, struktur aplikasi, performa, serta kemudahan pengembangan di masa depan.

Kesimpulan

Error Vite Manifest Not Found terjadi ketika Laravel tidak dapat menemukan file manifest.json yang seharusnya berada di dalam folder public/build.

Solusi paling umum adalah menjalankan:

npm install
npm run build

Setelah itu, pastikan folder public/build beserta file manifest.json dan folder assets tersedia di lokasi public website.

Untuk deployment ke cPanel, proses build dapat dilakukan di komputer lokal. Kemudian folder hasil build diunggah ke public_html tanpa perlu menjalankan Node.js di server.

Jika file manifest sudah tersedia tetapi error masih muncul, periksa directive @vite, konfigurasi vite.config.js, lokasi public path, permission, serta cache Laravel.

Dengan konfigurasi yang tepat, Laravel dapat memuat file CSS dan JavaScript secara normal, baik di localhost maupun server production.

Jika Anda membutuhkan bantuan untuk memperbaiki error Laravel, melakukan deployment ke cPanel, atau mengoptimalkan aplikasi web, Ovla Media siap membantu memberikan solusi yang profesional dan sesuai kebutuhan.