Alpine Error: "SyntaxError: Unexpected token '}'"

[SimonBarrettACT]

I'm running v1.0.0 of Spotlight and have implemented the example logout command.

When typing 'Logout', the dropdown does not appear and the following error is sent to the console:

[Warning] Alpine Error: "SyntaxError: Unexpected token '}'" (app.js, line 123)

Expression: ""
Element: – 
<template x-for="(item, i) in filteredItems()" :key>…</template>

<template x-for="(item, i) in filteredItems()" :key>…</template>
[Error] SyntaxError: Unexpected token '}'
    handleError (app.js:130)
    tryCatch (app.js:142)
    (anonymous function) (app.js:563)
    forEach
    handleForDirective (app.js:561)
    (anonymous function) (app.js:1751)
    forEach
    resolveBoundAttributes (app.js:1711)
    updateElement (app.js:1687)
    (anonymous function) (app.js:1643)
    walk (app.js:98)
    walk (app.js:102)
    walk (app.js:102)
    walk (app.js:102)
    walk (app.js:102)
    walkAndSkipNestedComponents (app.js:1598)
    updateElements (app.js:1640)
    (anonymous function) (app.js:1548)
    later (app.js:114)

Spotlight v0.1.8 does not exhibit this behaviour.

I'm using:

Livewire v2.5.1 Alpine v3.2.1 Laravel v8.49.1

Love the component and will be using it in several projects. Thanks

[fefo-p]

Adding to Simon's message, the html for the unviewed code seems to be:

<div class="border-t border-gray-800" x-show="filteredItems().length > 0">
    <ul x-ref="results" style="max-height: 265px;" class="overflow-y-auto">
        <template x-for="(item, i) in filteredItems()" :key="">
            <li>
                <button @click="go(item[0].item.id)" class="block w-full px-6 py-3 text-left" :class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }">
                    <span x-text="item[0].item.name" :class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span>
                    <span x-text="item[0].item.description" class="ml-1" :class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span>
                </button>
            </li>
        </template>
    </ul>
</div>

[PhiloNL]

Hi both,

Thanks for trying Spotlight. Unfortunately, I'm unable to replicate this error using the exact same versions of Laravel, Livewire, and Alpine (fresh install). I can further investigate but this will require you to set up a demo repository that replicates the issue.

[fefo-p]

Maybe it makes a difference mentioning that I'm using Laravel with Jetstream, Tailwind (JIT mode), AlpineJs, Livewire, & spatie/laravel-permission? I mention this as maybe the difference is on how the app.css & app.js get compiled... don't know.

My webpack.mix.js is like the following, updated to use JIT

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('autoprefixer'),
            require('@tailwindcss/jit'),
        ]
    });

if (mix.inProduction()) {
    mix.version();
}

[PhiloNL]

Hi @fefo-p I would recommend creating a fresh installation of Laravel, install Spotlight, verify that it is working, next, add each dependency step by step and see if Spotlight breaks to figure out what is causing the issue. I'm using Spotlight with Jetstream and Tailwind as well without any issues.

[fefo-p]

Will do, Thanks @PhiloNL

[philipmclifton]

Did you resolve this issue, I am seeing the same thing.

[fefo-p]

Unfortunately no, haven't had the time

[mrpritchett]

I'm also getting this issue. Trying to dig in now.

[pavlentij]

I had the same issue, but the problem was in the old Alpine.js version. My application had v2.* and after the upgrade to v3.0 everything became working as it should.

[nusoft]

I'm also getting this issue. Trying to dig in now.

@mrpritchett did you manage to solve this issue? I'm getting the same error

[mrpritchett]

@nusoft It was an issue with versioning as described above. Once I updated to v3 of AlpineJS, everything worked fine.