next.js: ImageResponse type error on route after updating to 13.5.1
Link to the code that reproduces this issue
https://github.com/Dannymx/shockinglemon.com/tree/develop
To Reproduce
- Clone repo
- next build
- See type error on GET route handler
Current vs. Expected behavior
Current:
app/api/og/route.tsx
Type error: Route "app/api/og/route.tsx" has an invalid export:
"Promise<NextResponse<unknown> | ImageResponse>" is not a valid GET return type:
Expected "Response | Promise<Response>", got "Promise<NextResponse<unknown> | ImageResponse>".
Expected "Promise<Response>", got "Promise<NextResponse<unknown> | ImageResponse>".
Expected "Response", got "NextResponse<unknown> | ImageResponse".
ELIFECYCLE Command failed with exit code 1.
Expected: no type errors
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
next info
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
Binaries:
Node: 18.17.1
npm: 9.6.7
Yarn: N/A
pnpm: 8.7.5
Relevant Packages:
next: 13.5.1
eslint-config-next: 13.5.1
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
App Router, TypeScript (plugin, built-in types)
Additional context
This started happening after updating to 13.5.1
About this issue
- Original URL
- State: closed
- Created 9 months ago
- Reactions: 4
- Comments: 25 (14 by maintainers)
Commits related to this issue
- chore: bump `@vercel/og` and `satori` (#55654) ### What? Bump these packages to their latest. (Bumped `satori` too to avoid multiple versions in the repo) ### Why? Follow-up of https://github.com/... — committed to vercel/next.js by balazsorban44 9 months ago
- Loose types of app routes return value (#55849) ### What #51394 introduced a pretty strict type of return value of route type that causing failure with `next build`. There're few ways of writing... — committed to vercel/next.js by huozhi 9 months ago
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:In my route, I’m using both
NextRequest
andNextResponse
imports fromnext/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 returnResponse | Promise<Response>
.We’re also aliasing
@vercel/og
to the built-inImageResponse
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 fromnext/server
.I got it to work just by replacing the import of the ImageResponse from @vercel/og to 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:
And here’s my code:
@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:
I had the same TS error after updating to 13.5.1 but this fix it.