Carousel component blocking the page transition

[elzdave]

Hello, after a week using this component, I found out that I couldn't do any page movements from page contain this carousel component to any other page. Don't really know exactly the problem, cause the browser console render unreadable stack trace, but when I temporarily commented this carousel component, I could go to other page and vice versa. Could you help on this? Thanks in advance!

[vadimkorr]

Hi @elzdave,
Could you please provide more details. Do you mean that changing pages are blocked somehow?
What routing library is used?
Also stacktrace, routing library name and version would be helpful, maybe some source code snipppets...

[elzdave]

Hello @vadimkorr , I'm using Inertia.js as routing library, together with Laravel framework.

So, I make two pages, Homepage.svelte and AboutUs.svelte, together linked using Inertia.js. In the Homepage.js, I use this Svelte carousel to show image carousels on my homepage. When I try to navigate to AboutUs.svelte using Inertia link, the console.log throws error and the page simply can't move to AboutUs.svelte, but when I navigate from AboutUs.svelte to Homepage.svelte using Inertia, it can be done perfectly.

I try to attach onDestroy event on carousel, but the error seems to be happened before destroy event, and when I temporary disabled the carousel, the navigation works as intended. I attached the following error log from the browser console

Uncaught (in promise) TypeError: U is undefined
  K http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:4393
  o http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:4393
  transition_out http://localhost:8000/frontend/js/app.js:5103
  o http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:1262
  transition_out http://localhost:8000/frontend/js/app.js:5103
  o http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:1898
  transition_out http://localhost:8000/frontend/js/app.js:5103
  o http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:3809
  transition_out http://localhost:8000/frontend/js/app.js:5103
  o http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_AboutUs_svelte.js?id=d76d906bf4a837a99559:1307
  transition_out http://localhost:8000/frontend/js/app.js:5103
  o http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:3887
  transition_out http://localhost:8000/frontend/js/app.js:5103
  p http://localhost:8000/frontend/js/app.js:3512
  p http://localhost:8000/frontend/js/app.js:3714
  update http://localhost:8000/frontend/js/app.js:5042
  flush http://localhost:8000/frontend/js/app.js:5001
  promise callback*schedule_update http://localhost:8000/frontend/js/app.js:4971
  make_dirty http://localhost:8000/frontend/js/app.js:5816
  ctx http://localhost:8000/frontend/js/app.js:5852
  instance http://localhost:8000/frontend/js/app.js:3031
  set http://localhost:8000/frontend/js/app.js:6276
  update http://localhost:8000/frontend/js/app.js:6286
  _callee$ http://localhost:8000/frontend/js/app.js:3050
  tryCatch http://localhost:8000/frontend/js/app.js:7336
  invoke http://localhost:8000/frontend/js/app.js:7566
  defineIteratorMethods http://localhost:8000/frontend/js/app.js:7391
  asyncGeneratorStep http://localhost:8000/frontend/js/app.js:2954
  _next http://localhost:8000/frontend/js/app.js:2956
  _asyncToGenerator http://localhost:8000/frontend/js/app.js:2956
  _asyncToGenerator http://localhost:8000/frontend/js/app.js:2956
  swapComponent http://localhost:8000/frontend/js/app.js:3067
  setPage http://localhost:8000/frontend/js/app.js:191
  promise callback*setPage http://localhost:8000/frontend/js/app.js:191
  visit http://localhost:8000/frontend/js/app.js:191
  promise callback*visit http://localhost:8000/frontend/js/app.js:191
  visit http://localhost:8000/frontend/js/app.js:3324
  listen http://localhost:8000/frontend/js/app.js:4367
  m http://localhost:8000/frontend/js/app.js:3222
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_AboutUs_svelte.js?id=d76d906bf4a837a99559:869
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_AboutUs_svelte.js?id=d76d906bf4a837a99559:1263
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_Homepage_svelte.js?id=980576340cc025693e13:3861
  mount_component http://localhost:8000/frontend/js/app.js:5782
  p http://localhost:8000/frontend/js/app.js:3522
  p http://localhost:8000/frontend/js/app.js:3714
  update http://localhost:8000/frontend/js/app.js:5042
  flush http://localhost:8000/frontend/js/app.js:5001
  promise callback*schedule_update http://localhost:8000/frontend/js/app.js:4971
  make_dirty http://localhost:8000/frontend/js/app.js:5816
  ctx http://localhost:8000/frontend/js/app.js:5852
  instance http://localhost:8000/frontend/js/app.js:3031
  set http://localhost:8000/frontend/js/app.js:6276
  update http://localhost:8000/frontend/js/app.js:6286
  _callee$ http://localhost:8000/frontend/js/app.js:3050
  tryCatch http://localhost:8000/frontend/js/app.js:7336
  invoke http://localhost:8000/frontend/js/app.js:7566
  defineIteratorMethods http://localhost:8000/frontend/js/app.js:7391
  asyncGeneratorStep http://localhost:8000/frontend/js/app.js:2954
  _next http://localhost:8000/frontend/js/app.js:2956
  _asyncToGenerator http://localhost:8000/frontend/js/app.js:2956
  _asyncToGenerator http://localhost:8000/frontend/js/app.js:2956
  swapComponent http://localhost:8000/frontend/js/app.js:3067
  setPage http://localhost:8000/frontend/js/app.js:191
  promise callback*setPage http://localhost:8000/frontend/js/app.js:191
  visit http://localhost:8000/frontend/js/app.js:191
  promise callback*visit http://localhost:8000/frontend/js/app.js:191
  visit http://localhost:8000/frontend/js/app.js:3324
  listen http://localhost:8000/frontend/js/app.js:4367
  m http://localhost:8000/frontend/js/app.js:3222
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_AboutUs_svelte.js?id=d76d906bf4a837a99559:876
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_AboutUs_svelte.js?id=d76d906bf4a837a99559:1263
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/svelte/resources_frontend_js_Pages_AboutUs_svelte.js?id=d76d906bf4a837a99559:1448
  mount_component http://localhost:8000/frontend/js/app.js:5782
  m http://localhost:8000/frontend/js/app.js:3484
  p http://localhost:8000/frontend/js/app.js:3725
  update http://localhost:8000/frontend/js/app.js:5042
  flush http://localhost:8000/frontend/js/app.js:5001

I currently didn't know how to attach debugger, please be patient :)

[vadimkorr]

@elzdave
After some research, I found out that this svelte's issue sveltejs/svelte#3448, and it is still open.

But I found this workaround:

import Carousel from 'svelte-carousel/src/main.js'; // instead of import Carousel from 'svelte-carousel';
import 'svelte-carousel/dist/index.css';

Please check it out and let me know...

[gablittledevshop]

I just want to report I was also having the issue using sapper and the workaround worked. To use in sapper:

<script>
  let Carousel;

  onMount(async () => {
    const module = await import('svelte-carousel/src/main.js');
    Carousel = module.default;
  });
</script>

Then:

<svelte:component this={Carousel} let:loaded> ...