search

masmerise / livewire-toaster

Beautiful toast notifications for Laravel / Livewire.
MIT License
342 stars 22 forks source link

Error when using #34

Closed Ghalbeyou closed 5 months ago

Ghalbeyou commented 5 months ago

The error is:

livewire.js?id=e2b302e9:1198 Alpine Expression Error: toasterHub is not defined

Expression: "toasterHub([], JSON.parse('{\u0022alignment\u0022:\u0022bottom\u0022,\u0022duration\u0022:3000}'))"

 <div role=​"status" id=​"toaster" x-data=​"toasterHub([]​, JSON.parse('{\u0022alignment\u0022:​\u0022bottom\u0022,\u0022duration\u0022:​3000}​')​)​" class=​"fixed z-50 p-4 w-full flex flex-col pointer-events-none sm:​p-6 bottom-0 items-end rtl:​items-start">​…​</div>​
handleError @ livewire.js?id=e2b302e9:1198
(anonymous) @ livewire.js?id=e2b302e9:1271
Promise.catch (async)
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
evaluate @ livewire.js?id=e2b302e9:1215
(anonymous) @ livewire.js?id=e2b302e9:3472
flushHandlers @ livewire.js?id=e2b302e9:1353
stopDeferring @ livewire.js?id=e2b302e9:1358
deferHandlingDirectives @ livewire.js?id=e2b302e9:1361
initTree @ livewire.js?id=e2b302e9:876
(anonymous) @ livewire.js?id=e2b302e9:831
start @ livewire.js?id=e2b302e9:830
start2 @ livewire.js?id=e2b302e9:8284
(anonymous) @ livewire.js?id=e2b302e9:9453
livewire.js?id=e2b302e9:1198 Alpine Expression Error: toasts is not defined

Expression: "toasts"

 <template x-for=​"toast in toasts" :key=​"toast.id">​…​</template>​
