Laravel 8 Jetstream || Undefined variable: _instance (View: C:\xampp\htdocs\veye-website\resources\views\vendor\jetstream\components\modal.blade.php

Question

I am trying to use Laravel 8 Livewire Modal Popup for data entry with going on another page. But I get undefine the variable _instance and not able to understand it.

@entangle($attributes->wire('model'))

This line creates this error when I remove this from views/vendor/jetstream/components/modal.blade.php. the error will go.

Line no 34.

<div id="<?php echo e($id); ?>" x-data="{ show: <?php if ((object) ($attributes->wire('model')) instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($_instance->id); ?>').entangle('<?php echo e($attributes->wire('model')->value(

    x-show="show"

    x-on:close.stop="show = false"

    x-on:keydown.escape.window="show = false"

    class="fixed top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center"

    style="display: none;">

Answer 1

This was causing me much angst too but I think I found the solution: as @georgy-malanichev says, you can only call Livewire methods from inside a Livewire component (and not from inside a Blade component or any other custom components).

Given you are trying to use the component inside resources/views/dashboard.blade.php, the solution is to:

1. create a livewire component using artisan make:livewire MyDashboard
2. Cut everything between <x-app-layout> and </x-app-layout> in dashboard.blade.php and paste it into views/livewire/my-dashboard.blade.php
3. Add @livewire('my-dashboard') inside the x-app-layout tags and Bob's your uncle (it should start working)

To help you understand what's going on, if you look at the source code for the modal component, you'll see a line like: show: @entangle($attributes->wire('model')),. I'm not sure how to describe exactly what this does, but, essentially, @entangle() is expecting an instance of the "model" Livewire object and it's not finding one.

It's not finding it because it's getting called from a non-livewire component. Once you put it inside a Livewire component, it starts working.

I hope the additional details makes things clearer.

Answer 2

I was getting the same error but in my case it was the fact that I had x-data="{ open: @entangle('showDropdown') }" outside of the LiveWire component. Once I moved it inside the component template, where it should be, the issue went away.