Problem loading Livewire.js

[kennyhorna]

It's likely to be a simple thing but I can't manage to solve it on my own smh.

On my local env it's working fine just doing this:

...
    @livewireAssets
</body>

This of course load the file properly as it should. Now, after I deployed the site (using Forge) it didn't load the file at all with the relative path. My network tab (Chrome) says:

Failed to load resource: the server responded with a status of 404 (Not Found)
(index):14 Uncaught ReferenceError: Livewire is not defined
at (index):14

I though it might be the directory/file that isn't accesible but when I hit that path adding the IP at the beginning it loads the js file just fine (http://165.227.80.80/livewire/livewire.js?)id=8456629107e9ab1c518f)

So, then checking the docs I saw that you can customized the base_url initializing the directive with a custom url, so I tried that also:

    @livewireAssets(['base_url' => ENV('APP_URL'));

But even with the full path the file isn't loading:

This is the link to the site.

Has anyone faced this problem before?

[tillkruss]

#241 should fix this.

[lancepioch]

@kennyhorna Is the latest version working for you with that fix?

[lancepioch]

@kennyhorna Let us know if this is still an issue and we'll look into it, otherwise we think that tilkruss did a good job of fixing it.

[BenSampo]

@kennyhorna Did you get to the bottom of this? I have the same issue.

[calebporzio]

Can you post more info please?

[lancepioch]

@BenSampo Does this occur with the latest version? If so, can you help us drill down to figure out the core issue?

[BenSampo]

@lancepioch Yes it was on the latest version. I tried to put an isolated case together, as the original issue was on a client project which I can't share, but I wasn't able to reproduce it again in a different context. I'm guessing that means there's a conflict somewhere but I haven't had a chance to take a look again.

The issue was as above. Followed the standard installation steps. On local (Valet) site this was working fine. As soon as I deployed it to a Digital Ocean instance (via Forge) the Livewire JS refused to load. Stranger still I was able to load the JS if I navigated to it directly, but when it was called in via a script I saw the issue as in the screenshot above (404: Aborted).

[lancepioch]

Is there anyway you can separate the code that you can share privately? Or if you are able to take the same dependencies and recreate it in a newly generated livewire app?

[ninthspace]

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.

[mpociot]

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 👍

[christophrumpel]

Same for me on Laravel Forge. Thanks for the tip.

[anhofmann]

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?

[ambrosethebuild]

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

[eugenioliveira]

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.

[josegus]

Using livewire 2.2, I have an admin panel under "app.com/admin", weird thing is local using valet works perfectly, but on production server the livewire js path is broken

Edit: publishing the assets worked for me, now livewire js path is resolved to "app.com/vendor/livewire/livewire.js"

[v1ncen]

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.

[Keshabpal9933]

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

[paul-adams-985]

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

[AlfredoMarenco]

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,

[yeasin-Ahammed-apon]

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

[yeasin-Ahammed-apon]

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

[milazmidza]

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

[RomkaLTU]

Same here, after update to 2.3.17 out of the blue, 404 error on production :/

[joshhanley]

@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)?

[RomkaLTU]

@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: #2338 (comment)

[shawndreck]

I believe the issue has to do caching on the server. This answers elaborates on this issue https://stackoverflow.com/a/64454679/585651

In essence, the request to livewire.js never gets to PHP since it caught by webserver (nginx in my case).
The solution is to either publish livewire asset files into your document root. As long as the file exists in the under document root, it should be accessible.

Hope the above provides hint/solution. Took me a while to get to this solution.

[HyperCC]

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

OMG i love you ❤
This works for when you use web domains, I don't know how I didn't realize it before 😅, thank you.

[RhysLees]

For me i had to make sure that my js was below the livewire js import

[tiagoFlach]

'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' => '../..',

[harsh414]

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

using url( ) in config files causes error in using artisan

[masakik]

I am using

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

[rosssinicolas2190]

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

using url( ) in config files causes error in using artisan

same here any suggestions

[harsh414]

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

using url( ) in config files causes error in using artisan

same here any suggestions

i tried 'asset_url' => 'http://localhost/project_name/public ' for testing environment..
and 'asset_url' => null, in production and it worked perfect

[rosssinicolas2190]

harsh414

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

using url( ) in config files causes error in using artisan

same here any suggestions

i tried 'asset_url' => 'http://localhost/project_name/public ' for testing environment..
and 'asset_url' => null, in production and it worked perfect

i tried and coment later, thanks

[rosssinicolas2190]

this wok very well

harsh414

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

using url( ) in config files causes error in using artisan

same here any suggestions

i tried 'asset_url' => 'http://localhost/project_name/public ' for testing environment..
and 'asset_url' => null, in production and it worked perfect

i tried and coment later, thanks

[harsh414]

this wok very well

harsh414

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

using url( ) in config files causes error in using artisan

same here any suggestions

i tried 'asset_url' => 'http://localhost/project_name/public ' for testing environment..
and 'asset_url' => null, in production and it worked perfect

i tried and coment later, thanks
Great :)

[romo2613]

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.

I had the same problem, locally it works perfectly. But when taking it to the server for some reason it fails. This solved my problem, Thanks!

[smcnepal]

Same for me on Laravel Forge. Thanks for the tip.
even with hostinger i'm facing the same problem

[webboty]

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

[thedanmwangi]

It's likely to be a simple thing but I can't manage to solve it on my own smh.

On my local env it's working fine just doing this:

...
    @livewireAssets
</body>

This of course load the file properly as it should. Now, after I deployed the site (using Forge) it didn't load the file at all with the relative path. My network tab (Chrome) says:

Failed to load resource: the server responded with a status of 404 (Not Found)
(index):14 Uncaught ReferenceError: Livewire is not defined
at (index):14

I though it might be the directory/file that isn't accesible but when I hit that path adding the IP at the beginning it loads the js file just fine (http://165.227.80.80/livewire/livewire.js?)id=8456629107e9ab1c518f)

So, then checking the docs I saw that you can customized the base_url initializing the directive with a custom url, so I tried that also:

    @livewireAssets(['base_url' => ENV('APP_URL'));

But even with the full path the file isn't loading:

This is the link to the site.

Has anyone faced this problem before?

This is actually a very nice way of tackling the issue.

The problem is caused by Livewire's default asset_url.
The asset url is set to the localhost's url, which does not apply when you deploying to Production or are using XAMPP/WAMP for development.
It works only when the project is served from 'php artisan serve'.

The fix to this issue is: Publishing the Livewire's config file and Change the default set asset_url to APP_URL. (on line 57)

This will ensure that Livewire works with Production and Laravel apps hosted on XAMPP/WAMP.
NOTE: It may have an issue with launching your app with 'php artisan serve' because the urls do not match.

[hossam-eddine]

@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

[thedanmwangi]

@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.

[scqolbu24]

thanks, it works for me.
php artisan vendor:publish --tag=livewire:config
php artisan livewire:publish --assets
then follow these steps

@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.

[hasyim404]

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

thankss, its work for me in hosting, and work in laravel 9

[kennyhorna]

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

[owf18916]

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 did solve the loading js issues with this solution aswell,
however the update request by using POST mehod to the server is remain the problem for me
did you experienced the same issue ?

[mehrancodes]

I fixed this for Livewire v3 by having my own custom route URL registered inside the AppServiceProvider@boot, which works for loading the assets and calling the update endpoint.

Livewire::setScriptRoute(function ($handle) {
    return Route::get('/custom/livewire/livewire-js', $handle);
});

Source: https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine

[jeremykenedy]

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

Took me days to find this answer