在Cloudflare Workers中使用canvaskit-wasm遇'href'未定义错误求助

问题原因 #

canvaskit-wasm默认依赖浏览器环境的document.currentScript.href自动定位Wasm文件，但Cloudflare Workers属于无浏览器的服务端运行时，不存在document对象，因此触发该错误。

解决方案 #

1. 手动指定Wasm文件路径 #

初始化CanvasKit时，通过locateFile参数显式指定Wasm文件路径，绕过自动检测逻辑：

修改src/server.js：

import CanvasKitInit from "canvaskit-wasm";
import { Hono } from "hono";
const app = new Hono();

// 传入locateFile指定Wasm文件路径
const CanvasKit = await CanvasKitInit({
  locateFile: (fileName) => `/public/${fileName}` // 对应后续资产绑定的路径
});

app.get("/", (c) => c.text("Hello!"));

export default app;

2. 配置资产绑定托管Wasm文件 #

确保Wasm文件能被Workers正确访问：

• 从canvaskit-wasm的npm包bin目录中取出canvaskit.wasm，放到项目的public文件夹
• 修改wrangler.toml添加资产绑定配置：

name = "canvaskit-test"
main = "src/server.js"
compatibility_date = "2024-05-01" # 建议更新到较新版本，提升兼容性
node_compat = false # canvaskit-wasm支持ES模块，无需开启Node兼容

# 配置本地资产目录，Wrangler会自动上传到Workers资产系统
[[assets]]
directory = "./public"

3. 额外优化建议 #

• 升级compatibility_date到近期版本，避免旧运行时的特性缺失
• 关闭node_compat，减少不必要的Node.js环境模拟，提升运行效率

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