[Solution] Issue when using Livewire components in previews

[pboivin]

A few people have reported issues when using Livewire components inside of Peek previews. The error message looks something like this, depending on the exact version of Livewire:

Uncaught (in promise) Component not found: tv0sZYGF9ZCK1PsaYcAN

This only affects Peek 2.x (Livewire v3).

The issue seems related to the srcdoc attribute on the iframe, which we use internally to render Blade previews. Previews rendered through the src attribute (using a preview URL) are not affected by the issue.

As a workaround, I've added a new internalPreviewUrl section in the configuration:

• Set enabled to true to render all Blade previews through an internal preview route, managed by the plugin.
• Then, use middleware to attach any additional middleware to the preview route. For example, the web middleware can be used to make sure the PHP session is started in the context of the preview.

This is available as of Peek v2.2.0.

---

Related:

• Issue with Livewire component inside of preview template #100
• UX breaks after using the preview button. #147

[RibesAlexandre]

It works perfectly ! 👍

Great job,
Thanks you

[SOD96]

Hey @pboivin I think I'm running into an issue with this on two projects. Weirdly I remember fixing it off the back of reading #147 I can't raise an issue for it so apologies for bumping this old discussion topic.

I've got the ability to add Livewire components into a page effectively using a builder that we've setup, this has normally been fine but I've just checked and sure enough, if I hit preview then try save it throws up the good ol Uncaught Component not found: cjZnFxitN8s1r0L7ki8Y

I've tried every which way in providing a wire:key, I've tried wire:ignore, I'm absolutely using your config variable to do the preview to a URL trick:

    'internalPreviewUrl' => [
        'enabled' => true,
        'middleware' => [
            'web',
        ],
        'cacheDuration' => 60,
    ],

The preview renders a dynamic component, which is just our page model which has a json schema of blocks attached, pretty straight forward only one of those blocks is a livewire form, for contact submissions

<div class="px-4 py-4 pb-6 mt-5 rounded-lg">
    <livewire:dynamic-form
        :form="$form"
    />
</div>

This is how it looked before I tried every which way of adding livewire keys and other properties to it, none of it seems to matter.

Do you have any insight into whether anything has regressed here or am I doing something wrong?

Everything else works fine, it's just any livewire component.

[pboivin]

Hi @SOD96 , I haven't encountered this error in a while. Can you share some code with me, either publicly or privately, to help me reproduce and test this issue? I'm curious to see a bit more on how your preview is configured and what's happening in the dynamic-form component.