Uncaught (in promise) Component not found (V3)

[Muffinman]

Hi, I'm getting the following Livewire JS error when using a paginated component:

Uncaught (in promise) Component not found: uTeOY7srwQpnWa3hnp2U

Not sure if this is a V3 bug or something I'm doing wrong, but I'm leaning towards bug?

Version Info

Environment .................................................................. Application Name ..................................................... Laravel Laravel Version ...................................................... 10.28.0 PHP Version ............................................................ 8.2.7 Composer Version ....................................................... 2.5.8 Environment ............................................................ local Debug Mode ........................................................... ENABLED URL .................................................... super secret stuff Maintenance Mode ......................................................... OFF

Cache ........................................................................
Config ............................................................ NOT CACHED
Events ............................................................ NOT CACHED
Routes ............................................................ NOT CACHED
Views ................................................................. CACHED

Drivers ......................................................................
Broadcasting ............................................................. log
Cache .................................................................. redis
Database ............................................................... mysql
Logs .......................................................... stack / single
Mail .................................................................... smtp
Queue .................................................................. redis
Scout .............................................................. typesense
Session ................................................................. file

Livewire .....................................................................
Livewire ............................................................. v3.0.10


I have two Livewire components, with one included indirectly via the other.

product-list.blade.php

<div>
    <label for="in_stock" class="cursor-pointer">
        <input type="checkbox" wire:model.live="in_stock" name="in_stock" id="in_stock" />
        Only show items in stock
    </label>

    {{ $products->links() }}

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-10 gap-y-12 mt-10 transition-all duration-300 mb-10" wire:loading.class="opacity-0 max-h-0">
        @foreach ($products as $product)
            <x-product-teaser :product="$product" :category="$category" />
        @endforeach
    </div>

    <div wire:loading.flex class="flex items-center justify-center">
        <span class="block loading loading-spinner text-primary w-8 h-8 my-8"></span>
    </div>

    {{ $products->links() }}
</div>

The x-product-teaser blade component simply renders the product details but also includes another Livewire component. For the purposes of this demo I have simplified by ONLY including a livewire component:

product-teaser.blade.php

<div>
    <livewire:product-single-add wire:key="product-single-add-{{ $product->id }}" :product="$product" :instance_id="$product->instance_id" />
</div>

product-single-add.blade.php

<div>
    Test here
</div>

So the heirarchy is:

  -> `product-list.blade.php` (Livewire, paginated) 
      -> `product-teaser.blade.php` (Blade)
          -> `product-single-add.blade.php` (Livewire)

Whenever I interact with the pagination or the filter tickbox it works the first time (although the console error is produced). Subsequent interactions no longer work and the Wire IDs mentioned in the log messages don't match the DOM IDs.

The following things DO to work, so I think I must have stumbled on a strange combination.

• Changing wire:model.live="in_stock" to wire:model="in_stock". No errors now. Pagination & filtering works properly (albeit not instant any more).
• Commenting out <livewire:product-single-add /> in final included template
• Moving <livewire:product-single-add /> into the top template directly. No idea why this works as the HTML produced is virtually identical other than the extra wrapping div.

Any ideas?

Reproduction repo

[lrljoe]

Two key questions here:

1. What's the purpose of the child Livewire component "product-single-add"?
Looking at your screenshot, I see no reason for it to be a Livewire component in of itself. It could be a blade component easily I'd imagine.

2. Why are you using a blade, just to add a nested component in?
I see no benefit at all in doing that, you're just rendering a blade needlessly, and having to track it, look at you should be keying nested components in the docs below:
See Docs

Not a bug as far as I can see, just a misunderstanding of how to use nested components.

[Muffinman]

Thanks for the reply.

The templates are far more complex than I posted above, but I've stripped most things out for brevity, the problem still exists in the simplified format above.

The single-add component is livewire because it has live quantity stock checks and triggers events in other parts of the template. Wasn't relevant to the problem above but it is needed.

The teaser blade template is used because we re-use this same display in several different places throughout the site.

I have correctly keyed the child component in the example above, still looks like a bug to me!

I will try to create a reproduction repo and share.

[lrljoe]

You should use :key= not wire:key= on a Livewire component

unless I'm having a moment!

[Muffinman]

I believe either are valid, depending on if you're passing a variable or a string:

https://livewire.laravel.com/docs/components#adding-wirekey-to-foreach-loops

[lrljoe]

Per the docs, use :key to pass to nested Livewire components, wire:key is for inline elements or nested blade components (again I could be going mad here)

Always consider why you are nesting livewire components, there is rarely a good reason to!

[Muffinman]

I have recreated the issue in a simple repository:

https://github.com/Muffinman/livewire-bug-report

[Muffinman]

EDIT: I have discovered that the problem is definitely linked to the key on the child component.

If I replace it the fixed string with something random then everything works as expected.

<livewire:product-single-add wire:key="{{ Str::uuid() }}" :product="$product" />

[Muffinman]

OK I found the issue, and it was my fault for not reading the docs thoroughly enough.

The wire:key has to be on the root element DIRECTLY inside the foreach loop. From the docs:

When looping through data in a Livewire template using @foreach, you must add a unique wire:key attribute to the root element rendered by the loop.

https://livewire.laravel.com/docs/components#adding-wirekey-to-foreach-loops

What is not clear from the docs is that if you have a CSS grid it seems you need to do something like:

<div class="grid grid-cols-12">
    @foreach ($items as $item)
        <div class="col-span-3" wire:key="title-{{ $item->id }}">{{ $item->title }}</div>
        <div class="col-span-3" wire:key="price-{{ $item->id }}">{{ $item->price }}</div>
        <div class="col-span-3" wire:key="something-else-{{ $item->id }}">{{ $item->something_else }}</div>
    @endforeach
</div>

Adding unique keys to each element.

[wonderful-jason-rudland]

If it helps anyone I had exactly the same error. I followed the answer in this thread, but to no avail. Eventually I discovered I had more than a single element in my view. i.e.

<div>
   [all my component HTML]
</div>
<div>This div was mistakenly moved outside the main div above</div>

The console error happened when I dispatched an event (any event), like this:

$this->dispatch('post-creted')

It took me forever to figure it out as the error seemed totally unrelated to what was actually wrong.

[rizkyilhampra]

Just add another workaround for this issue. In my case, it was caused by a missing blade component. For example, I have a livewire/volt component like this:

<div>
    <x-card>
    ...
    </x-card>
</div>

After spending some hours finding the cause of this problem, I realized that I had forgotten to add the card component in resources/views/components. I tried adding wire:key in the foreach loops, but it didn't help because that wasn't the main issue in my case.