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