Livewire is not defined after install

[JustSteveKing]

• Jetstream Version: 1.0
• Laravel Version: 8.0
• PHP Version: 7.4.3
• Database Driver & Version: MySQL 5.7
• Node version: latest

Description:

After installing using the new Laravel installer, data is not being reflected in the UI for /user/profile

After publishing all Jetstream assets I tried to see where this may be happening but it wasn't clear. However, I am getting the console error: Uncaught ReferenceError: Livewire is not defined at profile:626. All npm assets have been installed and everything else, including dropdowns and registration works.

If it helps in anyway, I am also using Vessel for a docker environment at the moment, and that is using version: 5.0

Steps To Reproduce:

• Create a new Laravel install: laravel new app --jet --stack=livewire
• cd app
• npm i
• Register a new user
• Open console and error is displayed.

[JustSteveKing]

I have figured out what the problem is here.

The initial install does not publish the livewire assets (an issue I had on upgrade) so we are trying to load @livewireScripts but they are not available at all.

This will either need an additional step in the install, or needs to be documented.

[JustSteveKing]

Didn't mean to close 😆 sorry!

[stevebauman]

Hi @JustSteveKing,

I'm not able to reproduce this. It's not mandatory to publish the Livewire scripts, only the applications assets:

After installing your Jetstream stack, you should compile your frontend assets:

npm install && npm run dev

It seems you've only ran npm i which will not publish the applications assets, only install them.

Give that a shot 👍

[JustSteveKing]

@stevebauman I ran and install and build - but the problem was the step for livewire assets was not published.

I have resolved this issue, but it wasn't in the install guide, so thought I should leave the issue open so it can be resolved.

[stevebauman]

@stevebauman I ran and install and build - but the problem was the step for livewire assets was not published.

Ok, but the Livewire assets do not need to be published. Livewire registers its own asset route in Laravel and returns the script there:

https://github.com/livewire/livewire/blob/b994138d2afa611ef3ed7a495b0fa4de4ec25930/src/LivewireManager.php#L130-L143

https://github.com/livewire/livewire/blob/b994138d2afa611ef3ed7a495b0fa4de4ec25930/src/LivewireManager.php#L175-L177

There is no additional step needed. Again, I'm not able to reproduce this.

[calebporzio]

@stevebauman is right.

Publishing Livewire's assets is only required for applications that need complete control over the frontend assets. I actually DON'T recommend publishing them. (because you have to keep them up to date)

Is it possible that you are serving the application from a subdomain? Or a non root path? Like "/app/" or something/

In that case, take a look at these docs for yow to configure a specific domain or path for the assets to reference: https://laravel-livewire.com/docs/2.x/installation (Under the "Configuring The Asset Base URL" section)

[JustSteveKing]

Thanks @calebporzio and @stevebauman

So I am using docker on a main directory, no subdirectories. Not sure what's going on there!

I will have a look and see what's going on. I had issues from a clean install, and the only thing that worked was publishing the assets.

[calebporzio]

@JustSteveKing - maybe try a new laravel install (no jetstream), see if this problem still persists for you, then move this issue over to livewire/livewire.

Something tells me this has nothing to do with Jetstream. Thanks!

[JustSteveKing]

No problems @calebporzio thanks!

[LTroya]

I have the same issue. I don't know if it was because I installed laravel and then install jetstream

I can see the livewire script on the page

This is a fresh laravel 8 installation. What could be the problem?

I will appreciate any hint. Thanks

[LTroya]

Looks like the assets have to be published with the following command in order to work the way I install jetstream:

php artisan livewire:publish --assets

After running that, everything works

[stevebauman]

Hi @LTroya,

Are you running your application in a sub-directory?

For example, http://laravel8.io/dir/?

[LTroya]

Hi @stevebauman,

No, I am using nginx to run my site. Here is my nginx conf

Looking into the network tabs, I saw that livewire was expecting to be in public/livewire/livewire.js.

Was that an unnecessary step to solve the problem?

[JustSteveKing]

This has now happened to me on 2 separate fresh projects. No sub directory, nothing done, simply installed and ran migrations.

Steps taken:

