Livewire 3 error: alpine.cloneNode is not a function

Hey folks - I've started rebuilding an app on a fresh version of Laravel and Livewire 3. I have rebuilt the Register page as a Livewire component. Input to ANY wire:model field results in the following error:

livewire.js?id=11c49d7e:6366  Uncaught TypeError: window.Alpine.cloneNode is not a function
    at Object.morph (livewire.js?id=11c49d7e:6366:42)
    at morph2 (livewire.js?id=11c49d7e:6926:20)
    at livewire.js?id=11c49d7e:6997:7

I can dd() the results in the Component file, so I know that the blade file is connected to the Livewire component, but I'm guessing I missed something in the new Livewire setup.

For background, here's the livewire blade page:

<div>
    <div>
        <x-input-label for="name" :value="__('Name')" />
        <x-text-input  wire:model.live="name" id="name" class="block mt-1 w-full" type="text" name="name" required autofocus />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

     <div>
         <x-input-label for="email" :value="__('Email')" />
         <x-text-input  wire:model.live="email" id="email" class="block mt-1 w-full" type="text" name="email" required />
         <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>

    <section id="school" class="my-4">

        <header class="uppercase bg-gray-300 px-2 text-sm font-semibold">
            School Information
        </header>

        <div>
            <x-input-label for="postalCode" :value="__('School Zip Code')"/>
            <input wire:model.live="postalCode"  class="block mt-1 w-full" type="text" />
            <x-input-error :messages="$errors->get('postalCode')" class="mt-2"/>
        </div>
        <div>
            {{ $schoolLinks }}
        </div>

    </section>

    <section id="password" >

        <header class="uppercase bg-gray-300 px-2 text-sm font-semibold">
            Password
        </header>

        <div>
            <x-input-label for="password" :value="__('Password')" />
            <x-text-input  wire:model.live="password" id="password" class="block mt-1 w-full" type="text" name="password" required />
            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="confirmPassword" :value="__('Confirm Password')" />
            <x-text-input  wire:model.live="confirmPassword" id="confirmPassword" class="block mt-1 w-full" type="text" name="confirmPassword" required />
            <x-input-error :messages="$errors->get('confirmPassword')" class="mt-2" />
        </div>
    </section>
</div>

Here's that Livewire component:

<?php

namespace App\Livewire\Auth;

use App\Models\students\School;
use Illuminate\Support\Collection;
use Livewire\Component;

class RegisterComponent extends Component
{
    public string $confirmPassword;
    public string $name;
    public string $email;
    public string $password;
    public string $postalCode='';
    public int $schoolId;
    public string $schoolPostalCode;
    public string $schoolLinks='';
    public int $teacherUserId;
    public function render()
    {
        return view('livewire..auth.register-component');
    }

    public function updatedPostalCode()
    {
        $schools = School::query()
            ->where('postal_code', 'like', $this->postalCode . '%')
            ->orderBy('name')
            ->get();

        foreach($schools AS $school){

            $this->schoolLinks .= '<div><a href="">' . $school->name . '</a></div>';
        }

    }

}

Thanks for any thoughts you might have on fixing this! Rick

LaryAI

2 years ago

Level 58

The error message "window.Alpine.cloneNode is not a function" suggests that there might be a conflict between Livewire and Alpine.js. To resolve this issue, you can try the following steps:

Make sure you have the latest versions of Livewire and Alpine.js installed. You can update them by running the following commands in your terminal:

npm install livewire
npm install alpinejs

In your Livewire component's blade file, add the @livewireScripts directive at the bottom of the file. This directive will include the necessary Livewire JavaScript files.

<!-- Your Livewire component's blade file -->
<div>
    <!-- Your component's HTML code -->
</div>

@livewireScripts

In your main layout file (e.g., app.blade.php), make sure you include the necessary Alpine.js scripts. You can do this by adding the @livewireScripts directive before the closing </body> tag.

