Issue with Laravel Jetstream

[RibesAlexandre]

Hi,

When you try to use this package with a layout extend by Laravel JetStram default layout. You got a Javascript error :

Uncaught (in promise) Component not found: JJ8Yux7OzeM3ZVAnkGOG

Steps to reproduce :

• Install a fresh Laravel app
• Install Filament
• Install Laravel Jetstream
• Install Fabricator
• Try to preview a created page and after try to make an action

I've tried with theses steps and got this error. Is seems we can not use the preview with a template which contains livewire components.

EDIT : When I remove @livewire('navigation-menu') it works perfectly. I've tried to use Filament Hook like this :

{{ \Filament\Support\Facades\FilamentView::renderHook('filament-fabricator::menu') }}

FilamentView::registerRenderHook(
    'filament-fabricator::menu',
    fn (): string => Blade::render('@livewire(\'navigation-menu\')'),
);

But got the same error

Any solution to fix this ?

Thanks,

[Z3d0X]

Hi could you please provide me with a reproduction repo for this issue

[RibesAlexandre]

Hi could you please provide me with a reproduction repo for this issue

Hi,

Of course, you can find it here : https://github.com/RibesAlexandre/FilamentFabricatorLivewireError

Thanks, Regards,

[pboivin]

Hey friends. Seems to be an issue with Peek and/or Livewire. At a glance, it looks like the Livewire components inside of the preview are not properly cleaned up when the preview modal is closed. I'll keep testing.

[pboivin]

Hi @RibesAlexandre,

I think I've got a fix for this. Can you help me test it? Here are the steps to test it on your demo repository linked above:

Switch to the 2.x branch (the fix is not yet released) :

composer require pboivin/filament-peek:"2.x-dev"

Publish the config file :

php artisan vendor:publish --tag=filament-peek-config --force

Then, configure Peek to use the new internal preview URL option :

'useInternalPreviewUrl' => true,

You also need to configure some middleware because your template makes use of the Auth facade :

'internalPreviewUrlMiddleWare' => ['web'],

That should be it. Let me know if you have any other questions.

Thanks!

EDIT: using the web middleware

[pboivin]

@Z3d0X There is now a workaround for this issue available in Peek v2.2.0.

It's documented here: https://github.com/pboivin/filament-peek/discussions/107

[RibesAlexandre]

It works perfectly ! 👍

Great job, Thanks you