Livewire 3.x数组分页异常：控制台报错Uncaught Could not find Livewire component in DOM tree

Hey there, let's work through this Livewire pagination issue together! That "Could not find Livewire component in DOM tree" error almost always boils down to how your component integrates with your extended layout or tiny DOM structure missteps that break Livewire's ability to track its components.

Let's break down the most likely fixes, step by step:

1. Double-check your layout's Livewire dependencies #

First off, make sure your layouts.app file includes all the required Livewire directives—it's super easy to miss these when setting up a custom layout:

• In the <head> section, add @livewireStyles
• Right before the closing </body> tag, add @livewireScripts

Without these, Livewire can't properly initialize or communicate with your component when using the extended layout—which explains why removing @extends made it work (you're probably using a minimal test view that doesn't skip these directives).

2. Ensure your component view has a single root element #

Livewire 3 requires every component's view to have one top-level root element. If your livewire.usersList view has multiple un-wrapped elements, Livewire loses track of the component instance when trying to update after a pagination click.

Fix this by wrapping your entire component content in a single container, like so:

<div>
    <!-- Your user list table goes here -->
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <!-- Other columns -->
            </tr>
        </thead>
        <tbody>
            @foreach($list as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Pagination links MUST be inside the component's root element -->
    {{ $list->links() }}
</div>

3. Simplify your component logic (no need for the public $list property) #

Looking at your component code, you defined a public $list property but aren't actually using it—you're passing a new paginated instance directly to the view. You can clean this up (it won't fix the error on its own, but it makes your code cleaner and avoids confusion):

class UsersList extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap'; // You can safely re-enable this now

    public function render()
    {
        return view('livewire.usersList', [
            'list' => User::paginate(10)
        ]);
    }
}

4. Clear caches and re-discover components #

Sometimes stale caches can cause weird Livewire behavior. Run these commands to rule that out:

php artisan view:clear
php artisan livewire:discover
php artisan optimize:clear

5. Check for JavaScript conflicts #

If your layouts.app loads other JS libraries (like older jQuery versions or custom DOM-manipulating scripts), they might interfere with Livewire's own DOM tracking. Try temporarily removing non-essential JS from your layout to test if pagination starts working—if it does, you'll know you need to adjust the load order or isolate conflicting scripts.

The key clue here is that removing the extended layout fixed the issue, so the problem is definitely in how your main layout interacts with Livewire. Start with steps 1 and 2—those are the most common culprits for this exact error!

备注：内容来源于stack exchange，提问作者Rezki Hani