<!-- Your main layout file -->
<!DOCTYPE html>
<html>
<head>
    <!-- Your head section -->
</head>
<body>
    <!-- Your body content -->

    @yield('content')

    @livewireScripts
</body>
</html>

Clear your application's cache and restart the development server. You can do this by running the following commands:

php artisan cache:clear
php artisan serve

If the issue persists, you can try disabling any other JavaScript libraries or plugins that might be conflicting with Livewire and Alpine.js. Additionally, make sure that you don't have any duplicate script tags or conflicting JavaScript code in your application.

Let me know if this helps resolve the issue!

Rretzko

2 years ago

Level 15

Hi again, I updated the files as noted but the error continues: Here's the guest.blade:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans text-gray-900 antialiased">
        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
            <div>
                <a href="/">
                    <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
                </a>
            </div>

            <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
                {{ $slot }}
            </div>
        </div>
    @livewireScripts
    </body>
</html>

which is called from register.blade

<x-guest-layout>

    @livewire('auth.register-component')

        <div class="flex items-center justify-end mt-4">
            <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
                {{ __('Already registered?') }}
            </a>

            <x-primary-button class="ml-4">
                {{ __('Register') }}
            </x-primary-button>
        </div>

</x-guest-layout>

and in-turn calls the livewire component (auth.register-component)

<div>
    <div>
        <x-input-label for="name" :value="__('Name')" />
        <x-text-input  wire:model.live="name" id="name" class="block mt-1 w-full" type="text" name="name" required autofocus />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
        {{ $name }}
    </div>

     <div>
         <x-input-label for="email" :value="__('Email')" />
         <x-text-input  wire:model.live="email" id="email" class="block mt-1 w-full" type="text" name="email" required />
         <x-input-error :messages="$errors->get('email')" class="mt-2" />
    </div>

    <section id="school" class="my-4">

        <header class="uppercase bg-gray-300 px-2 text-sm font-semibold">
            School Information
        </header>

        <div>
            <x-input-label for="postalCode" :value="__('School Zip Code')"/>
            {{-- <x-text-input wire:model.live="postalCode"  class="block mt-1 w-full" type="text" required/> --}}
            <input wire:model.live="postalCode"  class="block mt-1 w-full" type="text" />
            <x-input-error :messages="$errors->get('postalCode')" class="mt-2"/>
        </div>

        <div>
            {{ $schoolLinks }}
        </div>

        <div>
            Select Teacher
        </div>
    </section>

    <section id="password" >

        <header class="uppercase bg-gray-300 px-2 text-sm font-semibold">
            Password
        </header>

        <div>
            <x-input-label for="password" :value="__('Password')" />
            <x-text-input  wire:model.live="password" id="password" class="block mt-1 w-full" type="text" name="password" required />
            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="confirmPassword" :value="__('Confirm Password')" />
            <x-text-input  wire:model.live="confirmPassword" id="confirmPassword" class="block mt-1 w-full" type="text" name="confirmPassword" required />
            <x-input-error :messages="$errors->get('confirmPassword')" class="mt-2" />
        </div>
    </section>
</div>

@livewireScripts

I am now also getting two more information and one error warnings:

livewire.js?id=11c49d7e:7579  Detected multiple instances of Livewire running
(anonymous) @ livewire.js?id=11c49d7e:7579
(anonymous) @ livewire.js?id=11c49d7e:7589
livewire.js?id=11c49d7e:7581  Detected multiple instances of Alpine running
(anonymous) @ livewire.js?id=11c49d7e:7581
(anonymous) @ livewire.js?id=11c49d7e:7589
livewire.js?id=11c49d7e:4184  Uncaught Component already initialized

Thanks again for your help!

Rretzko

2 years ago

Best Answer

Level 15

In case anyone else runs into this, here's my solution. I set up a new vanilla Laravel project and composer required livewire/livewire and then followed the https://livewire.laravel.com/docs/quickstart example. Livewire 3 needs its own encapsulating layout which is created by running