How do I fix the Laravel error: Vite manifest not found?

Richard C.

—April 15, 2024

The Problem

Vite.js is a front-end web application bundler for HTML, JavaScript, and CSS. In 2024, it is the default bundler for Laravel.

When you run npm run build in your Laravel project, the script in package.json calls vite build, which generates the file public/build/manifest.json. If this manifest file is missing, you will get the error Vite manifest not found when trying to run your Laravel application.

The Solution

There are a few causes for this error. Let’s look at each.

npm Packages Not Installed

First, check that your package.json file contains the scripts:

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

It must also contain the dependency requirements for Vite:

"devDependencies": {
  "laravel-vite-plugin": "^1.0.0",
  "vite": "^5.0.0"

The above sections are included automatically in modern Laravel. If your package.json doesn’t have them, you need to add them.

Now install the dependencies and build your project:

rm -rf node_modules
npm install
npm run build

These commands will create public/build/manifest.json.

Since the /public/build folder is excluded from Git by the .gitignore file, you need to run npm install and npm run build on every computer where you run your Laravel app. This includes your public web server if you are using Git to deploy the project.

Old Versions of Laravel and Node

If the npm commands in the previous section fail, and your project is very old, you may need to upgrade Laravel, Node.js, and npm to the latest version. This might differ depending on how you installed these tools, but in general, you can run the commands below to upgrade and refresh Laravel:

composer clear-cache
composer update --with-all-dependencies
php artisan optimize:clear
php artisan optimize
php artisan migrate

You can find the latest version of Laravel here.

To update Node and npm you should install the Node Version Manager:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Then in a new terminal (the old terminal won’t see nvm yet) install the latest version of Node and npm:

nvm install node
nvm use node
npm install -g npm@latest

cPanel Web Host Directory Structure Problems

Your Laravel project might run correctly on your local machine or a Docker container, but fail on a shared PHP web host where you don’t have full control of PHP.

First, check that your web host has a recent version of PHP and Node. If your user interface is cPanel, you can browse to Software or similar, depending on your theme and version of cPanel, to find this information. If a version selector is available, choose the latest version.

Next, check that when you uploaded all your files to the server via FTP, you included the entire public/build folder and the manifest file.

Finally, you need to check the folder structure of where you uploaded your code on the host. Be aware that files uploaded to the public_html folder on a web host are available to anyone on the internet to browse. You most likely want only your client-side code there, such as HTML, JS, CSS, and images. Your back-end code should be private, as it may contain business logic and secrets. There are two ways to achieve privacy when using the public_html folder:

• You can upload your entire app to the public_html folder, and alter the .htaccess file to redirect all HTTP requests to a public subfolder. If you do this, you need to test carefully that the rule works to avoid publicly exposing information.
• You can also upload your public subfolder to the public_html folder on the host, and upload the rest of your code to another folder so that it is not publicly browsable.

In both cases, you need to have a copy of your index.php file in the public_html folder or visitors will not be able to browse to your app. You need to edit index.php to change all file paths, such as '/../vendor/autoload.php', to the correct folders on your host, or Laravel will not know where to resolve dependencies.

Deploying a Laravel app to shared hosting can be tricky, and we recommend rather using a small Docker-based cloud host if you are looking for a cheap solution. That way you still have complete control over the files and frameworks that the container is running, rather than relying on a shared configuration.