handleError @ livewire.js?id=e2b302e9:1198
(anonymous) @ livewire.js?id=e2b302e9:1271
Promise.catch (async)
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
loop @ livewire.js?id=e2b302e9:3560
(anonymous) @ livewire.js?id=e2b302e9:3550
reactiveEffect @ livewire.js?id=e2b302e9:2365
effect2 @ livewire.js?id=e2b302e9:2340
effect @ livewire.js?id=e2b302e9:734
wrappedEffect @ livewire.js?id=e2b302e9:750
(anonymous) @ livewire.js?id=e2b302e9:3550
flushHandlers @ livewire.js?id=e2b302e9:1353
stopDeferring @ livewire.js?id=e2b302e9:1358
deferHandlingDirectives @ livewire.js?id=e2b302e9:1361
initTree @ livewire.js?id=e2b302e9:876
(anonymous) @ livewire.js?id=e2b302e9:831
start @ livewire.js?id=e2b302e9:830
start2 @ livewire.js?id=e2b302e9:8284
(anonymous) @ livewire.js?id=e2b302e9:9453
livewire.js?id=e2b302e9:1202 Uncaught ReferenceError: toasterHub is not defined
    at [Alpine] toasterHub([], JSON.parse('{\u0022alignment\u0022:\u0022bottom\u0022,\u0022duration\u0022:3000}')) (eval at safeAsyncFunction (http://127.0.0.1:8000/livewire/livewire.js?id=e2b302e9:1249:21), <anonymous>:3:16)
    at livewire.js?id=e2b302e9:1271:23
    at tryCatch (livewire.js?id=e2b302e9:1191:14)
    at evaluate (livewire.js?id=e2b302e9:1215:34)
    at Function.<anonymous> (livewire.js?id=e2b302e9:3472:17)
    at flushHandlers (livewire.js?id=e2b302e9:1353:48)
    at stopDeferring (livewire.js?id=e2b302e9:1358:7)
    at deferHandlingDirectives (livewire.js?id=e2b302e9:1361:5)
    at initTree (livewire.js?id=e2b302e9:876:5)
    at livewire.js?id=e2b302e9:831:7
[Alpine] toasterHub([], JSON.parse('{\u0022alignment\u0022:\u0022bottom\u0022,\u0022duration\u0022:3000}')) @ VM3519:3
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
evaluate @ livewire.js?id=e2b302e9:1215
(anonymous) @ livewire.js?id=e2b302e9:3472
flushHandlers @ livewire.js?id=e2b302e9:1353
stopDeferring @ livewire.js?id=e2b302e9:1358
deferHandlingDirectives @ livewire.js?id=e2b302e9:1361
initTree @ livewire.js?id=e2b302e9:876
(anonymous) @ livewire.js?id=e2b302e9:831
start @ livewire.js?id=e2b302e9:830
start2 @ livewire.js?id=e2b302e9:8284
(anonymous) @ livewire.js?id=e2b302e9:9453
setTimeout (async)
handleError @ livewire.js?id=e2b302e9:1201
(anonymous) @ livewire.js?id=e2b302e9:1271
Promise.catch (async)
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
evaluate @ livewire.js?id=e2b302e9:1215
(anonymous) @ livewire.js?id=e2b302e9:3472
flushHandlers @ livewire.js?id=e2b302e9:1353
stopDeferring @ livewire.js?id=e2b302e9:1358
deferHandlingDirectives @ livewire.js?id=e2b302e9:1361
initTree @ livewire.js?id=e2b302e9:876
(anonymous) @ livewire.js?id=e2b302e9:831
start @ livewire.js?id=e2b302e9:830
start2 @ livewire.js?id=e2b302e9:8284
(anonymous) @ livewire.js?id=e2b302e9:9453
livewire.js?id=e2b302e9:1202 Uncaught ReferenceError: toasts is not defined
    at [Alpine] toasts (eval at safeAsyncFunction (livewire.js?id=e2b302e9:1249:21), <anonymous>:3:32)
    at livewire.js?id=e2b302e9:1271:23
    at tryCatch (livewire.js?id=e2b302e9:1191:14)
    at loop (livewire.js?id=e2b302e9:3560:5)
    at livewire.js?id=e2b302e9:3550:19
    at reactiveEffect (livewire.js?id=e2b302e9:2365:18)
    at Object.effect2 [as effect] (livewire.js?id=e2b302e9:2340:7)
    at effect (livewire.js?id=e2b302e9:734:35)
    at wrappedEffect (livewire.js?id=e2b302e9:750:29)
    at Function.<anonymous> (livewire.js?id=e2b302e9:3550:5)
[Alpine] toasts @ VM3520:3
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
loop @ livewire.js?id=e2b302e9:3560
(anonymous) @ livewire.js?id=e2b302e9:3550
reactiveEffect @ livewire.js?id=e2b302e9:2365
effect2 @ livewire.js?id=e2b302e9:2340
effect @ livewire.js?id=e2b302e9:734
wrappedEffect @ livewire.js?id=e2b302e9:750
(anonymous) @ livewire.js?id=e2b302e9:3550
flushHandlers @ livewire.js?id=e2b302e9:1353
stopDeferring @ livewire.js?id=e2b302e9:1358
deferHandlingDirectives @ livewire.js?id=e2b302e9:1361
initTree @ livewire.js?id=e2b302e9:876
(anonymous) @ livewire.js?id=e2b302e9:831
start @ livewire.js?id=e2b302e9:830
start2 @ livewire.js?id=e2b302e9:8284
(anonymous) @ livewire.js?id=e2b302e9:9453
setTimeout (async)
handleError @ livewire.js?id=e2b302e9:1201
(anonymous) @ livewire.js?id=e2b302e9:1271
Promise.catch (async)
(anonymous) @ livewire.js?id=e2b302e9:1271
tryCatch @ livewire.js?id=e2b302e9:1191
loop @ livewire.js?id=e2b302e9:3560
(anonymous) @ livewire.js?id=e2b302e9:3550
reactiveEffect @ livewire.js?id=e2b302e9:2365
effect2 @ livewire.js?id=e2b302e9:2340
effect @ livewire.js?id=e2b302e9:734
wrappedEffect @ livewire.js?id=e2b302e9:750
(anonymous) @ livewire.js?id=e2b302e9:3550
flushHandlers @ livewire.js?id=e2b302e9:1353
stopDeferring @ livewire.js?id=e2b302e9:1358
deferHandlingDirectives @ livewire.js?id=e2b302e9:1361
initTree @ livewire.js?id=e2b302e9:876
(anonymous) @ livewire.js?id=e2b302e9:831
start @ livewire.js?id=e2b302e9:830
start2 @ livewire.js?id=e2b302e9:8284
(anonymous) @ livewire.js?id=e2b302e9:9453

The blade:

@extends("../../layouts.master")
<title>@yield("title") - نوین پرداخت</title>
@section("content")
    {{$slot}}
    <x-toaster-hub />
@endsection

using in my livewire contoller:

        Toaster::success('User created!'); // 👈
mabdullahsari commented 5 months ago

Please follow the installation properly.