[Bug]: TypeError: Cannot read properties of null (reading '__livewire')

[amshehzad]

What happened?

I just installed the package and created a component. when I render the users component, I can see the page but in the console I see errors:

Now if I do any action ( sort, search etc ) I don't see the component at all and have the above mentioned errors in the console

How to reproduce the bug

No response

Package Version

2.15.0

PHP Version

8.1.x

Laravel Version

10.3.1

Alpine Version

No response

Theme

3.7.1 Bootstrap 5.x

Notes

No response

Error Message

Uncaught TypeError: Cannot read properties of null (reading '__livewire')

Uncaught ReferenceError: paginationTotalItemCount is not defined

[lrljoe]

Do you have livewire installed? Which version?

[amshehzad]

Yes, I'm already using Livewire in all difference places. I'm using v2.12.3

[lrljoe]

Okay, that's certainly unusual, please can you confirm that you: 1) Have not published the views for this package 2) That you have not added any render() etc to your table component 3) That you're referencing your table component within a blade in the normal way? 4) Can you share your table component code if possible please?

[amshehzad]

Certainly. I just created datatable using the command from documentation:

and here is the component:

class UserTable extends DataTableComponent
{
    protected $model = User::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id');
    }

    public function columns(): array
    {
        return [
            Column::make("Id", "id")
                ->sortable(),
            Column::make("Created at", "created_at")
                ->sortable(),
            Column::make("Updated at", "updated_at")
                ->sortable(),
        ];
    }
}

and I'm rendering in my blade view:

@extends('layouts.app')

@section('content')
    {{--<livewire:datatables.user-datatable />--}}
    <livewire:user-table/>
@endsection

currently I'm using my own custom datatable but now I'm trying to replace all of my datatables with this package.

when I load the page I see the table properly:

I can see the above mention errors in console though.

but when I click on any action sort, pagination etc

the component disappears

[lrljoe]

Can you please try and wrap the component in a div?

@extends('layouts.app')

@section('content')
   <div>
       <livewire:user-table />
    </div>
@endsection

In your app.layout, do you have any wire:loading elements wrapping around the content section?

I noticed that you're referencing the cdn.min.js - what're you including from there, and can you share the references in your layout to this please?

[lrljoe]

If you use discord, it may be easier to bounce back/forth on the Rappasoft discord: https://discord.gg/9dR8R3DwB

[mrl22]

I have this same issue in Tailwind view only. When switching the config to Bootstrap4 or 5 I get no errors, but there is no CSS obviously.

Fresh Laravel 10 install with Laravel UI Kit.

Was there a result or resolution to this @lrljoe ?

[lrljoe]

The issue that the other gent had was undiagnosed, and seemed to be related to another package he was using, but it worked perfectly when he tried it in a fresh install.

[mrl22]

Thank you.

I have just resolved this in my version. I will explain what I did for anyone else who may see this.

It seems that in my app.js (comes from blade-ui-kit):

import Alpine from 'alpinejs'
Alpine.start()

This, for some reason was conflicting with laravel-livewire-tables.

I changed it to the following and it is now working:

import Alpine from 'alpinejs'
window.Alpine = Alpine
window.Alpine.start()

[lrljoe]

That's good to hear, with v3 currently in testing (which uses Livewire 3), that oddity goes away as well.