I got this error when using laravel livewire esm and editOnClick

[vqhdev]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

Yes

PHP Version

8.2.12

PowerGrid

5.4

Laravel

10.48

Livewire

3.4

Alpine JS

No response

Theme

Tailwind 3.x, Bootstrap

Describe the bug.

I got this error when using laravel livewire esm and editOnClick? If I use the livewire.js file, will it work normally? please give me solution

To Reproduce...

First click on "FOO" then....

Extra information

<?php

namespace App\Livewire;

use App\Models\Proxy;
use Illuminate\Support\Carbon;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Traits\WithExport;

final class ProxyTable extends PowerGridComponent
{
    public array $host;

    public function setUp(): array
    {
        return [
            Header::make()->showSearchInput(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    public function datasource(): Builder
    {
        return Proxy::query();
    }

    public function relationSearch(): array
    {
        return [];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('id')
            ->add('protocol')
            ->add('host')
            ->add('port')
            ->add('username')
            ->add('password')
            ->add('last_checked_at')
            ->add('last_used_at')
            ->add('is_active')
            ->add('created_at');
    }
    public function onUpdatedEditable(string|int $id, string $field, string $value): void
    {
        $this->validate();
        Proxy::query()->find($id)->update([
            $field => $value,
        ]);
    }
    public function onUpdatedToggleable(string $id, string $field, string $value): void
    {
        $this->skipRender();
        Proxy::query()->find($id)->update([
            $field => $value,
        ]);
    }
    public function columns(): array
    {
        return [
            Column::make('Id', 'id'),
            Column::make('Protocol', 'protocol')
                ->sortable()
                ->searchable(),
            Column::make('Host', 'host')
                ->sortable()
                ->editOnClick()
                ->searchable(),

            Column::make('Port', 'port')
                ->sortable()
                ->searchable(),

            Column::make('Username', 'username')
                ->sortable()
                ->searchable(),

            Column::make('Password', 'password')
                ->sortable()
                ->searchable(),

            Column::make('Last checked at', 'last_checked_at', 'last_checked_at_formatted')
                ->sortable()
                ->searchable(),


            Column::make('Last used at', 'last_used_at')
                ->sortable()
                ->searchable(),

            Column::make('Is active', 'is_active'),

            Column::make('Created at', 'created_at', 'created_at_formatted')
                ->sortable()
                ->searchable(),
            Column::action('Action')
        ];
    }

    public function filters(): array
    {
        return [];
    }

    #[\Livewire\Attributes\On('delete')]
    public function delete($rowId): void
    {
        $this->dispatch('confirm', [
            'message' => __('messages.confirm_delete'),
            'callback' => 'confirmDelete',
            'params' => ['rowId' => $rowId],
        ]);
    }
    #[\Livewire\Attributes\On('confirmDelete')]
    public function confirmDelete($rowId): void
    {
        Proxy::find($rowId)->delete();
        $this->dispatch('alert', [
            'message' => __('messages.delete_success'),
        ]);
    }
    public function actions(Proxy $row): array
    {
        return [
            Button::add('delete')
                ->slot(__('messages.delete'))
                ->id()
                ->class('btn btn-sm btn-danger')
                ->dispatch('delete', ['rowId' => $row->id])
        ];
    }

    /*
    public function actionRules($row): array
    {
       return [
            // Hide button edit for ID 1
            Rule::button('edit')
                ->when(fn($row) => $row->id === 1)
                ->hide(),
        ];
    }
    */
}

import { Alpine, Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';
Alpine.store('darkMode', {
    init() {
        this.on = window.localStorage.getItem('theme') === 'dark';
    },
    on: false,
    toggle() {
        window.localStorage.setItem('theme', !this.on === true ? 'dark' : 'light');
        this.on = !this.on;
    }
});
Livewire.start();
window.addEventListener('confirm', function (e) {
    if (confirm(e.detail[0].message)) {
        Livewire.dispatch(e.detail[0]['callback'], e.detail[0].params || []);
    }
});
window.addEventListener('alert', function (e) {
    alert(e.detail[0].message);
});

[Luan Freitas]

Hello! Does this still happen? I think the problem is the lack of import of powergrid.js

https://livewire-powergrid.com/get-started/configure.html#import-js-and-css

[Luan Freitas]

No answers, so closing this