beyonk-group/svelte-carousel

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

nodedan opened this issue · 9 comments

nodedan commented

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 commented

This breaks the route(target path) too.

itswadesh commented

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 commented

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 commented

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.

  • 👍1
tystring commented

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

nodedan commented

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>
  • 👍5
antony commented

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

nodedan commented

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

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

  • 🎉1