即使添加 client:load 指令后，Astro projext 中也未定义文档

Question

我有一个基本的 html 和 css 以及 vanila javascript，它可以与键盘交互一起使用，现在转换为 astro 但出现错误

文档未定义，建议使用客户端：仅

我知道 Astro 使用 SSR，因此它不会水合，但是当 apply client:load 时，它会给出相同的错误

这是示例代码

面板.astro

---
import "assets/styles/panel.css";

import { updatePanel} from "@/components/panel";

---
 <label class="vertical" for="vertical">
      <input type="radio" class="orientation" name="orientation" id="vertical" value="X">
 </label>

组件/panle.ts

const orientationPanel = document.querySelectorAll(".orientation");
const panel = document.querySelector(".panel");

const updatePanel = (num = 0) => {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < num; i++) {
    const div = document.createElement("div");
    div.classList.add("panel__cell");
    div.textContent = String.fromCodePoint(65 + i); // A to Z
    fragment.appendChild(div);
  }
  panel.innerHTML = "";
  panel.appendChild(fragment);
};

const onChangePanel = (e: any) => {
  changePanel(e.target.value);
  updatePanel(Number(e.keyCode));
};

orientationPanel?.addEventListener("change", onChangePanel);

它抛出如下错误

[错误]文档未定义提示： 浏览器 API 在服务器上不可用。 如果代码位于框架组件中，请尝试在渲染后使用生命周期方法访问这些对象 或者使用

client:only

指令使组件专门在客户端上运行

.

所以尝试添加客户端：仅具有以下代码

导航.astro

---
import "@/assets/styles/nav.css";
---
<nav class="nav">
  <div class="nav--list">
    <a class="link list--item" href="/panel" client:load><span>Panel</span></a>
  </div>
</nav>

旁注：当使用

client:load

时，会在元素上抛出打字稿错误

Type '{ children: any; class: string; href: string; "client:load": true; }' is not assignable to type 'AnchorHTMLAttributes'.
  Property 'client:load' does not exist on type 'AnchorHTMLAttributes'.ts(2322)

可能是因为使用了

<a>

所以创建了一个Astro组件

链接.astro

---
const { href, name } = Astro.props

---

<a class="link list--item" href={href}><span>{name}</span></a>

并在 Navigation.astro

中使用它

<Link href="panel" name="panel" client:load/>

但仍然抛出同样的

文档未定义 暗示： 浏览器 API 在服务器上不可用。

更新

现在停止导入 panel.ts 然后抛出错误

您正在尝试渲染 ，但 Link 是 天文组件。 Astro 组件不会在客户端中呈现，并且 不应有水合指令。请使用框架 用于客户端渲染的组件。

Answer 1

我最近遇到了类似的问题 cally。

我的问题是我一直在尝试从 Astro 脚本端导入 cally，如下所示：

---
import "cally";
import { getISO639FromLang, getLangFromUrl } from '@/i18n/utils';

const lang = getLangFromUrl(Astro.url);
---

<div>...</div>

Astro 抛出错误，因为这段代码是在实际浏览器之外执行的。当您尝试使用任何访问文档或窗口的代码时，它会崩溃。

尝试将访问文档对象的代码移至脚本端，如下所示：

---
import { getISO639FromLang, getLangFromUrl } from '@/i18n/utils';

const lang = getLangFromUrl(Astro.url);
---

<div>...</div>

<script>
import "cally";
</script>