Level 73
In Livewire everything needs to be in one parent element, so if you put it like this:
<div>
<div wire:loading>Livewire test...</div>
<div wire:loading.remove>
</div>
it should work.
4 likes
Nov 15, 2021
4
Level 3
Multiple root elements detected error when adding wire:loading
Hi all,
I have a simple paginator working with a clean install of larvel and livewire, everything works, until I try to add "loading" and "loaded" elements to the livewire blade template eg.
adding
div wire:loading>Livewire test...</div>
or
<div wire:loading.remove>
causes the javascript error in the console:
Livewire: Multiple root elements detected. This is not supported.
Quick code summary
web.php
Route::get('/posts', function() {
return view('posts');
});
posts.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}"/>
@livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="antialiased min-h-screen">
<!-- Page Content -->
<main>
<livewire:posts.index/>
</main>
@stack('modals')
@livewireScripts
</body>
</html>
/resources/views/livewire/post/index.blade.php
<div>
@if ($posts->count())
@foreach ($posts as $post)
<div class="mt-10"><a class="uppercase text-xl text-blue hover:underline"
href="{{ $post->u_r_l }}">{!! $post->heading !!}</a></div>
<div class="text-sm py-3">
Published: {{ $post->expiry_date?->format('j F Y') ?: $post->t_stamp_updated?->format('j F Y') }}</div>
<div>{!! $post->blurb !!}… <a class="text-blue hover:underline"
href="{{ $post->u_r_l }}">more</a></div>
@endforeach
@else
<p class="text-center">No posts yet. Please check back later.</p>
@endif
@if ($posts->count())
<div class="mt-6">
{{ $posts->links() }}
</div>
@endif
</div>
/App/Http/Livewire/Post/Index.php
<?php
namespace App\Http\Livewire\Post;
use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;
class Index extends Component
{
use WithPagination;
public function render()
{
sleep (1);
return view('livewire.post.index', [
'posts' => Post::orderBy('t_stamp_updated', 'desc')->paginate(10)
]);
}
}
Adding either (or both) of these two lines to /resources/views/livewire/post/index.blade.php causes the dreaded "Multiple root elements" detected error:
<div wire:loading>Livewire test...</div>
<div wire:loading.remove>
Any help appreciated!
Please or to participate in this conversation.