• laravel new app --jet --stack=livewire
• cd app
• npm install
• npm run dev
• php artisan migrate
• Register and Login
• Navigate to Jetstreams /user/profile route
• No data in profile form, and won't save.
• Open console, wire is not defined.
• Publish assets for LiveWire
• Problem solved.

Unfortunately this does seem to be a Jetstream problem no a LiveWire problem. I am also not the only one to have noticed this.

The downside to how I fixed this issue, I have to republish assets when new components are created.

[stevebauman]

Sorry @JustSteveKing, I followed all of your steps exactly one-by-one, and I don't receive this issue. Profile information exists and all forms work properly. No console errors or issues.

What hosting environment are you using? I'm on macOS using Laravel Valet (nginx).

[ryanmortier]

@stevebauman can you try using the built-in PHP server with php -S localhost:8080.

I'm having the same issue in #236

[stevebauman]

@stevebauman can you try using the built-in PHP server with php -S localhost:8080.

Bingo! I encounter this issue when using the built-in PHP server as you mention. Let me troubleshoot this quick👍

Thanks @ryanmortier!

[JustSteveKing]

@stevebauman I'm using Vessel for a docker environment in a windows machine inside WSL2 (Ubuntu 20.04)

I tried several ways including artisan serve, but had the same issues each time.

[stevebauman]

@ryanmortier Ah okay I've done some playing. Unfortunately using the built-in PHP web server simply won't work. It appears that it handles routing file requests differently and doesn't actually allow the Laravel router to handle returning the Livewire.js contents. Using php artisan serve resolves this issue. I don't think you'll be able to work around this unless you write your own router implementation specifically for the built-in PHP web server.

@JustSteveKing This is definitely a routing issue. Livewire is unique with how it loads its assets. It leverages Laravel's router to return the JS file contents as if it were actually located in the public/ directory as a resource. I'm wondering if there's an issue with how Vessel is routing these requests.

I was able to test this easily by creating my own route in my routes/web.php file and seeing if the server returns any response by visiting localhost:8080/livewire/livewire.js:

// routes/web.php

Route::get('/livewire/livewire.js', function () {
    echo 'Works';
});

Give that a shot -- and if it doesn't work, it's an issue with how Vessel configures it's web server.

[ryanmortier]

Cool, thanks for the explanation. I don't have an issue using php artisan serve.

[JustSteveKing]

Thanks @stevebauman I will give that a go!

[LFTroya]

Hi @stevebauman where is that route be declared? I am looking into my routes and didn't find it. Maybe we need to publish a service provider or something like that.

[stevebauman]

@LTroya You must copy and paste that route yourself in your routes/web.php file and then attempt to visit it with your web browser.

If you get a 404, then the issue is with your web server.

Hope this helps!

[LFTroya]

@stevebauman Oh, I tried that and works. Sorry if my question was clear. I mean the content of the route.

Is there a way to help you to debug this? I tried again in an existing project and publish livewire assets because of the same error.

[stevebauman]

@LTroya The route is declared in the Livewire service provider.

What are you using as a web server to run your app locally?

[LTroya]

I am using nginx in a docker enviroment.

This is my configuration: https://hub.docker.com/repository/docker/ltroya/laravel-docker

And this is my nginx config: https://gist.github.com/LTroya/c6496075033c8b6e15fdaaf0d9584482

I will check the service provider, thanks a lot!

[LTroya]

Hi @stevebauman,

Route::get('/livewire/livewire.js', function () {
    echo 'Works';
});

That snippet you posted helps me to find the solution, it was a nginx problem but I haven't found how to solve it. If I tell nginx to use the php socket to resolve the js files, I can't import any js from public folder. If I use a cdn it works.

This is what I add to nginx to livewire be found.

location ~ \.js$ {
        try_files $uri /index.php =404;

        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Host $http_host;
        proxy_set_header        X-Forwarded-Proto $scheme;

        fastcgi_pass app:9000;
        fastcgi_index index.php;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        fastcgi_param SCRIPT_FILENAME $request_filename;
        #fixes timeouts
        fastcgi_read_timeout 600;
        include fastcgi_params;
    }

Do you have any hint about how to solve it? I will appreciate it!

[LTroya]

For the time being, I change the location of my nginx to this

location ~ (livewire.js|\.php)$ {
     # The same configuration as above
}

It works but I don't know if there is a better way to do this.

