next.js: ImageError: "url" parameter is valid but upstream response is invalid
Link to the code that reproduces this issue
https://github.com/netergart/nextjs-example/blob/main/apps/web/app/page.tsx#L137
https://github.com/netergart/nextjs-example/blob/main/apps/web/server.js
To Reproduce
- pnpm i
- mkcert localhost (can skip)
- pnpm dev (this run custom server - web/server.js)
Current vs. Expected behavior
when run without a custom server everything works correctly. But with the custom server, I have an issue
web:dev: ⨯ upstream image response failed for /next-js.jpg TypeError: fetch failed
web:dev: at Object.fetch (node:internal/deps/undici/undici:11576:11)
web:dev: at async globalThis.fetch (webpack-internal:///(rsc)/../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/patch-fetch.js:194:16)
web:dev: at async invokeRequest (/Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
web:dev: at async /Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:595:35
web:dev: at async imageOptimizer (/Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/image-optimizer.js:576:13)
web:dev: at async cacheEntry.imageResponseCache.get.incrementalCache (/Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:176:65)
web:dev: at async /Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/response-cache/index.js:90:36
web:dev: at async /Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/lib/batcher.js:41:32 {
web:dev: cause: SocketError: other side closed
web:dev: at Socket.onSocketEnd (node:internal/deps/undici/undici:9790:26)
web:dev: at Socket.emit (node:events:529:35)
web:dev: at endReadableNT (node:internal/streams/readable:1368:12)
web:dev: at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
web:dev: code: 'UND_ERR_SOCKET',
web:dev: socket: {
web:dev: localAddress: '::1',
web:dev: localPort: 60188,
web:dev: remoteAddress: '::1',
web:dev: remotePort: 8000,
web:dev: remoteFamily: 'IPv6',
web:dev: timeout: undefined,
web:dev: bytesWritten: 1245,
web:dev: bytesRead: 0
web:dev: }
web:dev: }
web:dev: }
web:dev: ⨯ upstream image response failed for /next-js.png TypeError: fetch failed
web:dev: at Object.fetch (node:internal/deps/undici/undici:11576:11)
web:dev: at async globalThis.fetch (webpack-internal:///(rsc)/../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/patch-fetch.js:194:16)
web:dev: at async invokeRequest (/Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
web:dev: at async /Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:595:35
web:dev: at async imageOptimizer (/Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/image-optimizer.js:576:13)
web:dev: at async cacheEntry.imageResponseCache.get.incrementalCache (/Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:176:65)
web:dev: at async /Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/response-cache/index.js:90:36
web:dev: at async /Users/netergart/www/next-example-issue/node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/lib/batcher.js:41:32 {
web:dev: cause: SocketError: other side closed
web:dev: at Socket.onSocketEnd (node:internal/deps/undici/undici:9790:26)
web:dev: at Socket.emit (node:events:529:35)
web:dev: at endReadableNT (node:internal/streams/readable:1368:12)
web:dev: at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
web:dev: code: 'UND_ERR_SOCKET',
web:dev: socket: {
web:dev: localAddress: '::1',
web:dev: localPort: 60189,
web:dev: remoteAddress: '::1',
web:dev: remotePort: 8000,
web:dev: remoteFamily: 'IPv6',
web:dev: timeout: undefined,
web:dev: bytesWritten: 1245,
web:dev: bytesRead: 0
web:dev: }
web:dev: }
web:dev: }
web:dev: ○ Compiling /favicon.ico ...
web:dev: ✓ Compiled /favicon.ico in 1287ms (513 modules)
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
Node: 18.18.1
npm: 9.8.1
Yarn: N/A
pnpm: 8.11.0
Relevant Packages:
next: 14.0.3
eslint-config-next: N/A
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)
Image optimization (next/image, next/legacy/image)
Additional context
I tested with the last canary and have this issue too
https://github.com/vercel/next.js/issues/53715 people wrote the same but the issue is closed.
If you run next dev
and then node server.js
images are loaded because they are already processed
this issue only with format not equal svg
About this issue
- Original URL
- State: closed
- Created 7 months ago
- Reactions: 1
- Comments: 16 (3 by maintainers)
i have the same issue on 14.0.1 with custom server
@thepuzzlemaster Yes, each release includes which PRs are included in the release.
View releases for this repo here: https://github.com/vercel/next.js/releases
You can also subscribe to new release notifications using by clicking “Watch”, then “Custom”, then “Releases”, then “Apply” at the top of the repo.
I can confirm that this is fixed in the latest canary version for me using a custom server with SSL.
I came up with a solution. In general, I decided to replace the urls in the file itself server.js Which seems logical.
14.0.4
Same issue. The only idea that comes up how to fix this is to simply add the origin before the image path.