beyonk-group/svelte-carousel

TypeError: after_update is undefined

Opened this issue · 11 comments

mylastore commented

Awesome library!!!!

I am getting this error after installing and copying the example setup.

TypeError: after_update is undefined
antony commented

How are you installing the library?

mylastore commented

How are you installing the library?

I am using Parcel as a bundler instead of Rollup. I believe that has to be the reason why I get that error. I installed the npm module and just copy the example code from the readme file.

antony commented

I'm not sure how well Parcel supports Svelte yet, as in the early days of Svelte 3 it didn't, and I converted my projects over to Rollup because of that.

soanvig commented

I have exactly the same problem, but with officialy supported webpack. Nothing fancy in build.

soanvig commented

It's that code precisely (internal svelte code):

function mount_component(component, target, anchor) {
    const { fragment, on_mount, on_destroy, after_update } = component.$$;
    fragment && fragment.m(target, anchor);
    // onMount happens before the initial afterUpdate
    add_render_callback(() => {
        const new_on_destroy = on_mount.map(run).filter(is_function);
        if (on_destroy) {
            on_destroy.push(...new_on_destroy);
        }
        else {
            // Edge case - component was destroyed immediately,
            // most likely as a result of a binding initialising
            run_all(new_on_destroy);
        }
        component.$$.on_mount = [];
    });
    after_update.forEach(add_render_callback);
}

The rest of my application works fine. Carousel is the only external svelte component I have.

parker-codes commented

Running into this error using Vite 1.0.0-beta.11, Svite 0.2.3, and Rollup 2.21.0.

This is how I'm using the library:

<script>
	import Carousel from '@beyonk/svelte-carousel';
</script>

<Carousel perPage={{ 800: 3, 500: 2 }} autoplay={4000} duration={400} dots={false}>
    <span class="control" slot="left-control">
        &#8592;
    </span>
    <span class="control" slot="right-control">
        &#8594;
    </span>
	
    <div class="slide-content">
        <img src="https://picsum.photos/id/10/400/500" alt="Kitten 1"/>
    </div>
    <div class="slide-content">
        <img src="https://picsum.photos/id/100/400/500" alt="Kitten 1"/>
    </div>
    <div class="slide-content">
        <img src="https://picsum.photos/id/230/400/500" alt="Kitten 1"/>
    </div>
    <div class="slide-content">
        <img src="https://picsum.photos/id/1015/400/500" alt="Kitten 1"/>
    </div>
    <div class="slide-content">
        <img src="https://picsum.photos/id/1016/400/500" alt="Kitten 1"/>
    </div>
    <div class="slide-content">
        <img src="https://picsum.photos/id/1018/400/500" alt="Kitten 1"/>
    </div>
</Carousel>
elialbert commented

same, any updates?

elialbert commented

it's definitely something to do with the build, it is sufficient to copy the svelte component into my app directly for this to start working.

antony commented
elialbert commented

thank you for reaching out - I was not, but I just tried it, and the effect is the same

kulturbande commented

I have the same problem with my storybook which is using Webpack as a bundler. The current solution is to change the import from:

import Carousel from '@beyonk/svelte-carousel';

to

import Carousel from '@beyonk/svelte-carousel/src/Carousel.svelte';

This does not effect the rollup build. I guess you can also solve this with a better Webpack configuration, but it worked out for me.