api/og/route.ts issue with the ImageResponse

[jcodog]

The code from your tutorial, and this template is returning this error in NextJS version 14.2.1.

Code as is:

import { NextRequest } from "next/server";
import { ImageResponse } from "next/og";
import { siteConfig } from "@/config/site";

export const runtime = "edge";

const interBold = fetch(
    new URL("../../../assets/fonts/Inter-Bold.ttf", import.meta.url)
).then((res) => res.arrayBuffer());

export async function GET(req: NextRequest) {
    try {
        const fontBold = await interBold;

        const { searchParams } = req.nextUrl;
        const title = searchParams.get("title");

        if (!title) {
            return new Response("No title provided", { status: 500 });
        }

        const heading =
            title.length > 140 ? `${title.substring(0, 140)}...` : title;

        return new ImageResponse(
            (
                <div tw="flex relative flex-col p-12 w-full h-full items-start text-black bg-white">
                    <div tw="flex items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        >
                            <path d="M4 11a9 9 0 0 1 9 9" />
                            <path d="M4 4a16 16 0 0 1 16 16" />
                            <circle cx="5" cy="19" r="1" />
                        </svg>
                        <p tw="ml-2 font-bold text-2xl">JCoNet Blog</p>
                    </div>
                    <div tw="flex flex-col flex-1 py-10">
                        <div tw="flex text-xl uppercase font-bold tracking-tight font-normal">
                            BLOG POST
                        </div>
                        <div tw="flex text-[80px] font-bold text-[50px]">
                            {heading}
                        </div>
                    </div>
                    <div tw="flex items-center w-full justify-between">
                        <div tw="flex text-xl">{siteConfig.url}</div>
                        <div tw="flex items-center text-xl">
                            <div tw="flex ml-2">{siteConfig.links.github}</div>
                        </div>
                    </div>
                </div>
            ),
            {
                width: 1200,
                height: 630,
                fonts: [
                    {
                        name: "Inter",
                        data: fontBold,
                        style: "normal",
                        weight: 700,
                    },
                ],
            }
        );
    } catch (error) {
        return new Response("Failed to generate image", { status: 500 });
    }
}

Error returned:

 ⨯ ./src/app/api/og/route.ts
Error:
  × Expected '>', got 'tw'
    ╭─[E:\Code\jconet-blog\src\app\api\og\route.ts:24:1]
 24 │
 25 │           return new ImageResponse(
 26 │                   (
 27 │                           <div tw="flex relative flex-col p-12 w-full h-full items-start text-black bg-white">
    ·          ──
 28 │                                   <div tw="flex items-center">
 29 │                                           <svg
 29 │                                                   xmlns="http://www.w3.org/2000/svg"
    ╰────

Caused by:
    Syntax Error

Import trace for requested module:
./src/app/api/og/route.ts
 GET /api/og?title=test 500 in 95ms

[jolbol1]

Hello, apologies for taking some time to look at this. Has the issue resolved?

Its all working on my end, do you have a repo I can clone that has the issue in?

[jcodog]

Hello, apologies for taking some time to look at this. Has the issue resolved?

Its all working on my end, do you have a repo I can clone that has the issue in?

Yeah I got it working... I saved it as a ts file not a tsx... so it didn't recognise anything within the code at all. Only noticed it when debugging and comparing the file types to your video.

[jolbol1]

Ah yeah, good catch! Thanks for updating me!