CODEWITHSUNDEEP
laravellaravel-livewirealpine.jslivewire-powergrid
OBrien Evance
OBrien Evance

Reputation: 1065

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

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. enter image description here

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

enter image description here

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

Upvotes: 2

Views: 248

Answers (2)

andreas
andreas

Reputation: 16936

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

Upvotes: 0

OBrien Evance
OBrien Evance

Reputation: 1065

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.

Upvotes: 0

Related Questions