i was making a plugin for carousel display , and i used flickity as a library , i used this to initialize it

    public function display_carousel($atts)
    {
        $atts = shortcode_atts(array('carousel_id' => ''), $atts);

        // Get the carousel id
        $carousel_id = $atts['carousel_id'];

        // Meta key
        $meta_key_items="fystory_items";

        // Fetch the carousel items if the exist
        if ($carousel_items = get_post_meta($carousel_id, $meta_key_items, true)) {

            // Meta keys
            $meta_key_type="fystory_item_type";
            $meta_key_src="https://wordpress.stackexchange.com/questions/407296/fystory_item_src";

            // Start the carousel container
            ///TODO: EDIT THIS HOWEVER YOU HAVE IT
            $results="<div class="carousel main-carousel">";

            // Cycle each item id
            foreach ($carousel_items as $key => $item) {

                // Fetch the item type and src
                if (get_post_meta($key, $meta_key_type, true) && get_post_meta($key, $meta_key_src, true) && get_post_status($key) === 'publish') {

                    // Type
                    $type = get_post_meta($key, $meta_key_type, true);

                    // Source
                    $src = get_post_meta($key, $meta_key_src, true);
                    $src = json_decode($src);
                    $src = $src[0]->url;

                    // Display the item
                    ///TODO: EDIT THIS HOWEVER YOU HAVE IT
                    if ($type == 'image') {
                        $results .= '<div class="carousel-item carousel-cell">
                            <div class="carousel-cell-inner">
                                <img src="' . $src . '" alt="carousel-item">
                            </div>
                            </div>';
                    } elseif ($type == 'video') {
                        $results .= '<div class="carousel-cell">
                        <div class="carousel-cell-inner">
                                <video src="' . $src . '"></video>
                            </div>
                            </div>';
                    }
                }
            }

            // End the carousel container
            ///TODO: EDIT THIS HOWEVER YOU HAVE IT
            $results .= '</div>';
        }

        // Return the carousel
        return $results;
    }
```my issue here is when i display the shortcode into the text editor and preview the page i get this error in the console `bad element for flickity :null `
i tried to go to the line where it was caused but it's minified js i couldn't read through it .

in the construct i wp_enqueue_scripts both of the flickity script and my script i switched places with both of and flickity isn't defined but if i enqueue the flickity script first it cause this error


how can i debug the matter or if you did encounter such problems like me please inform me how you went with the issue ?.

```js
let carousel = document.querySelector('.main-carousel')
let flickity = new Flickity(carousel,{cellAlign:'left',contain:true,draggable:true,wrapAround:true,groupCells:true})
let viewportSlider = document.querySelector('.flickity-viewport')
let slider=document.querySelector('.flickity-slider')
let innerVideo=document.querySelectorAll('.carousel-cell-inner>video')
let buttons =document.querySelectorAll('.flickity-prev-next-button')

just initializing the carousel