Start a discussion
Back
ReplySubscribe
Alpine.js

Livewire/Alpine conflicts

Hey all,

I've no doubt there is an obvious conflict that I am missing here but I've been googling and researching for a couple of days now and cannot seem to resolve this issue.

I've created a search functionality on my app (following the https://codecourse.com/courses/meilisearch-instant-search-with-alpine-js course) and have found that to get my search feature functioning as expected, it seems to break my livewire functionality (mainly that modals won't load anymore but the console shows innumerable uncaught errors stating:

Uncaught TypeError: wireEl.__livewire is undefined

If I "defer" my app.js script tag containing the code for the meilisearch/alpine feature, that fixes the livewire issue but breaks the search functionality and creates a [object HTMLInputElement] permanantly in my html input and the consoles shows innumerable errors again stating:

Uncaught TypeError: window.components is undefined

or that all my search functions/variables are undefined.

This is the ordering of script tags:

<head>
        <meta charset="utf-8">
        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name', 'VTRAC') }}</title>
        <link rel="shortcut icon" href="{{ asset('img/logos/favicon.ico') }}"  type='image/x-icon'>

        <!-- Styles -->
        @livewireStyles
        <style>[x-cloak] { display: none !important; }</style>
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        **{{--Scripts--}}
        @livewireScripts
        <script defer src="{{ mix('js/app.js')}}"></script>**

        @stack('header-scripts')


    </head>

I've tried re-ordering and/or moving the app.js mixer to just before the /body close out etc... but just get the same issues.

Where am I going wrong? What have I missed?

Thanks in advance

Tom

tom81769
tom81769
0
1
406
Haz
Haz
Moderator

Hello,

Could you show your components and views so I can take a look further? Your app layout seems fine.

0
Reply