Closed GBry closed 1 year ago
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()
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...
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.
Yes, flatpickr problem is solved. The issue would be with either wire-ui or bladewindui.
Thank you.
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