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

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

Modified
Oct 17, 2023
Written by
Benjamin Crozat
3
comments
2 minutes
read

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.

About Benjamin Crozat
Benjamin Crozat

Hi! I’m from the South of France and I’ve been a self-taught web developer since 2006. When I started learning PHP and JavaScript, PHP 4 was still widely used, Internet Explorer 6 ruled the world, and we used DHTML to add falling snow on websites.

Being able to educate myself for free on the web changed my life for the better. Giving back to the community was a natural direction in my career and I truly enjoy it.

Therefore, I decided to take action:

  1. I launched this blog in September 2022 with the goal to be in everyone’s Google search. I get more than tens of thousands of monthly clicks from it and even more visits overall (my analytics dashboard is public by the way).
  2. I also started growing my X (formerly Twitter) account at the same time, which has now over 7,000 followers.
  3. All the content I write is free thanks to my sponsors.

I also want to be completely free with my time and make a living with my own products. In April 2024, I launched Nobinge, a tool to summarize and chat with your content, including YouTube videos.

Believe me, I’m just getting started!

3 comments

Jaan
Jaan 1 year ago

Thanks!

Cor Cronje
Cor Cronje 8 months ago

I’ve just had this issue and found that clearing the routes cache resolved the issue.

php artisan route:clear

Mack Hankins
Mack Hankins 7 months ago

Thank you!

You need to be signed in to comment this post.
Sign in with GitHub