Uncaught Component not found: xxxxx - Even with wire:key

Hello, I have a livewire component. In that livewire component, I had to do an edit component, where one is for a desktop version, and one is for mobile. When I run a save method on my parent component, it re-renders the parent component but does not figure out the snapshots correctly. This used to work for me, but when I upgraded to v3.3.5, it seemed that it no longer worked (I think). Any ideas?

I also tried to have wire:ignore in the opening tag of the EditVersion component blade template.

<div wire:ignore>

Here is the error I get in the console

livewire.js?id=XXXX Uncaught Snapshot missing on Livewire component with id: XXXX   

Uncaught Component not found: XXXX

Here is the components, they are both in the same livewire component.

<livewire:edit-version :$version wire:key="mobileComponent"></livewire:editor.edit-version>   

<livewire:edit-version :$version wire:key="desktopComponent"></livewire:editor.edit-version>

LaryAI

2 years ago

Level 58

It seems like you're encountering an issue with Livewire's component rendering after an update to version 3.3.5. The error message indicates that Livewire is unable to find a component with a given ID, which could be related to the way Livewire is keeping track of the components' state.

Firstly, ensure that the wire:key directive is given a unique value for each instance of the component. Since you're using the same component for both mobile and desktop, it's crucial that Livewire can distinguish between the two. The wire:key should ideally be unique for each render of the component. You can use the $version variable (assuming it's unique for each version) to generate a unique key.

Here's an updated version of your component calls with dynamic keys:

<livewire:edit-version :version="$version" wire:key="'mobileComponent-' . $version->id" />

<livewire:edit-version :version="$version" wire:key="'desktopComponent-' . $version->id" />

Make sure that $version->id is a unique identifier for each version. If $version doesn't have an id property or it's not unique, you'll need to find another way to generate a unique key.

If the issue persists after ensuring unique keys, you might want to clear the Livewire cache. You can do this by running the following command:

php artisan livewire:clear

This will clear the Livewire cache and might resolve issues related to outdated cached views.

Additionally, since you mentioned that this issue started occurring after an update, it's worth checking the Livewire upgrade guide for any breaking changes or additional steps you need to take when upgrading from your previous version to 3.3.5.

Lastly, using wire:ignore might not be the best approach in this case, as it tells Livewire to ignore updates to the element and its children. This could lead to inconsistencies in your component's state. Remove the wire:ignore unless you're sure that the element does not need to be updated by Livewire.

If none of these solutions work, consider providing more context or code snippets to the Laracasts forum or the Livewire GitHub repository issues section, as there might be other factors at play that are not evident from the information provided.

eddieace

2 years ago

Level 11

This is how i solved it, wire:key needs to be unique

wire:key="{{ str()->random(50) }}"

3 likes

vincent15000

2 years ago

Level 63

@eddieace Yes the key has always to be unique.

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

Snapey

2 years ago

Level 122

you don't want it to be random else the component will be rendered every request

Why do you have closing livewire tags? And the name is different

<livewire:edit-version :$version wire:key="mobileComponent"></livewire:editor.edit-version>   

<livewire:edit-version :$version wire:key="desktopComponent"></livewire:editor.edit-version>

edit-version and editor.edit-version

3 likes

bvfi-dev

1 year ago

Level 3

Just some more info when encountering this error, I had the same/similar problem. I had this error and also an additional JS Error "Uncaught Component not found:". Here are the most common causes:

In Livewire 3, use :key instead of wire:key on Livewire Components. Use wire:key on HTML inline elements.
Like Snapey said, bind actual Model ids to the key, instead of randomly generated ones
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. LW 3 Components Documentation

1 like

Please or to participate in this conversation.