14

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 ran composer require livewire/livewire so it should be ok.

Improve this question
9
  • what post your application is running .? Commented Sep 11, 2020 at 7:27
  • Please can you copy and paste the code in to your question rather than linking to it. Commented Sep 11, 2020 at 7:30
  • Sorry I accidently posted an incomplete question. What do you mean with "What post is your app running?"? Commented Sep 11, 2020 at 7:30
  • Ok sir, I posted it. @Rwd Commented Sep 11, 2020 at 7:38
  • What version of Livewire are you using? Commented Sep 11, 2020 at 7:41

14 Answers 14

Reset to default
18

may you can try this:

run: php artisan livewire:publish

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

If you are running multiple projects use 'localhost/projectFolder/public' worked for me
14

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

Improve this answer

3 Comments

This fetches the asset the the livewire.js is still missing, i have the livewire.js.map file instead
The only answer that helped me, thank you so much!
This fixed things when livewire was working on development but not production. Symptom: the initial page load was fine, but no pollings, because the livewire directory + JS file were missing.
6

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!

Improve this answer

Comments

5

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

  1. your base url

GET http://localhost/

it should be as

GET http://localhost/your_project_directory

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

Improve this answer

Comments

5

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.

Improve this answer

2 Comments

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.
You saved my day. I just removed the complete block because I do not want nginx to treat URLs different just because of extension. Now everything works as expected.
4

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.

Improve this answer

Comments

3

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

Improve this answer

1 Comment

Edit: This doesn't work in production, better to use the full path in development mode
2

In livewire 3 you can register route and assets like this in web.php file

use Livewire\Livewire;

Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/custom/livewire/update', $handle);
});

Now, instead of using /livewire/update, Livewire will send component updates to /custom/livewire/update.

same you can configure assets url

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

Now, Livewire will load its JavaScript like so:

<script src="/custom/livewire/livewire.js" />

for more information read this installation guide

Improve this answer

Comments

1

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.

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

did the trick for me.

Improve this answer

Comments

1

If the error occurs on nginx server, follow the steps:

In the folder: /etc/nginx/sites-available in the config file of the website, add those lines of code:

location = /livewire/livewire.js {
  expires off;
  try_files $uri $uri/ /index.php?$query_string;
}

and then do

systemctl restart nginx
Improve this answer

1 Comment

Thanks @larstton this worked, by default i guess it didnt try the calling php, or there might be some caching issue i'm unaware off.
-2

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

Improve this answer

1 Comment

Already suggested above
-2

In config/livewire.php file

'asset_url' => url('/'),
Improve this answer

Comments

-2

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.

Improve this answer

Comments

-2

This worked for me: I also has the same problem in Livewire 3 and I fixed it. Don't know whether its a right method or not. But I will share it to you.

After installing Liveware 3, navigate to

vendor/livewire/livewire

there you can see a folder named 'dist'. Copy the folder and paste it inside the Laravel public folder. Afterwards, rename the 'dist' folder inside the public folder to livewire. In that folder you can see the file named livewire.js.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.