
Fix the /livewire/livewire.js 404 not found error
To fix the 404 not found error your browser receives for /livewire/livewire.js (most likely on your production server), there are high chances that you will have to look at your web server’s configuration for the concerned site.
Why /livewire/livewire.js returns a 404 not found error
Livewire serves its JavaScript itself. If you run php artisan route:list
you will see a route matching /livewire/livewire.js.
GET|HEAD livewire/livewire.js ................................. Livewire\Mechanisms › FrontendAssets@returnJavaScriptAsFile
For all I know, your web server won’t mind about this. But problems can occur if you ever decide to, for instance, set custom headers for JavaScript files.
Here’s my Nginx configuration:
location ~* \.(css|gif|ico|jpeg|jpg|js|png|svg|webp|woff2)$ { expires 7d; add_header Cache-Control "public, no-transform"; try_files $uri =404; }
The problem occurs because the configuration you provide is set up in such a way that when a request was made for /livewire/livewire.js, Nginx attempts to serve it as a static file and was checking if it existed on the filesystem.
But it doesn’t! This file is served by Livewire. Nginx can’t find it, so it responds with a 404 error.
Luckily, the fix is easy.
How to fix /livewire/livewire.js 404 not found error
Using Nginx
Right before the location block that sets your custom headers, add this one, which will prevent Nginx from interfering with this specific location.
location = /livewire/livewire.js { expires off; try_files $uri $uri/ /index.php?$query_string; }
By bundling Livewire into your JavaScript
In Livewire v3, the code is automatically injected unless you instructed otherwise.
Fortunatelly, it’s possible to not leverage the route that Livewire exposes for its JavaScript, and do things in a more traditional way.
Go into your resources/js/app.js file, and add this code:
import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm' Livewire.start()
Livewire will be initialized and it will also start Alpine.js, which is included by default in Livewire v3.
Did you like this article? Then, keep learning:
- Fix the 419 Page Expired error commonly encountered in Laravel applications
- Learn to add Alpine.js, included with Livewire v3, to any Laravel project
- Understand Alpine.js better as it complements Livewire in frontend interactions
- Create a persistent chat widget leveraging Livewire v3 features
- Simplify writing Livewire components with Laravel Volt's single-file components
- Discover how to create SPA-like navigation in Livewire v3 using wire:navigate
- Improve performance by preventing unnecessary Livewire component re-renders
- Learn how to forcibly re-render Livewire v3 components to solve reactivity issues