4 Common Vite Errors in Laravel

Vite is a fantastic tool you can use to build the frontend assets for your Laravel application quickly. However, like any tool, there can be teething problems when you first start using it. When faced with an error, it can slow down your progress while you try to figure out what's gone wrong.

In this article, I'm going to cover four common errors you might encounter when using Vite with Laravel:

• Vite manifest not found at: public/build/manifest.json
• Unable to locate file in Vite manifest: resources/sass/app.scss
• Uncaught ReferenceError: $ is not defined
• vite: Permission denied

Hopefully, by the end of this article, you will have a better understanding of how to fix these errors and get back to building your application.

For the purposes of this article, we'll assume we're working on a fresh Laravel 11 application.

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

A common error you may encounter when using Vite with Laravel is "Vite manifest not found at: public/build/manifest.json". This error occurs when loading a page, and the Vite plugin for Laravel cannot locate the manifest file generated during the build process. Let's look at what the manifest file is and two likely scenarios where this error might occur.

#Using the Default Laravel/Vite Configuration

Assuming you haven't changed any of the commands in the package.json file that come with a fresh Laravel 11 installation, you can run either of the following commands to build your assets and generate the manifest file:

• npm run dev - This command builds your assets for development.
• npm run build - This command builds your assets for production.

If you were to run either of these commands, a new public/build/manifest.json file would be generated that looks something like this:

{
  "resources/css/app.css": {
    "file": "assets/app-rlbWHTKs.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.js": {
    "file": "assets/app-Xaw6OIO1.js",
    "name": "app",
    "src": "resources/js/app.js",
    "isEntry": true
  }
}

This manifest.json file maps the source files to the CSS and JS files that Vite has processed and built. This means, in your Blade views, you can use something like this:

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

And it would output the following HTML:

<link rel="preload" as="style" href="http://example.test/build/assets/app-rlbWHTKs.css" />

So, without the manifest.json file, the Vite integration for Laravel won't know which built file relates to the source file.

In many cases, running the relevant build script (npm run dev or npm run build) will generate the manifest.json file and resolve the issue.

#Using a Customized Laravel/Vite Configuration

If you've customized any of your Vite configuration, it's possible that the Vite plugin for Laravel cannot locate the manifest.json file. For example, let's say you've updated your vite.config.js file to output your built files to a public/dist directory by adding a buildDirectory option:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            buildDirectory: 'dist',
            refresh: true,
        }),
    ],
});

Rather than the built files being stored in public/build, they'll be stored in public/dist, meaning the manifest.json file will be located at public/dist/manifest.json. However, the Laravel Vite plugin is still looking for the manifest.json file in the default public/build directory when using the @vite directive in your Blade view.

To solve this issue, you can use the Vite plugin's advanced customization options to specify the location of the manifest.json file by replacing the @vite directive in your Blade views with the following:

{{ Vite::useBuildDirectory('dist')->withEntryPoints(['resources/css/app.css', 'resources/js/app.js'])  }}

As we can see in the example above, we're using the useBuildDirectory method to specify the build directory. We also use the withEntryPoints method to specify the entry points previously passed to the @vite Blade directive. After doing this, the Laravel Vite plugin will be able to locate the manifest.json file in the correct directory, and the error should be resolved.

#Unable to locate file in Vite manifest: resources/sass/app.scss

Another common error when using Vite in a Laravel project is "Unable to locate file in Vite manifest: resources/sass/app.scss". This error occurs when Vite cannot locate the file specified in the @vite directive in your Blade views.

For example, you may have a file named resources/sass/app.scss that you're trying to include in your Blade view using the @vite directive:

@vite('resources/sass/app.scss')

Let's look at some possible causes and solutions for this error.

#Check the Filepath and That The File Exists

First, I recommend checking that the file path used in the Blade view is correct. For example, you might be using @vite('resources/sass/app.scss') when the file is actually located at resources/css/app.scss.

As well as this, check whether this referenced file exists in the specified location.

Double (and triple!) check the paths and filenames when doing these checks. There might be a typo in the path, or maybe you've used the wrong file extension. If the file path is incorrect, you'll need to correct it to resolve the error.

#Regenerate the Manifest File

Another potential solution is to try building your assets using the relevant build script (npm run dev or npm run build). You may be using an old manifest file that doesn't include the file you're trying to include in your Blade view. Running the build script will generate a new manifest file that may include the file you're trying to include, resolving the issue.

#Check Whether Vite Has Processed the File

If you're still encountering this error after ensuring the file exists and you've rebuilt your assets, this suggests that Vite hasn't processed the file.

A quick way to check this is to look at the public/build/manifest.json file and see if the file you're trying to include is listed under one of the entries' src property. For example, if we were to look at this manifest.json file, we can see that the resources/sass/app.scss file isn't listed:

{
    "resources/css/app.css": {
        "file": "assets/app-rlbWHTKs.css",
        "src": "resources/css/app.css",
        "isEntry": true
    },
    "resources/js/app.js": {
        "file": "assets/app-Xaw6OIO1.js",
        "name": "app",
        "src": "resources/js/app.js",
        "isEntry": true
    }
}

Whereas in this example, the resources/sass/app.scss file is listed:

{
    "resources/js/app.js": {
        "file": "assets/app-Xaw6OIO1.js",
        "name": "app",
        "src": "resources/js/app.js",
        "isEntry": true
    },
    "resources/sass/app.scss": {
        "file": "assets/app-DtFeYo_o.css",
        "src": "resources/sass/app.scss",
        "isEntry": true
    }
}

