Issue For Latest Laravel 11 + Bootstrap 5 Alpine Expression Error

[killallskywalker]

Livewire PowerGrid version

6.1.11

Livewire version

3.5.18

Laravel version

11.39.1

Which PHP version are you using?

PHP 8.3

Which Theme are you using?

Bootstrap 5

Have you published the resource files and customized them? (php artisan vendor:publish)

Yes

What is the problem?

Currently just reinstall livewire powergrid and setup it based on documentation . Somehow when using table , it cause an error where

Error:
Uncaught ReferenceError: pgRenderActions is not defined

Warning:

`livewire.js?id=951e6947:1123 Alpine Expression Error: pgRenderActions is not defined

Expression: "pgRenderActions"

​…​

​​undefined​​flex​ handleError @ livewire.js?id=951e6947:1123 (anonymous) @ livewire.js?id=951e6947:1196 Promise.catch (anonymous) @ livewire.js?id=951e6947:1196 tryCatch @ livewire.js?id=951e6947:1116 evaluate @ livewire.js?id=951e6947:1140 (anonymous) @ livewire.js?id=951e6947:3564 flushHandlers @ livewire.js?id=951e6947:1281 stopDeferring @ livewire.js?id=951e6947:1286 deferHandlingDirectives @ livewire.js?id=951e6947:1289 initTree @ livewire.js?id=951e6947:1479 (anonymous) @ livewire.js?id=951e6947:1428 start @ livewire.js?id=951e6947:1427 start2 @ livewire.js?id=951e6947:8796 (anonymous) @ livewire.js?id=951e6947:10103 livewire.js?id=951e6947:1123 Alpine Expression Error: toHtml is not defined

Expression: "toHtml"
`

Code snippets

Basic setup , nothing special . Only using bootstrap 5 .

Install laravel 11
Install bootstrap
Using mix to build asset
Run project and open table

How do you expect it to work?

Expecting basic table can be run

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be removed if I haven't met the criteria above.

[killallskywalker]

[devmount]

How does your mix setup look like? I had similiar issues and they were solved by building the frontend dependencies again (which isn't exactly mentioned in the docs / setup instructions); e.g. by manually running one of the following:

npm run build
npm run dev

[BoGnY]

same problem, but I use tailwind.. pgRenderActions is not defined and toHtml is not defined errors..

none fix found

[devmount]

Have you tried running npm run build or npm run dev? That fixed it for me (I also used Tailwind).

[BoGnY]

Yes of course, even deleted all caches.

livewire is manually bundled with alpine as described in livewire doc

[Nkwembe]

I had the same issue when I upgraded to Laravel 12 and powergrid 6. Running npm run dev fixed mine too.

[ChrissDeGrece]

Same issue after upgrading to Laravel 12 & Powergrid 6

Alpine Expression Error: pgRenderActions is not defined

[luanfreitasdev]

This is not a bug. You need to run the npm run build to compile the assets. Make sure to import the javascript

[BoGnY]

I've done (with yarn instead npm) without success

[luanfreitasdev]

Can anyone reproduce this in a public repo?

[BoGnY]

I've create a public repo: https://github.com/BoGnY/powergrid-test

I've identified my problem. As I have multiple js file for packages (to prevent load a lot of js on pages that don't need that package) I have separated powergrid js import (and other) from app.js (which contains only livewire and alpine plugin).

The problem happens when I use @vite('resources/js/powergrid.js') after @vite('resources/js/app.js').

In the example repo, if you move line 21 to line 14 (before the if) the code work.

[Scraayp]

Has there been an update on this? I got the same issue here.

[ammarzakwan-cell]

Hi, I solved this by adding the import in app.js

import './bootstrap';

import './../../vendor/power-components/livewire-powergrid/dist/powergrid.js'

Hope this helps.

[dea96]

thanks bro

[ankheur]

This didn't work but I've found a way around with copying the files with viteStaticCopy and importing them in the html

export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js' ], refresh: true, }), tailwindcss(), viteStaticCopy({ targets: [ { src: 'vendor/power-components/livewire-powergrid/dist/powergrid.js', dest: 'assets/powergrid' }, { src: 'vendor/power-components/livewire-powergrid/dist/tailwind.css', dest: 'assets/powergrid' } ], }), ], });

and then
<script src="{{ asset('build/assets/powergrid/powergrid.js') }}" data-navigate-once></script>

in the pages I need, no more javascript error. I think it is because with the import in app.js Livewire and Alpine are loadded before so it runs into nonexisting methods from Powergrid. This way resolved it for me.

[MrYamous]

I'm in trouble with this too

[MrYamous]

Just found something, I tried to delete my published assets and the problem was solved. I guess something in an old assets version is conflicting with more recent versions of the package