Carousel interferes with routing (likely in latest Sapper version 0.27.0)

[nodedan]

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.

[itswadesh]

This breaks the route(target path) too.

[itswadesh]

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);
    }
}

[antony]

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?

[clockelliptic]

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.

[tystring]

I am having this problem; the workaround by @itswadesh solves locally but when I deploy for production breaks sapper's routing. Please Help!

[nodedan]

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>

[antony]

If that fixes it then it's very easy for us to just add that wrapper inside the component I think.

[nodedan]

@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..

[ekafyi]

I have the same problem on Laravel + Inertia + Svelte, @bugbit-io 's solution solved it perfectly. Thank you!