Uncaught (in promise) type error about laravel-notify

[GamendeBrian]

@MotionPhix, another alternative I found was TALL Toasts.

I also struggled with the event not listening, without adding functionality myself to listen to the event.

Hopefully with a newer release of this package, it has a built-in event listener hook.

[akunbeben]

I got the same Issue today, the root problem is. The package started a new instance of AlpineJS and replaced the previous AlpineJS instance that was called from app.js. Here 👇🏻

laravel-notify/resources/js/notify.js

Lines 1 to 12 in fddde15

	import Alpine from 'alpinejs'
	const notification = document.querySelector('div.notify')
	if (notification) {
	setTimeout(() => {
	notification.remove()
	}, notify.timeout )
	}
	window.Alpine = Alpine
	Alpine.start()

The quick solution is, to remove the @notifyJs line from your layout. Then copy this code

laravel-notify/resources/js/notify.js

Lines 3 to 9 in fddde15

	const notification = document.querySelector('div.notify')
	if (notification) {
	setTimeout(() => {
	notification.remove()
	}, notify.timeout )
	}

And paste to your main js app.js

Details

For a long-term solution, I think someone should create a PR to add the ability to load Alpine conditionally. Or @mckenziearts can do that.

[GamendeBrian]

I'm getting the same error.
For me, it conflicts with AlpineJS.
It seems like it's related to this issue: https://laracasts.com/discuss/channels/livewire/livewire-modal-freezing-page

The issue doesn't remain when I remove the @notifyJs helper from my layout file.
Notifying does still work after removing it.

[MotionPhix]

Hello, @akunbeben, thanks for your prompt response. While the solution you showed me works, I still got one issue where the toast does not show up when it's supposed to. Like I have to refresh the page for the toast to show up which beats the whole purpose of having a toast in the first place. Is this something you have ever come across or it's an issue with my setup?

[akunbeben]

You can't achieve that by default, using this package. This package only pushes the toast (message) to the sessions and doesn't have a listener that are listening for the toast message.

An easy way, you can use other packages such as Filament/Notifications, etc.
The hard way, create a broadcast event and listen to it using laravel echo.