Dynamic component on Deno Fresh island: ReferenceError: document is not defined

Question

I am starting a Fresh website, and I need a carousel component. For that, I choose the flicking lib. I'm trying to render a Flicking component, but the build breaks:

➜  example git:(main) ✗ deno task start

Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 5 routes and 1 islands.
error: Uncaught (in promise) ReferenceError: document is not defined
    at https://esm.sh/v132/@egjs/[email protected]/denonext/preact-flicking.mjs:2:56465
Watcher Process failed. Restarting on file change...

The current code:

// islands/Carousel.tsx
import Flicking from "https://esm.sh/@egjs/[email protected]";

export const Carousel = () => <Flicking />;

Previous tries

I tried to check for typeof window !== 'undefined' before rendering the Flicking component, but it didn't work.

I also tried to use lazy imports:

import { lazy, Suspense } from "preact/compat";

const Flicking = lazy(() =>
  import("https://esm.sh/@egjs/[email protected]")
);

export const Carousel = () => (
  <Suspense fallback={<p>Carregando...</p>}>
    <Flicking />
  </Suspense>
);

But the initial result is a [object Promise] on the screen, and when I restart the page, the ReferenceError: document is not defined comeback.

Answer 1

Try checking the IS_BROWSER constant like in this example so the carousel isn't attempted to be rendered on the server.

With that guard in place you could use the same fallback as your Suspense tag while the client side is loading.