How best to use jsx / tsx entry point with `cloudflare pages dev`
I am using vanilla Cloudflare Pages Functions with
cloudflare pages dev and I'm experimenting with @vercel/og using the plug-in (https://github.com/cloudflare/pages-plugins/tree/main/packages/vercel-og) as documented in the Generate arbitrary images section (https://developers.cloudflare.com/pages/functions/plugins/vercel-og/#generate-arbitrary-images). I have it working with plain js (React.createElement), but when using jsx like in the examples I get a parse error from es-module-lexer when miniflare is trying to get the entry points as the parser doesn't support jsx. Is there any way to use jsx / tsx without another framework that relies on building with vite or webpack? It seems to compile ok when using wrangler pages functions build, although it's not transforming the jsx into plain js.1 Reply
sounds like you're running into a parsing issue with jsx in cloudflare pages functions. since miniflare doesn't support jsx out of the box, you could try adding a build step using esbuild or another lightweight bundler to transform your jsx into plain js before running it with cloudflare pages dev. unfortunately, without vite or webpack, there's no built-in way to handle jsx directly in that environment. it seems like wrangler pages functions build can handle it because it's doing the transformation for you.
you could try setting up a basic esbuild config to transpile the jsx before running your dev server.