TypeError: Cannot read properties of undefined (reading 'format')

[zavbala]

• Hono version: 4.4.6
• Hono Og: 0.0.27

Trying to return an image response:

import { Hono } from 'hono';
import { ImageResponse } from 'hono-og';

const app = new Hono();

app.get(':id', () => {
  return new ImageResponse(
    (
      <div
        style={{
          backgroundColor: 'black',
          backgroundSize: '150px 150px',
          height: '100%',
          width: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          flexWrap: 'nowrap',
        }}
      >
        <div
          style={{
            fontSize: 60,
            fontStyle: 'normal',
            letterSpacing: '-0.025em',
            color: 'white',
            marginTop: 30,
            padding: '0 120px',
            lineHeight: 1.4,
            whiteSpace: 'pre-wrap',
          }}
        >
          hello hono
        </div>
      </div>
    ),
  );
});

export default app;

and hono throws "TypeError: Cannot read properties of undefined (reading 'format')"

Edit: Using Cloudflare workers

[ColeTownsend]

@zavbala

Try this

import { Hono } from 'hono';
import { ImageResponse } from 'hono-og';

const app = new Hono();

app.get(':id', (c) => {
const id = c.req.param("id");
  return new ImageResponse(
    (
      <div
        style={{
          backgroundColor: 'black',
          backgroundSize: '150px 150px',
          height: '100%',
          width: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          flexWrap: 'nowrap',
        }}
      >
        <div
          style={{
            fontSize: 60,
            fontStyle: 'normal',
            letterSpacing: '-0.025em',
            color: 'white',
            marginTop: 30,
            padding: '0 120px',
            lineHeight: 1.4,
            whiteSpace: 'pre-wrap',
          }}
        >
          hello hono {id}
        </div>
      </div>
    ),
  );
});

export default app;

[Q6Crypto]

I have the same issue