search

wireui / wireui

TallStack UI components
https://v1.wireui.dev
MIT License
1.37k stars 166 forks source link

Alpine Expression Error: wireui_notifications is not defined #326

Closed bernhardh closed 1 year ago

bernhardh commented 1 year ago

Describe the bug I am trying to implement notification on a new project (with filamentadmin), but I can't get it working. I always get 

module.esm.js:416 Alpine Expression Error: 
Alpine Expression Error: wireui_notifications is not defined

and

module.esm.js:420 Uncaught ReferenceError: wireui_notifications is not defined

And this even before calling $this->notification() or window.$wireui.notify({..., just directly on page load.

I have added <wireui:scripts /> next the the <head> tag, resulting in:

<head>
<script>window.Wireui = {hook(hook, callback) {window.addEventListener(`wireui:${hook}`, () => callback())},dispatchHook(hook) {window.dispatchEvent(new Event(`wireui:${hook}`))}}</script><script src="http://127.0.0.1:8001/wireui/assets/scripts" defer></script>

and right after the <body> tag I have added <x-notifications /> resulting in 

<body class="bg-gray-100 text-gray-900 filament-body">
   <div class="fixed z-50 inset-0 flex items-end justify-center px-4 py-6
   pointer-events-none sm:p-5 sm:pt-4 sm:items-start sm:justify-end"
   x-data="wireui_notifications"
   x-on:wireui:notification.window="addNotification($event.detail)"
   x-on:wireui:confirm-notification.window="addConfirmNotification($event.detail)"
   wire:ignore>
.....

AlpineJS ist included at the end of the </body>.

WireUi Elements like Buttons are working.

Desktop (please complete the following information):

Additional context

$composer show | grep wireui
wireui/wireui                      v1.6.0   TallStack components
bernhardh commented 1 year ago

Well I am not sure, it must be a conflict with filament, since a "naked" page works...

PH7-Jack commented 1 year ago

@bernhardh Can you add the alpine (using defer <script src="..." defer>) script below the wireui script?

bernhardh commented 1 year ago

AlpineJS is included in the app.js of filament and is inserted at the very end of the body tag (right before the closing </body>). So it is below the wireui script. The problem seems to be the defer, which is missing, but not in my control ;)

fachrularly commented 1 year ago

I have a same problem, then I put alpinejs in another js like alpinejs.js and add in the vite.config. I put @vite(['resources/js/alpine.js']) below {!! WireUi::directives()->scripts() !!} or @wireUiScripts, but im using {!! WireUi::directives()->scripts() !!}. It works for me before im searching about defer setting in vite, so i dont need setting defer in my vite

diackbuaer commented 1 year ago

thanks a lot. my problem has resolved now

diackbuaer commented 1 year ago

so, you must defined your first asset laravel @Vite(['resources/js/alpine.js']), after @wireUiScripts

in your app.blade

nghuuquyen commented 1 year ago

I have a same problem, then I put alpinejs in another js like alpinejs.js and add in the vite.config. I put @Vite(['resources/js/alpine.js']) below {!! WireUi::directives()->scripts() !!} or @wireUiScripts, but im using {!! WireUi::directives()->scripts() !!}. It works for me before im searching about defer setting in vite, so i dont need setting defer in my vite

Yes, you save my time. Thank alots

azeemdin commented 12 months ago

hi., This isue is realy annoying and wasted lot of time. I have tried the solution as proposed but still getting Cannot read properties of undefined (reading '$wire')

here is my alpine.js

import Alpine from 'alpinejs'; import focus from '@alpinejs/focus'; window.Alpine = Alpine; Alpine.plugin(focus); Alpine.start();

here is my app.js

import './bootstrap';

and app.blade.php in head tag

@vite(['resources/css/app.css', 'resources/js/app.js']) @wireUiScripts @Vite(['resources/js/alpine.js'])

And following code before body tag @livewireScripts

I have also added following lines in boot function in AppServiceProvider Vite::useScriptTagAttributes([ 'defer' => true, ]);

Can anyone please tell me what am I doing wrong?

docmedicus commented 11 months ago

We are having the same problem when installing WireUI in a fresh Laravel (+Jetstream) installation. Any advice on how to get this working?

sqr3byk commented 11 months ago

I had a similar issue. I think the problem was duplicated Alpine.js, since Laravel Breeze already includes it. Here is the app.js:

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

So all I did was change the app.blade.php:

<head>
    ...
    <!-- Scripts -->
    @wireUiScripts
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>

Now everything works perfectly, no warnings or errors.

azeemdin commented 11 months ago

@wireUiScripts @vite(['resources/css/app.css', 'resources/js/app.js']) @livewireStyles

Tried it also but got the same error. I end up using x-native-select because of this error.

MCKLtech commented 10 months ago

I'm getting the following errors:

alpine.cdn.min.js:1 Alpine Expression Error: wireui_inputs_maskable is not defined

Expression: "wireui_inputs_maskable({
    isLazy: false,
    model: window.Livewire.find('dIS7UnMpUEHo10hYL076').entangle('state.phone_confirmation').defer,
    emitFormatted: false,
    mask: ['(###) ###-####', '+# ### ###-####', '+## ## ####-####'],
})"
alpine.cdn.min.js:5 Uncaught ReferenceError: input is not defined
    at eval (eval at <anonymous> (alpine.cdn.min.js:5:637), <anonymous>:3:32)
    at alpine.cdn.min.js:5:974
    at Xt (alpine.cdn.min.js:1:4899)
    at c (alpine.cdn.min.js:5:28429)
    at e._x_forceModelUpdate (alpine.cdn.min.js:5:29190)
    at alpine.cdn.min.js:5:29402
    at r (alpine.cdn.min.js:5:16414)
    at Object.jr [as effect] (alpine.cdn.min.js:5:16202)
    at P (alpine.cdn.min.js:1:398)
    at alpine.cdn.min.js:1:511

This happens on the doc page so I'm assuming it's the library and not my own set up.

isarphilipp commented 2 months ago

Adding this for my future self and anyone else who wants to save 3 hours:

Had the same error after updating to Livewire 3. Solution was to remove loading of Alpine from app.js, because it is actually bundled with Livewire 3 already.

Thanks @rowino for pointing it out ;)