@teleport directive creates component not found error #6750
Replies: 3 comments 7 replies
-
|
I have encountered a similar issue. When using Livewire as full page component, and you have teleport in it. After calling a method or triggering a rerender, anything that was teleported to the body is gone. In my case it was a contextmenu and couple of modals. |
Beta Was this translation helpful? Give feedback.
-
|
Yes absolutely. I've just noticed it is causing only for using full page livewire components. |
Beta Was this translation helpful? Give feedback.
-
|
As mentioned in the other discussion, I'm not sure if this is a bug as mentioned in the documentation:
A full page-component, is a Livewire component, so technically you are not teleporting HTML outside your component. <div wire:ignore>
@teleport('body')
<div x-show="open">
Modal contents...
</div>
@endteleport
</div> |
Beta Was this translation helpful? Give feedback.
-
To reproduce/resources/views/layouts/app.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', 'Chat') }}</title>
@livewireStyles
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased" x-data="modal">
<main class="">
{{ $slot }}
</main>
<script>
window.addEventListener('alpine:init', () => {
Alpine.data('modal', () => ({
modalOpen: false,
quoteOpen: false,
toggleModal() {
this.modalOpen = !this.modalOpen
},
toggleQuote() {
this.quoteOpen = !this.quoteOpen
}
}))
})
</script>
@livewireScripts
</body>
</html>
Full Page component: (/views/livewire/components/test-component.blade.php) <div class="flex flex-col justify-center items-center"
x-on:form-submitted.window="toggleQuote" x-on:quote-submitted.window="toggleModal">
<button class="btn btn-primary mt-8" @click="modalOpen = true">Sign Up</button>
@teleport('body')
<div class="fixed top-0 left-0 right-0 h-screen w-screen" x-show="modalOpen">
<div class="h-full w-full bg-black/50"></div>
<livewire:components.test-form/>
</div>
@endteleport
@teleport('body')
<div class="" x-show="quoteOpen">
<livewire:components.test-modal/>
</div>
@endteleport
</div>
App/Livewire/Components/TestComponent.php <?php
namespace App\Livewire\Components;
use Livewire\Attributes\Layout;
use Livewire\Attributes\On;
use Livewire\Component;
class TestComponent extends Component
{
#[On('form-submitted')]
#[Layout('layouts.app')]
public function render()
{
return view('livewire.components.test-component');
}
}/views/livewire/components/test-form.blade.php <div class="w-full h-full grid place-items-center absolute top-0 left-0 right-0"
x-on:form-submitted="console.log('inside component')">
@if(session('message'))
<div class="alert alert-success mx-auto">
{{session('message')}}
</div>
@endif
<form class="bg-white rounded-md min-w-md flex flex-col space-y-4 p-4" wire:submit="submit"
@click.outside="modalOpen = false">
<div class="flex flex-col space-y-2" x-id="['name']">
<label :for="$id('name')">Name</label>
<input :id="$id('name')" type="text" class="input input-bordered" wire:model.live="form.name"
wire:dirty.class="input-error"
placeholder="Name"/>
@error('form.name') <span class="text-xs text-error">{{$message}}</span> @enderror
</div>
<div class="flex flex-col space-y-2" x-id="['age']">
<label :for="$id('age')">Age</label>
<input :id="$id('age')" type="number" class="input input-bordered" wire:model.blur="form.age"
placeholder="Age"/>
@error('form.age') <span class="text-xs text-error">{{$message}}</span> @enderror
</div>
<div class="flex flex-col space-y-2" x-id="['occupation']">
<label for="occupation">Occupation</label>
<select class="select" id="occupation" wire:model.blur="form.occupation">
<option selected>Select occupation</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="doctor">Doctor</option>
<option value="engineer">Engineer</option>
</select>
@error('form.occupation') <span class="text-xs text-error">{{$message}}</span> @enderror
</div>
<div class="flex flex-col space-y-4">
<div class="flex space-x-4 items-center" x-id="['term']">
<input :id="$id('term')" type="checkbox" name="term" value="agree" wire:model.blur="form.term"
class="checkbox">
<label :for="$id('term')" class="label cursor-pointer">I agree to the terms and conditions</label>
</div>
@error('form.term') <span class="text-xs text-error">{{$message}}</span> @enderror
</div>
<button class="btn btn-primary btn-circle w-full">Submit</button>
</form>
</div>/views/livewire/components/test-modal.blade.php <div class="h-screen w-screen fixed top-0 left-0 right-0">
<div class="h-full w-full bg-black/25"></div>
<form class="bg-white p-4 absolute top-1/4 left-1/4 right-1/4 grid place-content-center gap-4" wire:submit="submit"
@click.outside="toggleQuote">
<div class="flex flex-col space-y-2">
<label for="quote">Quote</label>
<input id="quote" type="text" class="input input-bordered" wire:model.live="quote">
</div>
<button class="btn btn-primary">Submit</button>
</form>
</div>This creates 'component not found error'. But if add wire:ignore to /livewire/components/test-component.blade.php <div class="flex flex-col justify-center items-center"
x-on:form-submitted.window="toggleQuote" x-on:quote-submitted.window="toggleModal" wire:ignore>It resolves the issue. But it shouldn't be the absolute solution. |
Beta Was this translation helpful? Give feedback.
-
|
Philo you are a wizard. Wrapping the teleport in wire:ignore is clever. Thanks a bunch! 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
Happy to hear that it works. |
Beta Was this translation helpful? Give feedback.
-
|
It is not documented in https://livewire.laravel.com. But it should be clear in the documentation for the life saving. 😑 |
Beta Was this translation helpful? Give feedback.
-
|
Docs are on the way: https://github.com/livewire/livewire/pull/6631/files 😄 |
Beta Was this translation helpful? Give feedback.
-
|
I tried to replicate the issue but was not able to do so: Another simplified example: Parent component: class ParentComponent extends Component
{
public $title = '';
public function render()
{
return <<<'BLADE'
<div>
<input type="text" wire:model.live="title" />
@teleport('body')
<livewire:child-component/>
@endteleport
</div>
BLADE;
}
}Child component class ChildComponent extends Component
{
public $title = '';
public function render()
{
return <<<'BLADE'
<div>
<input type="text" wire:model.live="title" />
</div>
BLADE;
}
}When I start typing in either the parent or child component I don't get an error and the contents of the teleport remains. |
Beta Was this translation helpful? Give feedback.
-
|
I've just noticed that it only create error if:
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Livewire version
3.0.2
Which PHP version are you using?
PHP 8.2
Repository URL
No response
Steps To Reproduce
The bug is:
When using livewire full page component, any livewire component inside @teleport directive causing..
Teleporting a livewire component creating this issue. Any dynamic interaction of teleporting component such as changing forms modelValue, submitting forms, disptaching or listening events etc. creates 'component not found' error. Anyone can easily reproduce this issue by:
It should be fixed as soon as possible.
Additional information
No response
Please confirm (incomplete submissions will not be addressed)
Beta Was this translation helpful? Give feedback.
All reactions