如何在TypeScript中使用Astro与WASM

Question

我想使用一个Web组装模块，这是我在我的天文应用程序中用Rust写的。我正在使用TypeScript和下面的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: [wasm(), tailwind(), react()],
  vite: {
    plugins: [wasm(), topLevelAwait()],
  },
});

在文件functions.ts中使用wasm的代码如下所示：

import { greet } from "dices";

export function hello(): void {
  let g: string = greet();
  console.log(g);
}

类型检查所有工作正常，但是在使用npm run dev运行时我会遇到以下错误：

error   WebAssembly.instantiate(): BufferSource argument is empty
CompileError: WebAssembly.instantiate(): BufferSource argument is empty        
    at Module.__vite_ssr_exports__.default (/__vite-plugin-wasm-helper:31:14)  
    at processTicksAndRejections (node:internal/process/task_queues:96:5)      
    at async eval (/pkg/dices_bg.wasm:6:28)
    at async instantiateModule (file:///D:/code/web-dev/dice-calculator-frontend/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:53445:9)

当我通过具有相同的npm create vite@latest文件和TypeScript文件的functions.ts和vite.config.ts设置一个新的Vite项目时，一切都可以工作，并且我可以使用来自wasm模块的函数，而不会出现任何问题。

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
});

有人让WASM和阿童木合作吗？我有点困惑，因为阿童木在引擎盖下使用了Vite，但是只要使用Vite就行了，似乎不适用于阿童木。

Answer 1

我发现用

<DistributionCalculatorWrapper client:only="react" />

而不是

<DistributionCalculatorWrapper client:load />

是一个对我有用的解决办法。我想存在一些问题，Node.js不能使用wasm服务器端，但是如果我们显式地让使用wasm函数的组件只使用client:only="react"呈现的客户端，它就能工作。