Filament•2w ago

Livewire only supports one HTML element per component. Multiple root elements detected for component

Error message I get: Livewire only supports one HTML element per component. Multiple root elements detected for component: [auth.forgot-password-page]

<!-- Form Group -->
              <div>
                <div class="flex justify-between items-center">
                  <label for="password" class="block text-sm mb-2 dark:text-white">Password</label>
                  <a wire:navigate class="text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/forgot-password">Forgot password?</a>
                </div>
                <div class="relative">
                  <input type="password" id="password" name="password" class="py-3 px-4 block w-full border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" required aria-describedby="password-error">
                  <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
                    <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                    </svg>
                  </div>
                </div>
                <p class="hidden text-xs text-red-600 mt-2" id="password-error">8+ characters required</p>
              </div>
              <!-- End Form Group -->

<!-- Form Group -->
              <div>
                <div class="flex justify-between items-center">
                  <label for="password" class="block text-sm mb-2 dark:text-white">Password</label>
                  <a wire:navigate class="text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/forgot-password">Forgot password?</a>
                </div>
                <div class="relative">
                  <input type="password" id="password" name="password" class="py-3 px-4 block w-full border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" required aria-describedby="password-error">
                  <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
                    <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                    </svg>
                  </div>
                </div>
                <p class="hidden text-xs text-red-600 mt-2" id="password-error">8+ characters required</p>
              </div>
              <!-- End Form Group -->

11 Replies

toeknee•2w ago

Yes that is correct.

raheel3031•2w ago

Yes but what is the solution? How do I paste the code in here so it is in a container?

toeknee•2w ago

You didn't ask that... you posted a statement. The answer is to have one primary div

toeknee•2w ago

https://stackoverflow.com/questions/71259722/livewire-multiple-root-elements-detected

Stack Overflow

Livewire - Multiple root elements detected

I'm creating a table, whose rows are wrapped inside a livewire component <div class="card"> <div class="card-body"> <table class="table table-hover

raheel3031•2w ago

But I have wrapped everything in one div

toeknee•2w ago

<div>
  <!-- Form Group -->
  <div class="flex justify-between items-center">
    <label for="password" class="block text-sm mb-2 dark:text-white">Password</label>
    <a wire:navigate class="text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/forgot-password">Forgot password?</a>
  </div>
  <div class="relative">
    <input type="password" id="password" name="password" class="py-3 px-4 block w-full border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" required aria-describedby="password-error">
    <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
      <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
      </svg>
    </div>
  </div>
  <p class="hidden text-xs text-red-600 mt-2" id="password-error">8+ characters required</p>
  <!-- End Form Group -->
</div>

<div>
  <!-- Form Group -->
  <div class="flex justify-between items-center">
    <label for="password" class="block text-sm mb-2 dark:text-white">Password</label>
    <a wire:navigate class="text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/forgot-password">Forgot password?</a>
  </div>
  <div class="relative">
    <input type="password" id="password" name="password" class="py-3 px-4 block w-full border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" required aria-describedby="password-error">
    <div class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
      <svg class="h-5 w-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
      </svg>
    </div>
  </div>
  <p class="hidden text-xs text-red-600 mt-2" id="password-error">8+ characters required</p>
  <!-- End Form Group -->
</div>

is a html element.

raheel3031•2w ago

no it is still not resolved

toeknee•2w ago

Then you need to debug it and workout where you are causing this. The above won't cause it.

raheel3031•2w ago

Not able to solve it

baldiq•2w ago

I have the same issue. Right after installing the filament according to the guide, I went to the login page and it triggered the error. "Livewire only supports one HTML element per component. Multiple root elements detected for component: [filament.pages.auth.login]" Before installing the filament, I already had my livewire running for my listing and it works.

toeknee•2w ago

sounds like you have something injecting something if it's an existing app

Gaming

Programming

Livewire only supports one HTML element per component. Multiple root elements detected for component