svelte-carousel
svelte-carousel copied to clipboard
TypeError: after_update is undefined
Awesome library!!!!
I am getting this error after installing and copying the example setup.
TypeError: after_update is undefined
How are you installing the library?
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.
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.
I have exactly the same problem, but with officialy supported webpack. Nothing fancy in build.
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.
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">
←
</span>
<span class="control" slot="right-control">
→
</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>
same, any updates?
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.
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 [email protected] 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 https://github.com/beyonk-adventures/svelte-carousel/issues/22#issuecomment-669449917, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABVORITAMPNURS2BRDKBXDR7GY37ANCNFSM4MHNWGEQ .
--
ꜽ . antony jones . http://www.enzy.org
thank you for reaching out - I was not, but I just tried it, and the effect is the same
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.