wilberth-cl's avatar

Alpine Expression Error

Using it with Livewire, the first time it works fine the other times it throws this error when disappearing flash messages from laravel:

    @if (session()->has('message'))
        <div x-data="displaydata">
            <div x-show="open" x-init="byemssg" class="bg-green-700 text-white mx-8 mb-4 px-4 py-3 shadow-md shadow-slate-400 rounded relative" role="alert">
                <span class="block sm:inline">{{ session('message') }}</span>
            </div>
        </div>
    @endif


@section('scripts')
    <script type="text/javascript">

        document.addEventListener('alpine:init', () => {
        Alpine.data('displaydata', () => ({
                open: false,
                byemssg() {
                    this.open =! this.open
                    setTimeout(() => this.open = false, 3000)
                }
            }));
        });
    </script>
@endsection

Errors:

module.esm.js:416 Alpine Expression Error: Illegal invocation

Expression: open

0 likes
7 replies
Sinnbeck's avatar

Does it point to the line the error occurs in?

wilberth-cl's avatar

@Sinnbeck , No, it really does its job, but it throws me that warning, I have read that some ask to include "defer" in the script tag, but Alpine is already confirmed in Laravel.

Sinnbeck's avatar

@Wistfer are you sure that is full message? No reference to a line or further error messages?

Can you take a picture and upload to imgur.com?

wilberth-cl's avatar

@Sinnbeck ,

module.esm.js:416 Alpine Expression Error: Illegal invocation

Expression: "open"

 <div x-show=​"open" x-init=​"byemssg" class=​"bg-green-700 text-white mx-8 mb-4 px-4 py-3 shadow-md shadow-slate-400 rounded relative" role=​"alert">​ ​</div>​

handleError @ module.esm.js:416
tryCatch @ module.esm.js:411
(anónimo) @ module.esm.js:2702
reactiveEffect @ module.esm.js:1618
effect2 @ module.esm.js:1593
effect @ module.esm.js:48
(anónimo) @ module.esm.js:1200
wrappedEffect @ module.esm.js:64
(anónimo) @ module.esm.js:2702
flushHandlers @ module.esm.js:561
stopDeferring @ module.esm.js:566
deferHandlingDirectives @ module.esm.js:569
initTree @ module.esm.js:787
cloneTree @ module.esm.js:1195
(anónimo) @ module.esm.js:1181
dontRegisterReactiveSideEffects @ module.esm.js:1205
clone @ module.esm.js:1180
alpinifyElementsForMorphdomV3 @ SupportAlpine.js:294
alpinifyElementsForMorphdom @ SupportAlpine.js:250
onBeforeElUpdated @ index.js:479
callHook @ morphdom.js:35
morphEl @ morphdom.js:199
(anónimo) @ morphdom.js:332
morphEl @ morphdom.js:219
(anónimo) @ morphdom.js:463
value @ index.js:386
value @ index.js:291
value @ index.js:269
value @ index.js:11
(anónimo) @ index.js:69
Promise.then (asíncrono)
(anónimo) @ index.js:64
Promise.then (asíncrono)
value @ index.js:62
sendMessage @ index.js:242
value @ index.js:252
value @ index.js:274
value @ index.js:11
(anónimo) @ index.js:69
Promise.then (asíncrono)
(anónimo) @ index.js:64
Promise.then (asíncrono)
value @ index.js:62
sendMessage @ index.js:242
value @ index.js:252
value @ index.js:274
value @ index.js:11
(anónimo) @ index.js:69
Promise.then (asíncrono)
(anónimo) @ index.js:64
Promise.then (asíncrono)
value @ index.js:62
sendMessage @ index.js:242
value @ index.js:252
value @ index.js:274
value @ index.js:11
(anónimo) @ index.js:69
Promise.then (asíncrono)
(anónimo) @ index.js:64
Promise.then (asíncrono)
value @ index.js:62
sendMessage @ index.js:242
value @ index.js:252
later @ debounce.js:8
setTimeout (asíncrono)
(anónimo) @ debounce.js:12
value @ index.js:225
callback @ node_initializer.js:94
(anónimo) @ index.js:552
setTimeout (asíncrono)
(anónimo) @ index.js:551

module.esm.js:503 Uncaught TypeError: Illegal invocation
    at runIfTypeOfFunction (module.esm.js:503:24)
    at module.esm.js:491:9
    at tryCatch (module.esm.js:409:12)
    at module.esm.js:2702:17
    at reactiveEffect (module.esm.js:1618:16)
    at Object.effect2 [as effect] (module.esm.js:1593:5)
    at effect (module.esm.js:48:33)
    at module.esm.js:1200:24
    at wrappedEffect (module.esm.js:64:27)
    at Function.<anonymous> (module.esm.js:2702:3)
Lilly's avatar

Hi ! Did you find a solution to this problem ? i'm having the exact same problem. please share if you did. thanks

2 likes
lara332203's avatar

Please be sure that your x-data is not like this

x-data="something: false"

or

x-data="{something = false}"

Correct syntax is

x-data="{ something: false }"

Please or to participate in this conversation.