Livewire 404: GET http://localhost/livewire/livewire.js net::ERR_ABORTED 404 (Not Found)

Question

I'm learning how to use livewire and laravel, I was trying to bind some data through an input I wrote this code:

home.blade.php:

<html>
<head>
    <title>Home</title>

    @livewireStyles
</head>
<body>
    @livewire("hello-world")

    @livewireScripts
</body>
</html>

hello-world.blade.php:

<div>
    <input wire:model="nome" type="text">
    <br>
    Hello {{ $nome }}
</div>

HelloWorld.php:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
    public $nome = 'Name';
    public function render()
    {
        return view('livewire.hello-world');
    }
}

It is running on Apache 2.4 But if I open the browser console when I load the page I get:

(index):29 GET http://localhost/livewire/livewire.js?id=c1db26b321e994f87254 net::ERR_ABORTED 404 (Not Found)

(index):35 Uncaught ReferenceError: Livewire is not defined at (index):35

I'm following official docs and screencasts, I tried to follow step-by-step all the instructions but it didin't work either. Maybe I did something wrong during installation, but I don't think so, because I just hit:

composer require livewire/livewire

so it should be ok. Any clues?

GitHub repo: learningLaravel

Please can you copy and paste the code in to your question rather than linking to it. — Rwd, Sep 11 '20 at 07:30
Sorry I accidently posted an incomplete question. What do you mean with "What post is your app running?"? — aleemont, Sep 11 '20 at 07:30
If you need it I can make a repo on gitHub so you can go through all the files of the project — aleemont, Sep 11 '20 at 08:31
With what URL are you accessing your project? `http://localhost`? — Clément Baconnier, Sep 28 '20 at 22:52
I'm getting the same issue can you please tell me how to solve this issue...? — Neeraj Tangariya, Dec 29 '20 at 15:17

wepe · Answer 1 · 2020-11-02T16:21:34.820

16

may you can try this:

run: php artisan livewire:publish

then open config/livewire.php change 'asset_url' => null to 'asset_url' => 'http://localhost'

edited Nov 02 '20 at 16:21

answered Nov 02 '20 at 16:15

wepe

169
5

2

If you are running multiple projects use 'http://localhost/projectFolder/public' worked for me – husnain zafar Sep 29 '21 at 12:01

score 5 · Answer 2 · answered Jul 24 '21 at 21:29

I was going through the same challenge ... please do this to sort you out. run

php artisan livewire:publish

Open the config/livewire.php edit the line

'asset_url' => null

, to read

'asset_url' => 'http://localhost/your_project/public/',

run the artisan commands to clear the cache and then test. You could copy from here if you are using Linux.

php artisan cache:clear;php artisan config:clear;php artisan route:clear;php artisan view:clear;

Enjoy coding!

score 4 · Answer 3 · answered Feb 16 '21 at 14:04

let dive deep in and find the solution your request url you can check from your network tab

GET http://localhost/livewire/livewire.js net::ERR_ABORTED

your base url

GET http://localhost/

it should be as

GET http://localhost/your_project_directory

now correct url

GET http://localhost/your_project_directory/livewire/livewire.js

or

GET http://localhost/your_project_directory/public/livewire/livewire.js

Solution:

app/config/livewire.php

'asset_url' => env('APP_URL', 'http://localhost'),

also update the APP_URL accordingly in .env file

you should clear your cache and config then try I hope this will be fixed the issue

score 3 · Answer 4 · answered Oct 20 '20 at 23:33

While the answer by Zenabus.dev is listed in the Livewire docs as best practice now, I felt this is only a workaround and does not make clear why this is needed, so I thought I'd elaborate on this a bit and describe what a common reason for the 404 may be and what other options you have.

By default, Livewire registers a route for livewire/livewire.js and requires the request for that URL to go through the Laravel routing. The LivewireJavaScriptAssets controller will then pull the file from the vendor directory and serve it to the user.

If everything worked fine on the dev system and stops working on production like it did for me, chances are that your server / vhost configuration (Apache, Nginx, ...) has a special handling set for Javascript files which will interfere with this process and will try to serve those files directly from your document root, effectively bypassing Laravel.

