Livewire: 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