Unable to initialize MingleJS in a Filament panel

[kyojin-dev]

I'm encountering an issue when trying to initialize MingleJS within a Filament panel. The error message I'm receiving is:

Alpine Expression Error: Cannot read properties of undefined (reading 'Elements')

The error occurs when the following code is executed:

<div wire:snapshot="..." wire:effects="[]" wire:id="EHZsj0AFaHSCK7n9JGMc" x-init="
    window.Mingle.Elements['resources/js/Test/index.js']
        .boot(
            'mingle-syLGO6cR7AZ4TL7Q',
            'EHZsj0AFaHSCK7n9JGMc',
        )
"></div>

It seems that the window.Mingle object is not properly defined or available at the time the script tries to access window.Mingle.Elements.

Interestingly, if I hardcode the script tag with the direct URL to the Mingle component's JavaScript file, like this:

<script type="module" src="http://127.0.0.1:5173/resources/js/Test/index.js" data-navigate-track="reload"></script>

It works without any problems.

I suspect that the issue lies in the way the Mingle JavaScript is being loaded and initialized within the Filament panel. I have the necessary hook in place:

FilamentView::registerRenderHook(
    PanelsRenderHook::HEAD_END,
    fn(): string => view('mingle-head')
);

But it appears that @stack('scripts') is not injecting the required scripts correctly within the Filament panel context.

Has anyone successfully managed to initialize MingleJS within a Filament panel? If so, I would greatly appreciate any insights or suggestions on how to resolve this issue.

Please let me know if you need any additional information or if there's anything else I can provide to help troubleshoot the problem.

Thank you in advance for your assistance!

Steps to Reproduce:

1. Set up a Filament panel
2. Integrate MingleJS into the Filament panel
3. Use the provided hook to include the necessary scripts
4. Observe the "Alpine Expression Error: Cannot read properties of undefined (reading 'Elements')" error in the browser console

Expected Behavior: MingleJS should be properly initialized and functional within the Filament panel, without any errors related to window.Mingle.Elements.

Actual Behavior: MingleJS fails to initialize within the Filament panel, throwing an error stating that it cannot read properties of undefined (reading 'Elements').

Additional Context:

• Hardcoding the script tag with the direct URL to the Mingle component's JavaScript file works perfectly.
• I have double-checked the setup and configuration of MingleJS and Filament.
• I have ensured that the necessary dependencies are installed and up to date.
• I have tried different approaches and configurations but still encounter the same issue.

[ijpatricio]

Hello @kyojin-dev

Thank you for such an extensive, detailed description. ❤️

I'm glad you were able to unblock the issue! Further more, I want to implement this to be the most friendly possible, and I will do just that.

I'll be updating such status here.

Apart from that, are you missing anything? Anything Mingle should address that I'm forgetting?

[kieranmcclure]

Hi, I'm also encountering this issue, however I'm not using Filament.

The only way I can get it working is to import my Mingle component's index.js file in Laravel's app.js file

[mrfelipemartins]

@kieranmcclure I was facing the same issue without using Filament and ir order to solve it I had to add this to my layout file:

@viteReactRefresh

Source: React

[kieranmcclure]

@mrfelipemartins Thank you for that, that seems to have done the trick!

[ijpatricio]

Hey everyone @kyojin-de @kieranmcclure @mrfelipemartins

Thank you for using and reporting the issues.

I missed that point and is now fixed in docs as well.

Enjoy, and thank you!

https://minglejs.unitedbycode.com/manual-instructions

Filament page code, add the render hook:

<?php

namespace App\Filament\Filament\Pages;

use Filament\Pages\Page;
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Foundation\Vite;

class DemoReact extends Page
{
    protected static ?string $navigationIcon = 'icon-react';

    protected static string $view = 'filament.filament.pages.demo-react';

    public function mount()
    {
        FilamentView::registerRenderHook(
            name: PanelsRenderHook::HEAD_START,
            hook: fn() => app(Vite::class)->reactRefresh(),
        );
    }
}

[ijpatricio]

I'll probably make a helper to make it easier, but as it is it solves the issues

[ijpatricio]

Check the added snippet, for the Filament render hook we must put on the page we're rendering.

We can do that individually, or for all, in a Provider.

[ijpatricio]

Example from docs:

[ijpatricio]

Link: https://minglejs.unitedbycode.com/filament-and-react