Deno Fresh 岛上的动态组件：ReferenceError：文档未定义

Question

我正在启动一个 Fresh 网站，我需要一个轮播组件。为此，我选择了flicking lib。我正在尝试渲染 Flicking 组件，但构建中断了：

➜  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...

当前代码：

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

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

之前的尝试

我尝试在渲染

typeof window !== 'undefined'

组件之前检查

Flicking

，但没有成功。

我也尝试过使用惰性导入：

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>
);

但最初的结果是屏幕上出现一个

[object Promise]

，当我重新启动页面时，

ReferenceError: document is not defined 

又回来了。

Answer 1

尝试像本示例中那样检查 IS_BROWSER

 常量

，这样轮播就不会尝试在服务器上渲染。

有了该防护，您可以在客户端加载时使用与

Suspense

 标记相同的后备。