Replies: 13 comments 3 replies
-
I have the same issue.
I just copy paste the code and then the following error.
|
Beta Was this translation helpful? Give feedback.
-
had that error too when i tried to use a custom class instead of "splide" |
Beta Was this translation helpful? Give feedback.
-
Did anyone find a solution to this ? |
Beta Was this translation helpful? Give feedback.
-
Same for me |
Beta Was this translation helpful? Give feedback.
-
Found the problem.
|
Beta Was this translation helpful? Give feedback.
-
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 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 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! |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
function collect() { function find(selector) { Plugin always compares your actual class="splide__track" element (elm) 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, |
Beta Was this translation helpful? Give feedback.
-
Did anyone find a solution to this ? |
Beta Was this translation helpful? Give feedback.
-
We've managed to work around a couple instances of this error - posting here in case it helps anyone!
|
Beta Was this translation helpful? Give feedback.
-
I have overcome this bug by not using the SplideTrack component and instead using this setup in a splide/vue project on Nuxt 3.
|
Beta Was this translation helpful? Give feedback.
-
Hey there ! But only in edge browser on linux not in firefox browser why and could someone help me ? |
Beta Was this translation helpful? Give feedback.
-
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';
main.scss html
|
Beta Was this translation helpful? Give feedback.
-
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?
Beta Was this translation helpful? Give feedback.
All reactions