Get your next remote job on LaraJobs.
Livewire

Fix the /livewire/livewire.js 404 not found error

Benjamin Crozat
Modified on Oct 17, 2023 1 comment Edit on GitHub
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.

Wait, there's more!

1 comment

Jaan
Jaan 4mos ago

Thanks!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • ZoneWatcher
    Get instant alerts on DNS changes across all major providers, before your customers notice.
    25% off for 12 months using the promo code CROZAT.
    Try ZoneWatcher for free
  • Quickly build highly customizable admin panels for Laravel projects.
    20% off on the pro version using the promo code CROZAT.
    Try Backpack for free
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -