[Bug]: Lazy loaded table results in browser console warnings and errors

[darbyfelton]

What happened?

After upgrading from v3.2.6 to v3.4.22, when using a table component that is lazy loaded, the browser developer console shows warnings and errors, whereas before the upgrade, it did not:

Warnings:

Alpine Expression Error: currentlyReorderingStatus is not defined

Expression: "!currentlyReorderingStatus"

The above warning appears 11 times for various views, but I omit the repetition for brevity.

Alpine Expression Error: paginationTotalItemCount is not defined

Expression: "paginationTotalItemCount"

Errors:

Uncaught ReferenceError: currentlyReorderingStatus is not defined

The above error appears 2 times.

Uncaught ReferenceError: paginationTotalItemCount is not defined

How to reproduce the bug

To ensure that this wasn't just a problem with the specific table in my app where I experienced this error, I created a new, basic example UserTable:

<?php

namespace App\Livewire;

use App\Models\User;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

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

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

    public function columns(): array
    {
        return [
            Column::make('ID', 'id')
                ->sortable(),
            Column::make('Name', 'name')
                ->searchable()
                ->sortable(),
        ];
    }
}

In my view script, either of the following usages of the table reproduces the issue:

<livewire:user-table lazy />

<livewire:user-table lazy="on-load" />

Fortunately, the table still appears to function despite the console warnings and errors. Removing the lazy attribute causes the warnings and errors to disappear from the console on page reload.

Package Version

3.4.22

PHP Version

8.3.x

Laravel Version

11.10.0

Alpine Version

3.14.1

Theme

Tailwind 3.x

Notes

My project is using Livewire v3.5.4.

Error Message

Warnings:

Alpine Expression Error: currentlyReorderingStatus is not defined

Expression: "!currentlyReorderingStatus"

The above warning appears 11 times for various views, but I omit the repetition for brevity.

Alpine Expression Error: paginationTotalItemCount is not defined

Expression: "paginationTotalItemCount"

Errors:

Uncaught ReferenceError: currentlyReorderingStatus is not defined

The above error appears 2 times.

Uncaught ReferenceError: paginationTotalItemCount is not defined

[jackbayliss]

Same is also happening to me, Uncaught ReferenceError: currentlyReorderingStatus is not defined

[lrljoe]

Strongly suggest you bundle both Livewire and the Livewire Tables packages. This prevents issues where the assets are lazily loaded.

[matzeschmitt]

Hello,

Yes, we can confirm that too. Unfortunately this is a big issue for us because we have a lot of lazy loaded tables.

@rappasoft Is there anything we can do or help to fix it?

Many thanks! Matthias

[qwasyx0]

Downgrading to version 3.4.16 seems to be the only fix for now.

[lrljoe]

@matzeschmitt @qwasyx0 @darbyfelton

Are you injecting the assets, or bundling them?

The issue certainly doesn't appear when bundling the assets, so it may be down to how injection works in conjunction with lazy loading.

I'd strongly recommend bundling both Livewire core, and the Tables package.

[darbyfelton]

@lrljoe I followed the instructions to bundle the assets that I found here: https://rappasoft.com/docs/laravel-livewire-tables/v3/start/recommended#content-bundling-the-assets.

My app has been around for quite some time, and has some differences from what is discussed in the instructions (e.g., I do not have an app.js file specifically), so maybe I've missed something, but after tinkering with the configuration in various ways, I'm still getting the same result that this issue describes, whether or not the assets are bundled.

@qwasyx0 Says that downgrading to 3.4.16 fixes the issue, and I can confirm the same for my project.

While I understand that it is recommended to bundle the assets, I lean toward the idea that something changed between 3.4.16 and 3.4.22 to cause these errors to occur for lazy loaded tables, at least in some cases, and it likely could be fixed, whether or not the assets are bundled, given that the errors did not appear in 3.4.16 and prior.

[gantispam]

Same issue with same context.

[lrljoe]

For clarity - it's only when the tables are lazily loaded?

I don't ask in a "don't lazily-load" tables approach, more that I need to identify exactly what the issue is, so that I can replicate and fix it.

So you say that 3.4.16 works, and 3.4.22 (and later) doesn't.

Do any of the following have the same issue for you?

v3.4.17 v3.4.18 v3.4.19 v3.4.20 v3.4.21

Knowing which version introduced the issue will massively help me narrow down where the issue was introduced, and help me rectify it very quickly.

[lrljoe]

I'm doing some tinkering just to validate what's not quite right, but versions where it broke will help!

I do plan to adjust how the tables code works, as there have ben a lot of changes since Livewire V3 was actually released (we were working with pre-release code to migrate the Tables to work on-release).

[lrljoe]

I'm working on a fix for this, if you'd like to help me to test this, then please reach out to me on the official Discord, the more the merrier as far as this is concerned!

[joseffilzmaier]

I have encountered the same issue. To me the issue only occurs in Firefox, however. Chromium based browsers seem to have no such error messages

[lrljoe]

Yeah, the issue is due to how Livewire handles Lazily Loaded Components.

Please do nudge me on the official Discord if you'd like to test the fixes

[darbyfelton]

Yeah, the issue is due to how Livewire handles Lazily Loaded Components.

Please do nudge me on the official Discord if you'd like to test the fixes

Thank you, @lrljoe, I would like to test the fixes if possible and started a discussion here.

[lrljoe]

@darbyfelton - the fix is in the "development" branch as of today :)

[lrljoe]

@darbyfelton @joseffilzmaier @gantispam @qwasyx0 - This should now be fixed in 3.5.4

[lrljoe]

Let me know if issue still persists

[joseffilzmaier]

Can confirm, thanks :100:

[darbyfelton]

@lrljoe The fix appears to resolve the issue for me. Thank you kindly! 😄

[qwasyx0]

@lrljoe I finally got to upgrade my old (using v3.5.10) and new projects and can confirm the issue is resolved. Thank you.

However having a placeholder HTML still produces the same issue.

Reproducing is simple, just add this piece of code to lazy loaded table:

public function placeholder()
    {
        return <<<'HTML'
        <div class="w-full h-20 bg-white rounded shadow-md">
            <div class="flex items-center justify-center w-full h-full bg-autosas-opacity-blank">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-zinc-700 animate-spin" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
            </div>
        </div>
        HTML;
    }

This results in the same exact errors in console after table is fully loaded.

[lrljoe]

@qwasyx0 - can you raise a new issue for this please so I don't lose track of it