Can I use #vercel/og without React? - vercel

Question

I'm trying to create an API on Vercel which returns images, generated based on the request. I would like to use #vercel/og for this, because it can generate images from HTML, and it is very quick. However, it seems to require React, which seems entirely unnecessary for something serving no actual HTML at all.
I have an edge function in api/test.ts:
import { ImageResponse } from '#vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse({
type: "div",
props: {
children: "Hello, World",
style: {
backgroundColor: "black",
color: "white",
width: "100%",
height: "100%",
}
}
}, { width: 500, height: 500 });
}
This runs completely fine when deployed to Vercel, but when I use vercel dev it gives me these errors:
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/test: Error: socket hang up
node_modules/#vercel/og/dist/og.d.ts:1:35 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import type { ReactElement } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import { ReactNode } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:14:11 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev #types/node`.
14 data: Buffer | ArrayBuffer;
~~~~~~
Found 3 errors.
There are two errors saying that #vercel/og and satori can't find React. Is there a way around this? I shouldn't need react for this, right?

Answer 1

I worked around the React-related errors and the inability to run .tsx edge functions without Next.js by installing #types/react and defining my own JSX function and using it without JSX syntax just in a .ts file.
function h<T extends React.ElementType<any>>(
type: T,
props: React.ComponentPropsWithRef<T>,
...children: React.ReactNode[]
) {
return {
type,
key: "key" in props ? props.key : null,
props: {
...props,
children: children && children.length ? children : props.children,
},
};
}
After this you can run it in Vercel deployment preview.
However, in vercel dev locally, I'm still getting the following error.
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/og: Error: socket hang up
I had also forced vercel CLI to use the newer TypeScript version with pnpm.overrides in package.json to solve some TypeScript parse errors I was getting.