If the file isn't listed in the manifest.json file, you may want to check your vite.config.js file to ensure the file is being included in the build process. For example, in this vite.config.js file, we can see that the resources/sass/app.scss file isn't being included in the input array:

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,
        }),
    ],
});

There are many reasons why the file might not have been included in the build process. For example, maybe you're in the process of switching from using CSS to using SCSS, and you've forgotten to update the vite.config.js file to include the new SCSS file's path. This is something I've forgotten to do many times!

In this scenario, you can update the vite.config.js file to include the correct file path:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Running your build script should now include the resources/sass/app.scss file in the build process, and hopefully, the error will be resolved.

#Uncaught ReferenceError: $ is not defined (Using jQuery)

Another error you may encounter when using Vite is "Uncaught ReferenceError: $ is not defined" when using jQuery. This error occurs when using the $ variable in your JavaScript code, but jQuery hasn't been loaded.

#Check Whether jQuery Is Installed

A possible cause of this error is that jQuery hasn't been included in your Vite build process. The first thing to check is whether jQuery is installed. If you're using NPM to manage your JavaScript dependencies, you can use the npm list command to find out.

For example, assuming our project is located in the /Users/ashallen/www/my-laravel-app directory, we can run the following command to check if jQuery is installed:

npm list jquery

If jQuery is installed, you should see something like this:

my-laravel-app@ /Users/ashallen/www/my-laravel-app
└── jquery@3.7.1

If it's not installed, the output might look like this:

my-laravel-app@ /Users/ashallen/www/my-laravel-app
└── (empty)

If it's not installed, you can install it as a development dependency using the following command:

npm install jquery -D

#Check Whether jQuery is Imported

After installing jQuery, you'll need to make it available in any files where you want to use $. For example, you might want to include it in your resources/js/app.js file if you're using it there:

import './bootstrap';
import $ from 'jquery';
 
// You can then access the $ variable here...

However, let's assume we have a resources/js/MyClass.js file that uses jQuery. We'll create a simple example file purely for demonstration purposes:

export default class MyClass {
    init() {
        $('body').on('click', function () {
            console.log('Body clicked');
        });
    }
}

The resources/js/MyClass.js class has a single init method that attaches a click event listener to the body element. When the body is clicked, it logs a message to the console.

Then, in our resources/js/app.js file, we'll import the resources/js/MyClass.js class and call the init method:

import './bootstrap';
import $ from 'jquery';
import MyClass from "./MyClass.js";
 
new MyClass().init();

Now, when the page loads, the "Uncaught ReferenceError: $ is not defined" error will occur because the $ variable is not available in the resources/js/MyClass.js file; it's only available in the resources/js/app.js file. So, to resolve these errors, we have two options:

• Import jQuery in the resources/js/MyClass.js file.
• Assign the $ variable to the window object in the resources/js/app.js file.

If we choose to import jQuery in the resources/js/MyClass.js file, we can update the file like so:

import $ from 'jquery';
 
export default class MyClass {
    init() {
        $('body').on('click', function () {
            console.log('Body clicked');
        });
    }
}

Alternatively, if we choose to assign the $ variable to the window object in the resources/js/app.js file, we can update the file like so:

import './bootstrap';
import MyClass from "./MyClass.js";
import $ from 'jquery';
 
// Assign the $ variable to the window object
window.$ = $;
 
new MyClass().init();

After making either of these changes, the "Uncaught ReferenceError: $ is not defined" error should hopefully be resolved.

These types of errors can sometimes be tricky to spot and fix, particularly in production environments where you might only see the error once you've deployed your application. For this reason, I'd highly recommend using a tool like Sentry to help you track and debug these errors. Sentry is a fantastic error monitoring tool that allows you to monitor your frontend JavaScript code and backend Laravel code for errors and exceptions. It's a great way to get a complete picture of what's going wrong in your application and help you fix errors more quickly.

#vite: Permission denied

Another error you may encounter when running the Vite command is "vite: Permission denied". This error typically occurs when you try to run the Vite command with insufficient permissions.

For example, you may have installed your NPM dependencies using sudo npm install rather than npm install. As a result of doing this, the node_modules directory and its contents would be owned by the root user rather than your user account. This means that the necessary files can't be accessed when you try to run a Vite command.

Usually, the solution to this issue is to change the ownership of the node_modules directory and its contents so you can run the Vite commands. One possible way to do this is to recursively change the ownership of the node_modules directory and its contents to your user account. Let's assume your user account is ash-allen. You can run the following command to change the ownership:

sudo chown -R ash-allen ./node_modules

The chown command changes the ownership of the node_modules directory and its contents to the ash-allen user account. We're passing the -R flag to the chown command to recursively change the directory's ownership and contents. After running this command, you should be able to run your Vite commands without encountering the "vite: Permission denied" error.

#Summary

In this article, we've covered four common errors you might encounter when using Vite with Laravel:

• Vite manifest not found at: public/build/manifest.json
• Unable to locate file in Vite manifest: resources/sass/app.scss
• Uncaught ReferenceError: $ is not defined
• vite: Permission denied

We've looked at the causes of these errors and possible solutions for each of them. Hopefully, you now have a better understanding of how to resolve these errors and can get back to building your Laravel application with Vite.