Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PeterF's avatar

Jetstream dialog livewire error

Hi Smart People. I seem to have broken laravel/livewire/jetstream in some weird way. I have checked that all my composer dependencies are up to date, my AlpineJs includes are correct, but....

When I go to use the jetstream modal, either in my own code, or as part of the standard install, the cancel button breaks everything.

Specifically, if I go to the standard profile page from Jetstream scaffolding, and select 'Delete Account'. the popup appears, and I select 'Cancel'. the popup disappears, but now all click events are disabled until I reload the page.

In the javascript console I see the following,

[Error] Unhandled Promise Rejection: [object Object]
	(anonymous function)
	rejectPromise
	(anonymous function) (cdn.min.js:5:8676)
	(anonymous function) (alpinejs.js:1058)
	(anonymous function) (alpinejs.js:835)
	transition (alpinejs.js:1008)
	out (alpinejs.js:948)
	(anonymous function) (cdn.min.js:5:8621)
	Promise
	(anonymous function) (cdn.min.js:5:8593)
	(anonymous function) (cdn.min.js:5:30592)
	(anonymous function) (cdn.min.js:5:6120)
	(anonymous function) (cdn.min.js:5:30683)
	we (cdn.min.js:5:1284)
	(anonymous function) (cdn.min.js:5:1026)
	Yt (cdn.min.js:1:4880)
	Yt
	(anonymous function) (cdn.min.js:5:30628)
	r (cdn.min.js:5:16267)
	ln (cdn.min.js:1:259)
[Error] Unhandled Promise Rejection: TypeError: u is not a function. (In 'u()', 'u' is undefined)
	(anonymous function) (cdn.min.js:5:9054)
	promiseReactionJob

Any ideas what magic I have done to break the internals here.... given that the problem is in cdn.min.js, that implies I have done something to break the alpine.js under the hood..... I am still pulling 3.x.x from the unpkg.... standard stuff as per the AlpineJs install page... yet..... its broken....

All ideas warmly welcomed....

0 likes
5 replies
PeterF's avatar

I have discovered its actually Alpine transitions that are throwing the exceptions... for those AlpineJS experts here, it is in a file called x-transition.js, line 262....

el._x_transitioning = {
        beforeCancels: [],
        beforeCancel(callback) { this.beforeCancels.push(callback) },
        cancel: once(function () { while (this.beforeCancels.length) { this.beforeCancels.shift()() }; finish(); }),
        finish,
    }

The but about this.beforeCancels.shift()() is throwing the exception..... I can't believe this is a bug in Alpine, or it would be everywhere.... so it must be a clash between Alpine and something else that is causing this.... I am wondering if it is a Vite thing.... I am still no closer to fixing this several days later... so still looking for ideas.....

Sinnbeck's avatar

@PeterF if you can show a simple example of the alpine code, perhaps we can find the reason

PeterF's avatar

@Sinnbeck That's the problem, it's not my code... so the standard Laravel install with Jetstream, in the standard user profile page, the buttons on that page that are part of laravel/jetstream, they use Alpine to transition a modal in and out... and that is what is broken..... this project and code base has been going for a while, and doesn't have tests for that stuff, so I can't be sure when it broke... hence my thinking that it must be the result of a clash with something else.... like Vite or Pusher or Echo, I put all three of those in at the same time so my app.js got a little weird then maybe.....

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Because I load Alpine from CDN, but then that initialisation is for non CDN loading maybe? I don't know... my JS is not so good... hence the love of Alpine..

PeterF's avatar
PeterF
OP
3 years ago
Best Answer
Level 6

So I have fixed it. It's taken a while, but in the end, I was trying to figure out what could actually be clashing with Alpine. In the end, the obvious answer, was that Alpine was clashing with Alpine.

I think that as part of my migration to Vite, the Node package of Alpine was installed, I don't think I did it specifically, but perhaps as part of some nice migration script somewhere..... anyway, it turns out that an npm list said it found Alpine, and I still had the CDN import in my main layout app file, so I think I was getting two copies of Alpine running at once....

Anyway, I removed the CDN entry from my layout file and everything started working again.

2 likes
HCK's avatar

@PeterF Indeed, that was the issue on my case too. Thanks for taking the time to post it.

1 like

Please or to participate in this conversation.