Cannot read properties of undefined (reading 'nestable')

[abrardev99]

Hi, I'm facing the following issue:

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

Expression: "function () {

let nestedTree = $('#filament_tree_container_BxCAKyCkwLPukL2rHBKg').nestable
.
.
.

To be exact, it's happening in components/tree/index.php file. Looks like its not able to find the JQuery here. $('#{{ $containerKey }}') returns undefined while document.getElementById('{{ $containerKey }}') returns object.

[abrardev99]

The temporary solution we adopted is loading Jquery and package js at the end of file. For example, we created the view:

<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
        integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
        crossorigin="anonymous"></script>
<script src="{{asset('js/solution-forest/filament-tree/filament-tree-min.js')}}"></script>

And loaded it at the end of body using Filament hook.

->renderHook(
    'panels::body.end',
    fn (): View => view('filament/resources/custom-body-end-js-cmspanel'),
)

[abrardev99]

I attempted a PR that registers JS assets at the body end. https://github.com/solutionforest/filament-tree/pull/38

[RemiHin]

Running in to this issue aswell

[curder]

Same issue, Sometimes due to unstable network, will encounter the problem that jquery-3.6.0.min.js cannot be loaded.

Below is my solution:

1. Add new middleware named ReplaceAssets and replace <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> string.
2. Register the new middleware.
3. Download jquery-3.6.0.min.js and saved to public/js/solution-forest/filament-tree/jquery.min.js.
4. Loaded it at the start of body using Filament hook.

Below is the demo code:

1. Add new middleware

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class ReplaceAssets
{
    /**
     * Handle an incoming request.
     *
     * @param  Closure(Request): (Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);

        $search = '<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>';
        $replace = '';

        $response->setContent(Str::replace($search, $replace, $response->getContent()));

        return $response;
    }
}

2. Register middleware

<?php

namespace App\Providers\Filament;

use App\Http\Middleware\ReplaceAssets;

class AdminPanelServiceProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->middleware([
                // ...
                DispatchServingFilamentEvent::class,
                ReplaceAssets::class, // Add this line
            ]);
    }
}

3. Download jquery-3.6.0.min.js to public/js/solution-forest/filament-tree/jquery.min.js
4. Loaded it at the start of body using Filament hook

<?php

namespace App\Providers\Filament;

use function asset;

class AdminPanelServiceProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->renderHook(
                'panels::body.start',
                fn (): string => sprintf("<script src='%s'></script>", asset('js/solution-forest/filament-tree/jquery.min.js')),
            );
    }
}

[iotron]

Hello, any update on this issue?

[cklei-carly]

See #51