求助：Astro+TypeScript项目中使用WASM模块报错问题

问题分析 #

你遇到的WebAssembly.instantiate(): BufferSource argument is empty错误，根源在于Astro默认的SSR（服务端渲染）机制：服务端环境下无法直接加载WebAssembly模块，同时你在配置中重复添加了vite-plugin-wasm插件（既放在了Astro的integrations数组，又放在了vite.plugins里），导致插件逻辑冲突。而纯Vite项目默认是客户端渲染，不存在这个环境差异问题，所以能正常运行。

解决步骤 #

1. 修正Astro配置，移除重复插件 #

vite-plugin-wasm是Vite插件，不属于Astro官方集成，需要从integrations中移除，只保留在vite.plugins中。修改后的astro.config.mjs如下：

import { defineConfig } from "astro/config";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";

export default defineConfig({
  integrations: [tailwind(), react()],
  vite: {
    plugins: [wasm(), topLevelAwait()],
    // 可选：排除WASM包避免Vite预优化出错
    optimizeDeps: {
      exclude: ["dices"],
    },
  },
});

2. 确保WASM代码仅在客户端执行 #

由于SSR环境无法加载WASM，需要限制调用WASM的代码只在浏览器端运行，有两种方式：

方式一：代码中判断环境

修改functions.ts，通过import.meta.env.SSR区分环境，仅在客户端加载并调用WASM：

export async function hello(): Promise<void> {
  if (!import.meta.env.SSR) {
    const { greet } = await import("dices");
    const g: string = greet();
    console.log(g);
  }
}

方式二：使用Astro的client:only指令

如果是在组件中使用WASM，给组件添加client:only指令，强制组件仅在客户端渲染：

---
import WasmComponent from "../components/WasmComponent";
---

<WasmComponent client:only="react" />

3. 确认Rust WASM打包配置 #

确保你用wasm-pack打包时使用了正确的目标类型，推荐使用bundler适配Vite/Astro：

wasm-pack build --target bundler --out-dir pkg

验证 #

修改完成后重新执行npm run dev，触发WASM函数时应该能正常输出结果，不再出现Buffer为空的错误。

内容的提问来源于stack exchange，提问作者Tadeo Hepperle