Livewire Powergrid keeps having error: "Uncaught ReferenceError: pgFlatpickr is not defined at [Alpine] "

Question

I have a Laravel 10 installation with Livewire 3 and I wanted to add PowerGrid latest to the stack. I followed the instructions of the Livewire Powergrid documentation, and whenever create a table and try to add it in some view, the table renders not properly, seems that CSS is not applied. Also in the devtools an error is indicated, that says:

"Uncaught ReferenceError: pgFlatpickr is not defined at [Alpine] "

after I add table after creating it as follows (using User model when create Powergrid component):

<livewire:user-table />

Alpine comes as default with Laravel LiveWire 3, so I did not need to install separately, so it is should not be a the cause of the error

I tried to get as much info about this error as I could, but found none of valuable one.

Anyone, any idea?

Answer 1

You need to install Flatpickr manually using npm or pnpm. After that you need to import that in to your app.js as:

import Alpine from "alpinejs";
import flatpickr from "flatpickr";

window.Alpine = Alpine;
window.flatpickr = flatpickr;

import "./../../node_modules/flatpickr/dist/flatpickr.min.css";