Please check your server configuration and make sure www.yourapp.com/livewire/livewire.js is actually routed through Laravel (via the public/index.php file).

If it is not, you can either remove any special handling of js files, make sure the rules are only applied if the files actually exist or if you cannot do either, you can resort to publishing the assets as described in https://laravel-livewire.com/docs/2.x/installation#publish-assets.

As a side node, I would personally not add the publish command on post-autoload-dump as described in the docs, but rather on post-update-cmd. I am not comfortable with the assets being published on the production server and would rather do this on the dev system only when needed, and then push the public files to the repository.

score 3 · Answer 5 · answered Feb 07 '21 at 15:34

3

In my case what wepe commented worked, only that instead of 'asset_url' => 'http://localhost' i put 'asset_url' => url('/')

answered Feb 07 '21 at 15:34

edu.dev

31
2

Edit: This doesn't work in production, better to use the full path in development mode – edu.dev Feb 10 '21 at 12:41
Thanks! Worked for Laravel 8 as well :) – shasi kanth Aug 02 '21 at 10:14

score 3 · Answer 6 · answered Jan 27 '22 at 16:32

To others who experience the same error and nothing above helps.

In my case I had an nginx server that was set to cache and deliver static files like .css and .js and whenever I tried to access a route that had .js then the nginx was trying to find if the file existed and if not, to deliver a 404 error code and prevented laravel to do his thing.

The nginx setting was like this:

location ~* \.(?:css|js)$ {
10         expires 1M;
11         access_log off;
12         add_header Cache-Control "public";
13     }

And i removed the |js.

Just to say that this is the ideal place to start when trying to solve this issue. Make sure the server is set up to serve the files and work from there. You can run any artisan command you like but if nginx isn't going to play nicely, you're stumped no matter what. — Zakalwe, Apr 28 '22 at 15:56

score 2 · Answer 7 · answered Apr 17 '21 at 00:27

2

The following command will publish the assets to your public folder and should solve the 404 issue.

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

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

answered Apr 17 '21 at 00:27

pimarc

3,621
9
42
70

This fetches the asset the the livewire.js is still missing, i have the livewire.js.map file instead – jeesoon Apr 26 '21 at 05:55

score 1 · Answer 8 · answered Aug 11 '21 at 07:37

1

open this File confi\livewire.php, then add your public directory path, Replace this 'asset_url' => null,

to

'asset_url' => https://www.yourporject.com/public,

answered Aug 11 '21 at 07:37

Adnan Baig

19
1

1

This answer was already given here: https://stackoverflow.com/a/68513944/5468463. Please do not repeat – Vega Aug 11 '21 at 10:56

score 1 · Answer 9 · answered Mar 22 '22 at 12:54

php artisan livewire:publish does NOT throw an error, if the current user does not have permissions to copy the files.

So the public/vendor/livewire folder was missing even after the livewire publish command said it had created it.

Fixing my permissions and
re-running php artisan livewire:publish

did the trick for me.

score -1 · Answer 10 · answered Oct 07 '20 at 07:45

-1

I am learning Laravel Livewire too and I also encountered the same problem. My problem was solved by running

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

You can refer to this link on github: Problem loading Livewire.js

answered Oct 07 '20 at 07:45

Zenabus.dev

1
1

[Already suggested above](https://stackoverflow.com/a/67133600/1255289) – miken32 Dec 29 '21 at 19:44

score -1 · Answer 11 · edited Aug 02 '21 at 19:49

-1

I am using Xampp with PHP8. I had to modify the config/livewire.php like below:

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

where config('app.url') refers to: 'url' => env('APP_URL', 'http://localhost'), in my config/app.php file, that internally refers to: APP_URL=http://localhost/laravel in my .env file.

edited Aug 02 '21 at 19:49

Dharman

30,962
25
85
135

answered Aug 02 '21 at 19:43

shasi kanth

6,987
24
106
158

score -1 · Answer 12 · answered Oct 02 '21 at 23:21

-1

In config/livewire.php file

'asset_url' => url('/'),

answered Oct 02 '21 at 23:21

user2511140

1,658
3
26
32

Livewire 404: GET http://localhost/livewire/livewire.js net::ERR_ABORTED 404 (Not Found)

12 Answers12