Possible to use hono/jsx in a Vercel Edge Function?

[meenie]

I'm trying to utilize JSX in a Vercel Edge Function so that I can return HTML for an htmx application. I followed the instructions on how to use JSX within Hono and then created this file

// ./api/index.tsx

import { Hono } from "hono";
import { handle } from "hono/vercel";

export const config = {
  runtime: "edge",
};

const app = new Hono().basePath("/api");

app.get("/", (c) => {
  return c.html(<p>Hi</p>);
});

export default handle(app);

When I run vercel dev and go to http://localhost:3000/api, I get the following error:

Trace: ReferenceError: React is not defined
    at Array.<anonymous> (evalmachine.<anonymous>:1608:33)
    at Hono.dispatch (evalmachine.<anonymous>:978:29)
    at Hono.fetch (evalmachine.<anonymous>:823:19)
    at evalmachine.<anonymous>:1599:15
    at respond (evalmachine.<anonymous>:1641:24)
    at _FetchEvent.<anonymous> (evalmachine.<anonymous>:1712:30)
    at EdgeVM.dispatchFetch (evalmachine.<anonymous>:29:39)
    at Server.handler (/Users/cody/projects/hono-hay-day/node_modules/.pnpm/[email protected]/node_modules/edge-runtime/src/server/create-handler.ts:46:48)
    at Server.emit (node:events:514:28)
    at Server.emit (node:domain:489:12)
    at Hono.errorHandler (evalmachine.<anonymous>:803:11)
    at Hono.handleError (evalmachine.<anonymous>:959:19)
    at Hono.dispatch (evalmachine.<anonymous>:984:21)
    at Hono.fetch (evalmachine.<anonymous>:823:19)
    at evalmachine.<anonymous>:1599:15
    at respond (evalmachine.<anonymous>:1641:24)
    at _FetchEvent.<anonymous> (evalmachine.<anonymous>:1712:30)
    at EdgeVM.dispatchFetch (evalmachine.<anonymous>:29:39)
    at Server.handler (/Users/cody/projects/hono-hay-day/node_modules/.pnpm/[email protected]/node_modules/edge-runtime/src/server/create-handler.ts:46:48)
    at Server.emit (node:events:514:28)

If I replace the JSX with just a plain string and refresh, the edge function runs fine, even when the file is still named index.tsx.

I'm not sure if this is a Vercel error or an issue with Hono. Any thoughts?

[yusukebe]

Hi @meenie

With the proper settings, you could theoretically do this. However, vercel command may not allow you to make the proper settings.

[afreeorange]

@meenie : Did you ever resolve this issue? I have the same problem locally (i.e. not in Vercel). In Preact, I'd resolve this by modifying tsconfig.json and adding import { h } from "preact" but am unsure as to what to do here.