livewire: Problem loading Livewire.js

I had the same problem, in v1.0.12, again deploying to a DigitalOcean server (initially setup via Laravel Forge).

I resolved it by publishing the assets:

php artisan vendor:publish --force --tag=livewire:assets

(See also: #241)

The @livewireScripts blade directive is still required, but it automatically correctly fetches the assets from /public/vendor/livewire/livewire.js

I suspect there’s something in livewire.js which when executed upon load returns the 404 error, and it depends or relies on its origin URL. This would explain why fetching the URL in the browser as per OP issue (but not executing it) is successful.

Hello everyone … may i join in and post a solution no one has thought of yet.

I was experiencing this issue “livewire.js - 404 not found” too … on the NGINX server. The same app worked fine in an apache2 environment. The same app also worked fine when nginx is acting as reverse proxy and just passing the data to apache2.

So i figured the issue is not any setting in the app - it is NGINX related. And it makes absolut sense. NGINX is a very performant web server (among other things) … this is because (next to many other reason) static files are not passed on to the php interpreter, they are served and cached directly.

What is happening with livewire (unless the assets are published and actually existing on the server, so nginx can serve them) is that the livewire.js file is build/served by the laravel app … this means PHP. But in the default nginx server configuration the request never gets that far, nginx just does not find the static js file and returns the 404 … never passing the request to the laravel app.

Cutting a long story short … there is 2 solutions to fix this issue:

1.) publish the livewire.js file any any other static file, so nginx can return them.

2.) Add one line of code to the nginx config to tell nginx to check if the static file can be found on the disk/cache if not send the request to php-fpm (in our case the index.php file) so it can be build dynamically.

Here is the code … usually you may already have a directive in your nginx config that tells nginx what to do with static files … just add this line within the directive:

try_files $uri /index.php?$query_string;

So a complete directive added to the nginx server config may look like this:

location ~* \.(jpg|jpeg|gif|png|webp|svg|woff|woff2|ttf|css|js|ico|xml)$ {
       try_files $uri /index.php?$query_string;
       access_log        off;
       log_not_found     off;
       expires           14d;
}

if you only want this behavior for js files create a new directive and get js off the list in the previous example.

Voila … thats it and the solution to the issue that many experienced. This nginx configuration “fix” will also deal with other files that have the same issue.

Cheers WebBoty

'asset_url' => url('/'), this also work and it is much nicer then the above .

I just ran into this error myself.

This must have something to do with the way that my Nginx is configured (using Forge). If I use the same route, but drop the .js file extension I always get a status 200 back. But the file extension does some weird things with Nginx for me.

Anyway, publishing the assets worked 👍

Same here with Livewire 2.2.2, only on production server (non forge managed) with nginx. Publishing assets fixed it.

 php artisan livewire:publish --assets

And then adding:

"@php artisan vendor:publish --force --tag=livewire:assets --ansi"

at the end of the post-autoload-dump composer hook as specified by the docs > Publishing Frontend Assets.

#241 should fix this.

'asset_url' => url('/'), this also work and it is much nicer then the above .

This works for me, but causes a error when run composer update. I solve this using

'asset_url' => '../..',

Solucione esto en Laravel 8 en el archivo config/livewire.php en esta linea tienes que especificar la dirección de tu aplicación para que pueda cargar correctamente el @livewireScripts 'asset_url' => null,

@thedanmwangi I have published the livewire but in production it give’s me erreur the pathe “domainename/vendor/livewire/livewire.js” not found any help please

The main cause of this is that Livewire is reading form the localhost’s URL which is pre-defined by livewire. (Not sure why they decided to do that.) You can change this by:

1. Publish your Livewire’s config file on your local development. (You can find that command on Livewire’s GitHub page)
2. Open the published Livewire’s config file. It is in config/livewire.php
3. Change Livewire’s Asset URL, which is at Line 57 to ‘asset_url’ => env(‘APP_URL’),
4. Update your APP_URL which is in .env file with your full domain name url.

Let me know if this solves your issue.

i use this in my config/livewire.php file & and it perfectly works for me. 'asset_url' => "http://localhost/live_wire_1/public", by the way , that ‘live_wire_1’ is my project name. use ur project name there. /sparkle

first step: you should run php artisan vendor:publish --force --tag=livewire:assets After that, you should run your project through $php artisan serve

I stumbled over this problem while I installed Laravel 8 with livewire. I put “@php artisan vendor:publish --force --tag=livewire:assets” in my composer.json in the ‘post-update-cmd’ script. Then it worked. But it feels not like a good solution. How to do this the right way?

First of all, sorry for taking ages to reply to all of you. I did solve the issue at the time with the custom asset_url. But, for Livewire v3 this option has been removed from the config. So, I faced the issue while upgrading one of my projects.

The issue is related with Nginx, so adding an additional block to properly parse the call to the js file solved the issue. For a more detailed explanation, you can check this blog post (thanks @benjamincrozat). Pretty much:

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.

So, 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;
}

I am using

'asset_url' => config('app.url'),

@RomkaLTU what version did you upgrade from? If the session was already open, maybe try just closing the browser and logging in again? Do you have your config published? If so, there might be new keys that is causing an unintentional break, can you compare the latest config with yours and see (if you have previously published)?

I can’t say exactly what from what version I upgraded, but here is my reply on another thread: https://github.com/livewire/livewire/issues/2338#issuecomment-776689991

It’s not resolving the @livewire on my production I don’t know why, but on the local machine it’s working fine

If it’s a new install and you have not published your assets before, try clearing all caches… php artisan optimize

I was also experiencing this problem on Laravel 7. Tried this <script> Livewire.on('openTab', link => { alert('A post was added with the id of: ' + link); }) </script> Got an error stating Uncaught TypeError: Livewire.on is not a function

The i changed it from Livewire to livewire, then the error vanishes. Don’t know if this is a solution but it works for me

Worked for me too… I don’t know why, but seems like a bug.