Back to Homepage

Fixing /livewire/livewire.js and livewire/upload-file Issue

3 min read


Fixing /livewire/livewire.js and livewire/upload-file Issue

Today, let's dive into understanding and fixing the common issue new developers face with the Livewire framework on Nginx servers - the infamous 404 not found error for /livewire/livewire.js and livewire/upload-file Issue. The Main reason to write about this issue is that even i faced particular situation when working with nginx and dynamic route in the beginning. Buckle up and let's get started.

Decoding the 404 Error with /livewire/livewire.js

Livewire, a full-stack framework for Laravel, cleverly serves its JavaScript directly. If you've ever tinkered with the command php artisan route:list, you'd notice a specific route /livewire/livewire.js.

GET|HEAD  livewire/livewire.js ... Livewire\Mechanisms › FrontendAssets@returnJavaScriptAsFile

For the most part, your web server is quite unworries by this. But hey, the universe isn't always in our favor, right? Problems pop up when you get ambitious and decide to play around, perhaps setting custom headers for JavaScript files or making other tweaks.

Here's a typical Nginx configuration that you might have come across:

location ~* \.(css|gif|ico|jpeg|jpg|js|png|svg|webp|woff2)$ {
expires 7d;
    add_header Cache-Control "public, no-transform";

    try_files $uri =404;

This is where the main problem arises.

The issue here is that this configuration thinks that requests for JavaScript files, like /livewire/livewire.js, would naturally mean the Nginx server should look for a static file in the filesystem. But here's the catch: Livewire is a trickster! It serves this file on-the-fly and it doesn't physically exist on the server. It uses route to dynamically load the javascript.

Our friend Nginx, unfortunately, isn't in on this secret. Unable to locate this file, it promptly (and rather grumpily, I might add) throws a 404 error.

Fix for /livewire/livewire.js 404 Error in Nginx

Our problem isn't insurmountable. In fact, the solution is rather neat and concise. Here's what you need to do.

Before you delve into the block of code in your Nginx configuration that sets custom headers (like the one mentioned above), insert the following lines:

location = /livewire/livewire.js {
    expires off;
    try_files $uri $uri/ /index.php?$query_string;

Above code will tell nginx to redirect to laravel main core file for getting the javascript. Just try to find the file and if you can't, redirect to the main index file with the given query parameters."

Fixing livewire/upload-file Issue

As i told earlier livewire mostly used dynamic route and nginx look for the path and returns 404 error.

If dynamic images are returning a 404 error in your Nginx setup and you believe it's related to how the server is processing specific URLs, you can adjust the Nginx configuration to handle these specific requests.

Let's take an example of the URL (http://sage.test/livewire/upload-file?...), I assume you want Nginx to pass such requests to the index.php script, similar to what you did with the /livewire/livewire.js route.

Here's a possible configuration rule for handling dynamic image requests:

location ~* ^/livewire/upload-file {
    expires off;
    try_files $uri $uri/ /index.php?$query_string;

Add this rule to your Nginx configuration file, then test the configuration and reload Nginx:

sudo nginx -t
sudo systemctl reload nginx
Follow @LaravelSage on X → Follow @LaravelSage on Facebook →
Aniket Singh

Aniket Singh

View All Articles

Full-stack developer with a knack for Merging creativity with technical expertise for standout solutions.

Related Articles

data_forget Helper for Laravel

data_forget Helper for Laravel

Since Laravel version 10.15, there is a new utility function called data_forget that allows you to remove keys from an array or object using a "dot" notation.

Laravel Tenant Application with Tenancy

Laravel Tenant Application with Tenancy

You can make your Laravel app multi-tenant using the Tenancy for Laravel Tenant package. This tenancy package lets you make any Laravel application multi-tenant without rewriting it.

Top Laravel Packages for Building Powerful Applications

Top Laravel Packages for Building Powerful Applications

Are you ready to take your Laravel skills to the next level and build extraordinary applications? Look no further! In this blog post, we will unveil a treasure trove of top packages that will revolutionize your development process.

Subscribe for 20+ new Laravel tutorials every week

You can unsubscribe at any time. You'll also get -20% off my courses!

© 2024


Laravel Sage

   |    Privacy Policy