[muharremkackin]

This has now happened to me on 2 separate fresh projects. No sub directory, nothing done, simply installed and ran migrations.

Steps taken:

• laravel new app --jet --stack=livewire
• cd app
• npm install
• npm run dev
• php artisan migrate
• Register and Login
• Navigate to Jetstreams /user/profile route
• No data in profile form, and won't save.
• Open console, wire is not defined.
• Publish assets for LiveWire
• Problem solved.

Unfortunately this does seem to be a Jetstream problem no a LiveWire problem. I am also not the only one to have noticed this.

The downside to how I fixed this issue, I have to republish assets when new components are created.

I tried install LiveWire with composer and it also not defined in there if I do not share assets

[stevebauman]

@LTroya It seems that some web servers don't handle the default route that Livewire defines very well, due to the .js extension and it not being an actual file residing on the server.

Livewire is basically faking that the file exists by using the route as a proxy.

Most Nginx configs I've seen will attempt to return the contents of an actual file existing on the server, rather than attempting to retrieve the files contents from the response of the PHP application (in this case myapp.com/livewire/livewire.js).

I think this route URL should change on Livewire itself. To my knowledge, <script> tags can load scripts from locations that do not include the .js extension.

Basically, we need:

<script src="/livewire/livewire-core"/>

Instead of:

<!-- The below file doesn't actually exist. -->
<script src="/livewire/livewire.js"/>

This would allow all web servers to handle the request normally. I'm going to see if this is a possible solution, and if so, I'll submit a PR to the core Livewire repo 👍

[LTroya]

@stevebauman Thank you very much for the explanation and your help, I learnt a lot of things trying to solve the problem!

[crazedVic]

I am running php artisan serve on windows where i have jetstream with livewire support installed. Posting any Jetstream profile pages absolutely will not work unless I publish the assets php artisan livewire:publish --assets , otherwise I get a 404 popup.

[mikegk]

Just ran into the same issue. Remember to add

document.addEventListener('livewire:load', function () { //Your native JS here })

before using the Livewire Api.

[dirtbikr]

Just ran into the same issue. Remember to add

document.addEventListener('livewire:load', function () { //Your native JS here })

before using the Livewire Api.

This was what I was missing, everything is perfect now, thank you so much.

[urvashiblog]

Just ran into the same issue. Remember to add

document.addEventListener('livewire:load', function () { //Your native JS here })

before using the Livewire Api.

In which file, these two line are to be added?

[limkuncui]

I just do a fresh install latest laravel version with jetstream. Looks like I got the same issue. I notice every page console log have Livewire is not defined error.

console error log: GET http://localhost/vendor/livewire/livewire.js?id=c69d0f2801c01fcf8166 net::ERR_ABORTED 404 (Not Found) dashboard:337 Uncaught ReferenceError: Livewire is not defined at dashboard:337:27

The profile page doesn't have name and email pre filled may be due to this error as well.

console error log: Failed to load resource: the server responded with a status of 404 (Not Found) profile:770 Uncaught ReferenceError: Livewire is not defined at profile:770:27

how can I fix this?

[limkuncui]

btw I forgot to mention that I'm running on Windows with apache server env.

I Fresh install latest Laravel 9.22.1 with jetstream and this problem still exists !! the console error: Ilivewire is not defined because it can't locate livewire.js file. It doesn't exists right after installation with jetstream.

After reading livewire installation/configuration at: https://laravel-livewire.com/docs/2.x/installation I run the following at console:

php artisan livewire:publish --assets

Copying directory [laravel_project\vendor\livewire\livewire\dist] to [laravel_project\public\vendor\livewire] including livewire,js

php artisan livewire:publish --config

Copying file [laravel_project\vendor\livewire\livewire\config\livewire.php] to [laravel_project\config\livewire.php]

edit laravel_project\config\livewire.php 'asset_url' => env('ASSET_URL'),

edit laravel_project.env file and add ASSET_URL=http://your_website_public_url

php artisan config:cache

after the fresh installation the livewire.js script is linked starting with /vendor/livewire/livewire.js . I think the livewire.js script is better linked directly starting with http://your_website_public_url/ for better compatibility with windows. After I do the above steps the profile page have name & email pre-field correctly and no console log error.