Alpine Errors: $wire not defined and Multiple Instances

Hi All - I'm following Caleb's tutorial on building a disappearing success indicator on a form. I'm on Laravel 11 and Livewire 3, which I believe automatically installs Alpine with the Livewire code. Everything on the Livewire side is good and working but the Alpine is failing with two errors:

Multiple Instances

livewire.js?id=770f7738:9853 Detected multiple instances of Alpine running
warnAboutMultipleInstancesOf	@	livewire.js?id=770f7738:9853
(anonymous)	@	livewire.js?id=770f7738:9864

$wire is not defined

livewire.js?id=770f7738:8099 Alpine Expression Error: $wire is not defined

Expression: "$wire.showSuccessIndicator"

Here's the blade script that is failing

<div
        x-show="$wire.showSuccessIndicator"
        x-transition.out.opacity.duration.2000ms
        x-effect="if($wire.showSuccessIndicator) setTimeout(() => $wire.showSuccessIndicator = false, 3000)"
        class="flex justify-end pt-4"
    >
        <div class="flex gap-2 items-center text-green-500 text-sm font-medium">
            Profile updated successfully
        </div>
    </div>

All thoughts on what I'm doing wrong are appreciated!

Rick

LaryAI

2 years ago

Level 58

Hi Rick,

It looks like you're encountering two common issues when working with Alpine.js and Livewire together. Let's address each one:

1. Multiple Instances of Alpine.js

The error Detected multiple instances of Alpine running suggests that Alpine.js is being loaded more than once. This can happen if you have included Alpine.js manually in your project while Livewire is also including it automatically.

Solution: Ensure that you are not including Alpine.js manually in your project. Livewire 3 should handle the inclusion of Alpine.js for you. Check your app.blade.php or any other layout file to make sure you haven't added an extra script tag for Alpine.js.

2. `$wire is not defined`

The error $wire is not defined indicates that Alpine.js is not aware of Livewire's $wire object. This can happen if Alpine.js is loaded before Livewire or if there is a version mismatch.

Solution: Make sure that Livewire is properly initialized before Alpine.js. You can do this by ensuring that Livewire's scripts are included before Alpine's scripts in your layout file. However, since Livewire 3 should handle this automatically, you might just need to ensure that your components are properly set up.

Updated Blade Script

Here is an updated version of your Blade script that should work correctly:

<div
    x-data
    x-show="$wire.showSuccessIndicator"
    x-transition.out.opacity.duration.2000ms
    x-effect="if($wire.showSuccessIndicator) setTimeout(() => $wire.showSuccessIndicator = false, 3000)"
    class="flex justify-end pt-4"
>
    <div class="flex gap-2 items-center text-green-500 text-sm font-medium">
        Profile updated successfully
    </div>
</div>

Additional Steps

Check your app.blade.php or main layout file: Ensure that you are not including Alpine.js manually. Livewire should handle this for you.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your head content -->
    @livewireStyles
</head>
<body>
    <!-- Your body content -->
    @livewireScripts
    <script src="//unpkg.com/alpinejs" defer></script> <!-- Remove this line if present -->
</body>
</html>

Ensure Livewire and Alpine are up-to-date: Make sure you are using the latest versions of Livewire and Alpine.js. You can update them via Composer and NPM/Yarn.
```
composer update livewire/livewire
npm update alpinejs
```
Check for conflicting packages: Ensure no other packages are conflicting with Alpine.js or Livewire.

By following these steps, you should be able to resolve the issues you're facing. If the problem persists, please provide more details about your setup, and we can further troubleshoot the issue.

Best, LaracastsGPT

Alpine Errors: $wire not defined and Multiple Instances

1. Multiple Instances of Alpine.js

2. $wire is not defined

Updated Blade Script

Additional Steps

2. `$wire is not defined`