Get your next remote job on LaraJobs.
1 contributor Edit on GitHub Livewire

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

Table of contents:

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.

Benjamin Crozat

Written by Benjamin Crozat

Indie hacker, blogger, and AI enthusiast building things with the TALL stack. 🔥

Follow me on:

Recommended articles

Create a persisting chat widget using Livewire v3 →

Discover how to craft an ever-present chat widget with Livewire v3's persistence features in Laravel - step-by-step guide included.

Shared on Aug 10, 2023 fly.io

Create a SPA in seconds using wire:navigate in Livewire v3 Create a SPA in seconds using wire:navigate in Livewire v3

Discover how to boost the speed of your Laravel apps, mimicking an SPA, without building an API, using Livewire v3 and the new wire:navigate attribute.

Published on Aug 28, 2023

Laravel Volt: simplify how you write Livewire components Laravel Volt: simplify how you write Livewire components

Laravel Volt is a great new addition to Laravel's extensive ecosystem that brings single-file components à la Vue.js to Livewire. Let me help you get started.

Modified on Aug 12, 2023

Alpine.js: a lightweight framework for productive developers Alpine.js: a lightweight framework for productive developers

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Published on Jan 26, 2023

Add Alpine.js to any Laravel project Add Alpine.js to any Laravel project

Alpine.js is a great companion for a Laravel app. Let's see how you can add it in any project.

Published on Oct 13, 2023

Gold sponsors New

  • Wire Elements
    Beautiful handcrafted Livewire components.
    Check site
Your business here

Partners

If you buy from one of my partners below, I will be compensated at no cost to you. These are services I use or used, and 100% stand behind.

  • Scalable and reliable VPS hosting.
    Bonus: $200 of free credits
    Check site
  • The Google Analytics alternative without compromise.
    Free trial: 30 days
    Bonus: $10 off your first invoice
    Check site
  • Flare
    Track PHP and JavaScript errors in one place.
    Free trial: 10 days
    Check site
  • Keep track of your Google rankings.
    Free trial: 7 days
    Promo code: WELCOME30
    Check site
- / -