Does it support wasm?

[dinfer]

What version of HonoX are you using?

0.1.23

What steps can reproduce the bug?

1. run npm create hono@latest and select x-basic
2. run npm install @cf-wasm/photon
3. update code in file app/server.ts as following

   
   import { Hono } from "hono";
   import { showRoutes } from "hono/dev";
   import { createApp } from "honox/server";
   import { PhotonImage } from "@cf-wasm/photon";
   import { HTTPException } from "hono/http-exception";

const app = createApp();

app.basePath("/api").route( "/files", new Hono().post("/upload", async (c) => { const body = await c.req.parseBody(); const file = body.file; if (!(file instanceof File)) { const message = "bad file"; throw new HTTPException(400, { message, res: c.json({ ok: 0, message }), }); } const image = PhotonImage.new_from_blob(file); const width = image.get_width(); const height = image.get_height(); return c.json({ ok: 1, width, height }); }) );

showRoutes(app);

export default app;

5. run `npm run dev`

Got the error as following

20:31:27 [vite] Internal server error: "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use .wasm?init or .wasm?url. See https://vitejs.dev/guide/features.html#webassembly for more details. at LoadPluginContext.load (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:48056:13) at PluginContainer.load (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:49512:17) at async loadAndTransform (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:52306:22) at async instantiateModule (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53309:44)

And i'm trying to resolve it using `vite-plugin-wasm` with empty config.
```typescript
// vite.config.ts
import pages from "@hono/vite-cloudflare-pages";
import adapter from "@hono/vite-dev-server/cloudflare";
import honox from "honox/vite";
import { defineConfig } from "vite";
import wasm from "vite-plugin-wasm";

export default defineConfig({
  plugins: [honox({ devServer: { adapter } }), pages(), wasm()],
});

I got another error

20:33:20 [vite] Internal server error: Cannot find module 'wbg' imported from '/Users/wentianyi/sidelines/tinybox.site/node_modules/@cf-wasm/photon/dist/esm/lib/photon_rs_bg.wasm'
      at nodeImport (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53484:19)
      at ssrImport (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53349:22)
      at eval (/Users/wentianyi/sidelines/tinybox.site/node_modules/@cf-wasm/photon/dist/esm/lib/photon_rs_bg.wasm:4:37)
      at async instantiateModule (file:///Users/wentianyi/sidelines/tinybox.site/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53408:5)

What is the expected behavior?

wasm works fine. as I'm using wasm for cloudflare worker. https://stackoverflow.com/questions/77148379/how-to-use-photon-image-library-on-cloudflare-workers

What do you see instead?

No response

Additional information

No response

[yusukebe]

Hi @dinfer

This issue seems to be not only a HonoX matter, but I think you can make it work with the proper settings of Vite.

[dinfer]

@yusukebe Thanks for reply! I've try some vite plugin like https://github.com/Menci/vite-plugin-wasm (and some other solutions), but nothing seems works well with wasm and cloduflare worker/page environment. Is there any working demo?

It's very thankful to make the cloudflare-page template works well with wasm.

I'm planning to remove vite form from my project. hmr provided by vite is very convenient, but I have to use wasm.

[yusukebe]

but nothing seems works well with wasm and cloduflare worker/page environment. Is there any working demo?

Unfortunately, no 😢 I want to try it, but I don't have time to do it (we may need much time to solve it!).

[yusukebe]

Or have you seen the doc? https://vitejs.dev/guide/features#webassembly