beyonk-group / svelte-carousel

A super lightweight, super simple Carousel for Svelte 3
MIT License
213 stars 38 forks source link

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

Open nodedan opened 4 years ago

nodedan commented 4 years ago

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 4 years ago

This breaks the route(target path) too.

itswadesh commented 4 years ago

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 4 years ago

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 4 years ago

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 commented 4 years ago

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 4 years ago

This may be a bug in Svelte https://github.com/sveltejs/svelte/issues/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 commented 4 years ago

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

nodedan commented 4 years ago

@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 3 years ago

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