Buttons not showing in Livewire Powergrid [Alpine Expression Error: 'variable' is not defined]

Question

I installed livewire-powergridin my project. So far everything works well except the header and action buttons. I am getting an undefined where the button is supposed to be rendered.

Also. In my console I can see some errors. Belonging to Alpine

This is how I have loaded files in my resources/app.js

import './bootstrap';

import flatpickr from "flatpickr";
window.flatpickr = flatpickr;

import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';
import './../../vendor/power-components/livewire-powergrid/dist/powergrid';
import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css';

What Could be the issue? I read that alpine should not be loaded when using livewire because it imports it automatically

Indeche Ojukwu · Accepted Answer · 2024-11-04 20:35:46Z

0

My issue is how I am arranging vite manifest and importing livewireStyles. So alpine is loaded automatically incase you are using livewire 3 or anything above that. In your layout file first add the vite manifest @vite(['resources/js/app.js']) and in the app.js, you necessarily DO NOT need to have this...

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

.... as it would lead to an error Alpine instance loaded twice. Not a big issue but it is good to have that in mind. After vite you can then put @livewireStyles and this should remove the console.log errors and import alpine globally.

answered Nov 4, 2024 at 20:35

Indeche Ojukwu

1,0838 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andreas · Accepted Answer · 2025-02-14 16:59:42Z

0

It's possible that you forgot to install/build frontend dependencies. Running the following commands solved it for me after installing PowerGrid (run commands might be different in your project):

npm i
npm run build

Or just running the dev server:

npm run dev

answered Feb 14 at 16:59

andreas

17k13 gold badges81 silver badges83 bronze badges

Collectives™ on Stack Overflow

Buttons not showing in Livewire Powergrid [Alpine Expression Error: 'variable' is not defined]

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related