TypeError: after_update is undefined

[mylastore]

Awesome library!!!!

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

TypeError: after_update is undefined

[antony]

How are you installing the library?

[mylastore]

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]

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]

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

[soanvig]

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]

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]

same, any updates?

[elialbert]

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]

Are you installing it with --save-dev? It's essential that dependencies in Svelte are installed as devDependencies.

On Wed, 5 Aug 2020 at 20:42, Eli Albert ***@***.***> wrote: 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. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#22 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABVORITAMPNURS2BRDKBXDR7GY37ANCNFSM4MHNWGEQ> .

--

…

________________________________ ꜽ . antony jones . http://www.enzy.org

[elialbert]

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

[kulturbande]

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.