Possible bug: A track/list element is missing.

[mbeslin]

I'm making custom WP Elementor Widget with SplideJS.

While editing a page in Elementor, the editor isn't working, I keep getting this in console:
Uncaught Error: [splide] A track/list element is missing.

It's important to mention, everything is working as it should in Firefox, but not in Chrome.

While trying to find the problem, I found this, and it seems the issue is the same: GrapesJS/grapesjs#4062

Any ideas?

[Omazon]

I have the same issue.
Context: I'm using VueSplide and I wanted use custom arrows, according the doc, we should use

<Splide :has-track="false" aria-label="...">
  <div class="custom-wrapper">
    <SplideTrack>
      <SplideSlide>...</SplideSlide>
    </SplideTrack>


    <div class="splide__arrows" />
  </div>
</Splide>

I just copy paste the code and then the following error.

[splide] A track/list element is missing.

[nicmare]

had that error too when i tried to use a custom class instead of "splide"

[iamebuka]

This was also the cause of my issue, apparently splide requires that you keep the original "splide" parent class name. Reading your comment saved me. Thanks.

[Devanjana]

Did anyone find a solution to this ?

[ztdan4ik]

Same for me
Vue 3, composition API
Just used code from example and getting same error

[ztdan4ik]

Found the problem.
We need to import SplideTrack component

import { ..., SplideTrack } from '@splidejs/vue-splide';

[joshistoast]

Oddly enough, the SplideTrack component isn't even exported by @splidejs/vue-splide for me

[hybridvision]

I just spent far too long trying to figure this out and while I have a solution, I can't say it makes a huge amount of sense. However, it's late here and I have a deadline, so I can't question it any further at this point. 🤷‍♂️

I'm sharing what I found in the hope that it will save someone else a few hours or maybe even lead to finding the root cause of this bug.

While debugging the problem, I saw that internally, Splide was throwing this error because the list element was undefined. I found this odd because when I did a console.log() on the track variable (which is the parent element), I could see the splide__list contained within it.

I don't know exactly what it is about the combination of the Elementor editor + Chrome that makes this fail (I confirmed it works in Firefox regardless) but the only way I could get it to work was to use a string selector when instantiating the Splide object. Passing a HTML querySelector or jQuery selector object caused this error.

The strangest part: I found that if I tried to search within the scope using $scope[0].querySelector('.splide'), this would cause the error to reappear, even though all I was doing was a console.log() of that value. This is the part that makes no sense to my tired brain but once I got rid of that, it started working. It's as if interacting with this element in the DOM before initialising Splide is enough to make it choke. As a final test for my theory, I moved my querySelector call after the Splide initialisation and there was no error!

Anyway, here's my full setup (note that I'm using native events instead of the older jQuery version):

window.addEventListener('elementor/frontend/init', function () {

  elementorFrontend.hooks.addAction('frontend/element_ready/xxxx-widget-name.default',
    async function ($scope) {

      const { Splide } = await import('@splidejs/splide');

      const id = $scope[0]?.dataset?.id;
      const selector = `[data-id="${id}"] .splide` // Make a string selector from the Elementor ID

      //console.log($scope[0].querySelector('.splide')) // <-- uncommenting this makes the error return 🤯

      const carousel = new Splide(selector)
      carousel.mount();
    });
});

Hope it helps someone!

[noahsark769]

Has anyone happened to find a solution for this? We're also experiencing a weird occurrence of this issue, it seems to only happen for very specific cases on some of the Shopify stores our app is deployed on. Seems possibly related to @hybridvision's issue, I haven't been able to get a reproducible case yet

[dmpol18]

function collect() {
track = find("." + CLASS_TRACK);
list = child(track, "." + CLASS_LIST);
assert(track && list, "A track/list element is missing.");
...

function find(selector) {
var elm = query(root, selector);
return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : void 0;
}

Plugin always compares your actual class="splide__track" element (elm)
to "." + CLASS_ROOT that is literally ".splide"
while your actual root element could have different class then splide

So you have to have splide class or you need to have a possibility to pass a CLASS_ROOT.

As for me I have some .splide elements to run them automatically,
but have another elements with another classes to run with another options, but now I couldn't
Thinking how to run two sets of different options simultaneously...

[mohammadfahimy]

Did anyone find a solution to this ?

[noahsark769]

We've managed to work around a couple instances of this error - posting here in case it helps anyone!

1. Our app can get into situations where we initialize a Splide but a DOM element with the splide__track doesn't exist - this will cause this error
2. We had a weird issue where we were initializing Splide on a page which was loading AMP. AMP removed the splide__track class due to its HTML minification, so Splide was throwing this error. We worked around this by removing the AMP script from the page we needed to load Splide on (using third-party libraries like Splide isn't supported by AMP anyway)

[DanSuthWMW]

I have overcome this bug by not using the SplideTrack component and instead using this setup in a splide/vue project on Nuxt 3.

<Splide
 ref="splide"
 class="splide"
 :has-track="false"
 :options="options"
>
  <div class="splide__track">
    <ul class="splide__list">
      <SplideSlide
        v-for="(item, index) in items"
        :key="`kit-${index}`"
      >
      </SplideSlide>
    </ul>
  </div>
</Splide>

[jun1orDev]

This affected my issue when using Vue 3, thanks!

[redoC-A2k]

Hey there !
I am getting same issue
Uncaught Error: [splide] A track/list element is missing. at bn (assert.ts:12:11) at Object.p [as setup] (Elements.ts:181:13) at Splide.ts:126:36 at forOwn.ts:20:30 at Array.forEach (<anonymous>) at w (forOwn.ts:19:65) at n.mount (Splide.ts:123:13) at initLib (<anonymous>:13:20) at HTMLDivElement.<anonymous> (<anonymous>:21:13) at <anonymous>:23:15

But only in edge browser on linux not in firefox browser why and could someone help me ?

[leadstreet-roy]

I've just copy pasted everything from https://splidejs.com/guides/getting-started/ without modification yet I also encounter this issue, what a shame

main.js

import Splide from '@splidejs/splide';

(function(){
  document.addEventListener( 'DOMContentLoaded', function() {
    for(let element of document.querySelectorAll('.splides')) {
      let options = {
        perPage: 3,
      }
      let splide = new Splide( element, options );
      console.log(splide);
      splide.mount();
    }
  } );
})();

main.scss
@import '@splidejs/splide/css';

html

<section class="splides" aria-labelledby="carousel-heading">
  <h2 id="carousel-heading">Splide Basic HTML Example</h2>

  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
  </div>
</section>

[jojodmo]

I had to actually have the class "splide" on my class, as any other class would not work, which makes this difficult if you want to initialize different instances of Splide. So, instead, you can just add both classes.

<div class="splide myCustomClass" aria-label="Splide Basic HTML Example">
        <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
        </div>
</div>
<script>
  new Splide(".splide.myCustomClass").mount()
</script>

Props to https://stackoverflow.com/a/75825516/2767207 for pointing me to this solution.