Carousel interferes with routing (likely in latest Sapper version 0.27.0)
nodedan opened this issue ยท 9 comments
At the moment I can only give a console error: TypeError: node.parentNode is null
when changing routes. The carousel works fine, it's just the routing that's an issue when using Sapper.
I'll see what else I can dig up around it.
This breaks the route(target path) too.
Workarround
Replace the detach function on line 174 of node_modules/svelte/internal/index.mjs
with the following
function detach(node) {
if(node.parentNode){
node.parentNode.removeChild(node);
}
}
I think a workaround which involves modifying the framework probably isn't ideal!
Not at all sure why this is broken suddenly. Do we know what the last working version of Sapper was?
i havent been able to look into this too deeply, but i'm having the same problem.
I have a feeling the siema
may be adding/removing/cloning DOM elements in a way that causes svelte/sapper to lose reference to said elements.
I am having this problem; the workaround by @itswadesh solves locally but when I deploy for production breaks sapper's routing. Please Help!
This may be a bug in Svelte sveltejs/svelte#3187
An easier workaround is to contain the carousel in a parent div/element:
<script>
import Carousel from '@beyonk/svelte-carousel'
</script>
<div><!-- add a wrapper -->
<Carousel>
<div class="slide-content">Slide 1</div>
<div class="slide-content">Slide 2</div>
</Carousel>
</div>
If that fixes it then it's very easy for us to just add that wrapper inside the component I think.
@antony The issue is that Svelte is trying to destroy the parent node of (presumably) the first parent in the component.
I've tried adding a parent node to the component onDestroy(), but I don't understand enough of the Svelte process to get it right.. i.e. how it targets the component to destroy
EDIT: To be clearer - that's what I thought too but it doesn't seem to work! Only outside the component..
I have the same problem on Laravel + Inertia + Svelte, @bugbit-io 's solution solved it perfectly. Thank you!