next.js: ImageResponse type error on route after updating to 13.5.1

I don’t think this is just related to images, either. My API routes were working just fine until I upgraded to 13.5.2 this morning. I’m getting the following error when I deploy to Vercel:

Type error: Route "src/app/api/providers/create-provider-bios/route.ts" has an invalid export:
--
09:01:44.392 | "Promise<NextResponse<string> \| undefined>" is not a valid PUT return type:
09:01:44.392 | Expected "Response \| Promise<Response>", got "Promise<NextResponse<string> \| undefined>".
09:01:44.392 | Expected "Promise<Response>", got "Promise<NextResponse<string> \| undefined>".
09:01:44.393 | Expected "Response", got "NextResponse<string> \| undefined".
09:01:44.393 | Expected "Response", got "undefined".

In my route, I’m using both NextRequest and NextResponse imports from next/server.

Upgrading @vercel/og to 0.5.15 will work, it was failed due to the type mismatching since we introduced a more strict type checking that app routes should return Response | Promise<Response>.

We’re also aliasing @vercel/og to the built-in ImageResponse where is from "next/server" to avoid duplicated bundling that might blow up your route bundle size. So you don’t need to install any @vercel/og package and you can just import it from next/server.

I got it to work just by replacing the import of the ImageResponse from @vercel/og to next/server

I don’t think this is just related to images, either. My API routes were working just fine until I upgraded to 13.5.2 this morning. I’m getting the following error when I deploy to Vercel:

Type error: Route "src/app/api/search/route.ts" has an invalid export:
--
09:01:44.392 | "Promise<NextResponse<string> \| undefined>" is not a valid GET return type:
09:01:44.392 | Expected "Response \| Promise<Response>", got "Promise<NextResponse<string> \| undefined>".
09:01:44.392 | Expected "Promise<Response>", got "Promise<NextResponse<string> \| undefined>".
09:01:44.393 | Expected "Response", got "NextResponse<string> \| undefined".
09:01:44.393 | Expected "Response", got "undefined".

In my route, I’m using both NextRequest and NextResponse imports from next/server.

Hey, I don’t think this is just related to og images. I’m also seeing this error on a completely different route (and this is only happening after migrating to v 13.5.1).

Here’s the error on vercel when I’m trying to deploy:

Type error: Route "src/app/api/v1/product/createForOtherUser/route.ts" has an invalid export:
--
16:24:57.436 | "Promise<Response \| undefined>" is not a valid POST return type:
16:24:57.436 | Expected "Response \| Promise<Response>", got "Promise<Response \| undefined>".
16:24:57.436 | Expected "Promise<Response>", got "Promise<Response \| undefined>".
16:24:57.436 | Expected "Response", got "Response \| undefined".
16:24:57.436 | Expected "Response", got "undefined".
16:24:57.436 |  
16:24:57.556 | Error: Command "npm run build" exited with 1

And here’s my code:

import { prisma } from "@/lib/prisma";
import { auth } from "@clerk/nextjs";
import { z } from "zod";

const apiRequestValidator = z.object({
  productName: z.string().min(3).max(255),
  productCategory: z.string(),
  productDescription: z.string().min(2).max(1000),
  productPrice: z.number().min(0),
  creatingAsAdmin: z.boolean(),
  userPhone: z.string(),
  userName: z.string(),
});

export type ApiRequest = z.infer<typeof apiRequestValidator>;

export async function POST(req: Request) {
  const body = await req.json();
  const { userId } = auth();

  if (!userId) {
    return new Response("Unauthorized", { status: 401 });
  }

  const {
    productName,
    productCategory,
    productDescription,
    productPrice,
    creatingAsAdmin,
    userName,
    userPhone,
  } = apiRequestValidator.parse(body);

  // Check if user is admin
  const user = await prisma.user.findUnique({
    where: {
      id: userId,
    },
  });

  if (user?.userRole !== "ADMIN") {
    return new Response("Unauthorized", { status: 401 });
  }

  if (creatingAsAdmin) {
    try {
      const result = await prisma.product.create({
       ...
    })

      return new Response(
        JSON.stringify({
          productId: result.id,
        }),
        { status: 200 }
      );
    } catch (error) {
      return new Response("Invalid request", { status: 400 });
    }
  }
}

@cvogl please check the response here

We had a fix in 13.5.3, can you try to upgrade to the latest version? Thanks!

Hey, @balazsorban44, I think there’s an open issue for this on #55623

Hi, can you try to use import { ImageResponse } from 'next/server'? We’re working on the fix about the type checking now

@icyJoseph Oh, I get it. Try this: generateImageMetadata

Just in case, replace your Request type with NextRequest like:

import type { NextRequest } from 'next/server'

...
export async function GET(request: NextRequest) {
...
}

I had the same TS error after updating to 13.5.1 but this fix it.