How best to use jsx / tsx entry point with `cloudflare pages dev`

I am using vanilla Cloudflare Pages Functions with

cloudflare pages dev

cloudflare pages dev

and I'm experimenting with

@vercel/og

@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

React.createElement

), but when using jsx like in the examples I get a parse error from

es-module-lexer

es-module-lexer

when

miniflare

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

wrangler pages functions build

, although it's not transforming the jsx into plain js.

Clown•10/17/24, 7:35 PM

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.