jetstream: Livewire is not defined after install

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

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

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

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

Just ran into the same issue. Remember to add

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

before using the Livewire Api.

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

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

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

Thanks @stevebauman I will give that a go!

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

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