"Uncaught Snapshot missing on Livewire component with id" after adding post and refresh list

CreatePost component:

class CreatePost extends Component { public $title = ''; public $content; public $currentUrl; public function mount(Request $request) { $this->currentUrl = $request->url(); } public function submit() { // dd($this->title, $this->content, Auth::user()->id, $this->currentUrl); if($this->title == null || $this->title == ''){ $this->dispatch( 'popUpTimer', type : 'error', title : 'The title field must be filled!', position : 'top-end' ); }

    Post::create([
        'title' => $this->title,
        'content' => $this->content,
        'user_id' => Auth::user()->id
    ]);

    $this->dispatch(
        'popUpTimer',
            type : 'success',
            title : 'Post added!',
            position : 'top-end'  
        );
    
    $this->reset(['title', 'content']);
    $this->dispatch('refreshPostsList');
}
public function render()
{
    return view('livewire.create-post');
}

}

PostsList component:

class PostsList extends Component { protected $listeners = ['refreshPostsList']; public $posts; public $loggedUser;

public function mount()
{
    $this->posts = Post::orderBy('created_at', 'desc')->get();
    $this->loggedUser = Auth::user();
}
public function refreshPostsList()
{
    $this->posts = Post::orderBy('created_at', 'desc')->get();
}
public function render()
{
    return view('livewire.posts-list');
}

}

posts-list.blade.php:

in the blade file where I placed the list, I simply added @livewire('posts-list')

I read that you need to add unique wire:key keys, but I think I misunderstood something. Could anyone help? Or where can I look for help?

Sheenaryder

2 years ago

Level 1

Here are some possible causes and solutions that I found:

The error message typically indicates that Livewire is trying to update a component that it no longer has a reference to. This can happen if the DOM has been manipulated outside of Livewire’s knowledge, such as through JavaScript or other means. One way to fix this is to make sure that you are passing the data to your child components correctly. Instead of using an array, you can use a named parameter, such as @livewire('features.languages.edit', ['item' => $item], key("language-{$item->id}")). Another way to fix this is to move your Alpine.js components into your app.js file and call the functions using x-data on a parent div, passing options as appropriate. This can prevent conflicts between Livewire and Alpine.js. A third way to fix this is to update your Livewire version to the latest one, as there might be some bugs in the previous versions that cause this error. You can check the Livewire changelog for more details. I hope this helps you resolve the error and improve your code.

Please or to participate in this conversation.