
3 minutes read
Fix the /livewire/livewire.js 404 not found error
Introduction
If you’re hitting a frustrating 404 error when requesting /livewire/livewire.js
, especially on your production server, the good news is the fix is typically straightforward. Let’s dig in!
Why /livewire/livewire.js
returns a 404 error
Livewire serves its JavaScript dynamically. Run php artisan route:list
and you’ll spot this route:
GET|HEAD livewire/livewire.js .......... Livewire\Mechanisms › FrontendAssets@returnJavaScriptAsFile
However, certain server configurations—like mine below—can mistakenly try to handle Livewire’s JavaScript file as a static asset:
Here’s my Nginx setup:
location ~* \.(?:css|js|mjs|map|jpg|jpeg|gif|png|svg|webp|ico|ttf|woff2?)$ { expires 30d; access_log off; add_header Cache-Control "public, immutable"; }
Since /livewire/livewire.js
isn’t an actual static file, Nginx ends up giving you a disappointing 404.
Luckily, we can easily resolve this.
How to fix /livewire/livewire.js
404 errors
Fix for Nginx
Just before the code we saw above, drop in this little snippet:
location = /livewire/livewire.js { expires off; try_files $uri $uri/ /index.php?$query_string; }
Now, Nginx gracefully hands this request back to Laravel.
You could also have a regex that matches all JavaScript files but livewire.min.js:
location ~* ^(?!/livewire/livewire.min.js$).*.(?:css|js|mjs|map|jpg|jpeg|gif|png|svg|webp|ico|ttf|woff2?)$ { expires 30d; access_log off; add_header Cache-Control “public, immutable”; }
Apache fix (.htaccess)
If you’re an Apache user, update your .htaccess
with:
RewriteCond %{REQUEST_URI} ^/livewire/livewire\.js$ RewriteRule ^ index.php [L,NC]
It tells Apache, “Let Laravel handle this one, buddy.”
Using Livewire in a sub-directory or with a CDN?
If your Laravel app sits in a sub-directory, adjust config/livewire.php
to correctly route assets:
// config/livewire.php 'asset_url' => env('APP_URL') . '/subdirectory',
If you’re serving assets via a CDN like Cloudflare, make sure you exclude /livewire/*
from caching, or you’ll have other headaches!
A better way: bundle Livewire into your JavaScript
By default, Livewire v3 injects its JavaScript automatically. However, for more control, you can bundle it traditionally.
If you’re using Vite (which I recommend), adjust resources/js/app.js
:
import { createLaravelVitePlugin } from 'laravel-vite-plugin' import 'laravel-vite-plugin/plugins/livewire' import { Livewire } from 'livewire' Livewire.start()
Then disable automatic injection in your config:
// config/livewire.php 'inject_assets' => false,
Using Laravel Mix? Here’s your quick fix:
import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm' Livewire.start()
(Note: Be cautious, as paths might shift slightly between updates.)
Quick troubleshooting checklist
Still seeing 404s? Run these quick checks:
- Confirm the route exists:
php artisan route:list | grep livewire.js
- Clear caches and restart the server:
php artisan optimize:clear
& server reload. - Directly visit
/livewire/livewire.js
. If you see anything other than a 200 status, revisit your web server configuration.
Conclusion
The /livewire/livewire.js
issue typically boils down to server config confusion. But armed with these tweaks, you’re set for smooth sailing.
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
6 comments
Thanks!
You're welcome!
I've just had this issue and found that clearing the routes cache resolved the issue.
php artisan route:clear
Probably specific to you. But I'd recommend (in production) to run
php artisan route:cache
instead.Thank you!
Hope you were able to fix your issue!