search

rawilk / laravel-form-components

Form components built for Tailwind & Livewire.
https://randallwilk.dev/docs/laravel-form-components
MIT License
386 stars 42 forks source link

<custom-select> requires Popper #56

Closed andrecuellar closed 2 years ago

andrecuellar commented 2 years ago

Laravel Form Components Version

v7.1.3

Laravel Version

v9.2

Alpine Version

v3.0.6

Bug description

I have installed laravel-form-components, I have installed popperjs, filepond and flatpickr

In my resources/js/app.js I have

require('./bootstrap');

import Alpine from 'alpinejs';
import 'flag-icons/css/flag-icons.css';
import flatpickr from 'flatpickr';
import * as FilePond from 'filepond';
import { createPopper } from '@popperjs/core';

window.flatpickr = flatpickr;
window.FilePond = FilePond;
window.createPopper = createPopper;
window.Alpine = Alpine;

Alpine.start();

But the popper is not loaded in the final view

The final HTML:

<!-- FormComponents Scripts -->
<script src="/form-components/form-components.js?id=03553f899311a06c3381" data-turbolinks-eval="false"></script>
<script src="https://unpkg.com/alpinejs@3.9.3/dist/cdn.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

and in resources/css/app.css I have this

@import 'tailwindcss/base';                                                   
@import 'tailwindcss/components';                                             
@import 'tailwindcss/utilities';                                              
@import "filepond/dist/filepond.min.css";                                     
@import "flatpickr/dist/flatpickr.min.css";                                   
@import '../../vendor/rawilk/laravel-form-components/resources/css/index.css';
[x-cloak] {                                                                   
    display: none;                                                            
}

I'm including the @fcStyles() and @fcScripts() in my layout and I get the error

Uncaught TypeError: <custom-select> requires Popper (https://popper.js.org)
    at Proxy._initSelect (form-components.js?id=03553f899311a06c3381:1:9265)
    at Proxy.init (form-components.js?id=03553f899311a06c3381:1:12573)
    at cdn.min.js:5:361
    at N (cdn.min.js:5:79)
    at cdn.min.js:5:29412
    at Function.<anonymous> (cdn.min.js:5:10296)
    at r (cdn.min.js:5:1652)
    at n (cdn.min.js:5:1682)
    at er (cdn.min.js:5:1692)
    at w (cdn.min.js:5:4385)

Steps to reproduce

No response

Relevant log output

No response