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