[Bug]: Uncaught ReferenceError: pgFlatpickr is not defined (Powergrid v4)

[GBry]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

Uncaught ReferenceError: pgFlatpickr is not defined

PowerGrid

4.1.1

Laravel

10.6.2

Livewire

2.12.3

Alpine JS

3.12.0

Theme

Tailwind 3.x

Describe the bug.

I got Uncaught ReferenceError: pgFlatpickr is not defined

I searched through the issues and found that it's because @powergridScripts is not there.

But in the upgrade guide it's written that it's deprecated

To Reproduce...

Load any powergrid v4+ table

Extra information

No response

[rosolovsky]

Hi. Your app.js file should look like this

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

window.Alpine = Alpine
window.flatpickr = flatpickr

import("./../../node_modules/flatpickr/dist/flatpickr.min.css");
import("./../../vendor/power-components/livewire-powergrid/dist/powergrid.css");
import("./../../vendor/power-components/livewire-powergrid/dist/tom-select.css");

import TomSelect from "tom-select";
window.TomSelect = TomSelect

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

Alpine.start()

[GBry]

I tried that, but I just remembered that I also have Wireui installed. So I think I still have to include alpine in the app template. Or shouldn't I?

My App.js `import './bootstrap'; import Alpine from 'alpinejs' import flatpickr from "flatpickr"; window.Alpine = Alpine window.flatpickr = flatpickr

import {livewire_hot_reload} from 'virtual:livewire-hot-reload';

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

import "./../../vendor/power-components/livewire-powergrid/dist/powergrid.css";

import SlimSelect from 'slim-select'; window.SlimSelect = SlimSelect; import './../../vendor/power-components/livewire-powergrid/dist/powergrid'; Alpine.start() livewire_hot_reload();`

My app.blade.php '

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    {{-- wireui --}}
        @wireUiScripts
    {{-- livewire modal --}}
        <!-- Alpine v3 -->
        {{-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> --}}

        <!-- Focus plugin -->
        <script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>

    {{-- bladewindui --}}
        <link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
        {{-- <link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" /> --}}
        <script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>
    {{-- Vite --}}

    {{-- livewire --}}
        @livewireStyles

</head>

' Also is the instructions to install flatpickr written in the documentation? Just curious if I accidentally skipped some...

[rosolovsky]

I am using laravel vite to build the frontend and there are no problems with the powergrid v4 package. There is a powergrid v4 demo on github. Use it to understand how everything is arranged.

[GBry]

Yes, flatpickr problem is solved. The issue would be with either wire-ui or bladewindui.

Thank you.