ReferenceError: ResizeObserver is not defined

[maietta]

Minimum Reproducible Example: https://github.com/maietta/mre-svelte-carousel

Was working just 2 days ago. Not sure why now I cannot install this and use it, even in an M.R.E.

ReferenceError: ResizeObserver is not defined
    at Module.createResizeObserver (/node_modules/svelte-carousel/src/utils/page.js:173:3)
    at Carousel.svelte:163:42
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1997:22)
    at eval (/src/routes/+page.svelte:16:105)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1997:22)
    at Object.default (root.svelte:42:40)
    at eval (/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte:8:41)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1997:22)
    at root.svelte:41:39
    at $$render (/node_modules/svelte/internal/index.mjs:1997:22)

[maietta]

Resolved:

I didn't catch the problem because I removed jQuery from my project, as I no longer needed it. Somehow, jQuery caused SvelteKit to render "client side", which masked the issue.

Removing jQuery let SvelteKit render "server side".

The trick is to add a +page.ts or +layout.ts where appropriate with the following line:

export const ssr = false;

Hopefully, someone else who runs into this issue sees this fix before wasting so much time.

[tvardy]

It would be much better not to make a SvelteKit's page unable to be Server Side Rendered only because the Carousel is in use on it. I'd still vote for a fix in the svelte-carousel.

I found another walkaround which at least allows me to pre-render the whole rest of the page...

<script>
  import { browser } from '$app/environment'
  import Carousel from 'svelte-carousel'
</script>

{#if browser}
      <Carousel ... />
{/if}