Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

next/image "url" parameter is valid but upstream response is invalid #53715

Closed
1 task done
luca-vogels opened this issue Aug 8, 2023 · 76 comments
Closed
1 task done
Assignees
Labels
Image (next/image) Related to Next.js Image Optimization. linear: next Confirmed issue that is tracked by the Next.js team. locked

Comments

@luca-vogels
Copy link

luca-vogels commented Aug 8, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.14-canary.0
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/luca-vogels/bug-next-image

To Reproduce

Run npm run dev or npm run build && npm run start

Describe the Bug

When using next with a custom server like express images are not displayed anymore.

Default next image uses following route for fetching optimized images:
/_next/image/?url=...&w=...&q=...

However opening this route returns following error:
"url" parameter is valid but upstream response is invalid

Expected Behavior

Optimized image is returned

Which browser are you using? (if relevant)

115.0.5790.111

How are you deploying your application? (if relevant)

npm run start

NEXT-1681

@luca-vogels luca-vogels added the bug Issue was opened via the bug report template. label Aug 8, 2023
@github-actions github-actions bot added the Image (next/image) Related to Next.js Image Optimization. label Aug 8, 2023
@shotanue
Copy link

I've encountered a similar issue in the project I'm working on.

It occurred when I attempted the following version upgrade:

- "next": "13.4.12",
+ "next": "13.4.13",

@admmasters
Copy link

admmasters commented Aug 15, 2023

Same issue. EKS, running in a container. Images load fine on 13.4.12.

@Mejiabrayan
Copy link

Has anyone found a solution to this issue? I'm also encountering the same thing.

@yanckst
Copy link

yanckst commented Aug 22, 2023

I've encountered a similar issue in the project I'm working on.

It occurred when I attempted the following version upgrade:

- "next": "13.4.12",
+ "next": "13.4.13",

Yeah, I confirm that versions above v13 don't work. Only v12 doesn't have problems with the images.

@jordanpurinton

This comment has been minimized.

@sagardewani
Copy link

I am also facing this issue for Absolute path images like /apple-icon.png inside the app folder. It never loads.

@moshie
Copy link

moshie commented Sep 26, 2023

Still getting this on v13.5.3

It seems to work locally also when navigating to /_next/static/media/image.2b36cbd7.png I do get the image.

Not sure why it's connecting to port 3000 when the PORT is set to 8080 in our custom server?

looking into the code it seems to be something going on in the fetch perhaps it's not using the correct port?
https://github.com/stefanprobst/next.js/blob/canary/packages/next/server/image-optimizer.ts#L291

upstream image response failed for /_next/static/media/image.2b36cbd7.png TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (/opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:519:61)
    at async /opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

@0xboga
Copy link

0xboga commented Sep 26, 2023

I've encountered a similar issue in the project I'm working on.
It occurred when I attempted the following version upgrade:

- "next": "13.4.12",
+ "next": "13.4.13",

Yeah, I confirm that versions above v13 don't work. Only v12 doesn't have problems with the images.

The same issue seems to occur when upgrading from:

- "next": "13.5.2",
+ "next": "13.5.3",

@terrymun
Copy link

We have also encountered a similar issue: images loaded via /_next/image?url=<path>&w=<num>&q=<num> is failing and complaining that "url" parameter is valid but upstream response is invalid.

However, when attempting to load the actual image in the url parameter it works. This issue is only reproducible in production build and does not seem to affect when running the development server locally.

@terrymun
Copy link

Looks like this issue might be fixed in #55988

@moshie
Copy link

moshie commented Sep 27, 2023

Can confirm 13.5.4-canary.1 fixed the issue for me

@Iulian-Dragomirescu
Copy link

Still getting this on v13.5.3

It seems to work locally also when navigating to /_next/static/media/image.2b36cbd7.png I do get the image.

Not sure why it's connecting to port 3000 when the PORT is set to 8080 in our custom server?

looking into the code it seems to be something going on in the fetch perhaps it's not using the correct port? https://github.com/stefanprobst/next.js/blob/canary/packages/next/server/image-optimizer.ts#L291

upstream image response failed for /_next/static/media/image.2b36cbd7.png TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (/opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:519:61)
    at async /opt/application/node_modules/.pnpm/next@13.5.3_@babel+core@7.22.20_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

This might help you in your solution: #56038 (comment)

@moshie
Copy link

moshie commented Sep 27, 2023

@Iulian-Dragomirescu
Using the latest canary solved the issue for me in the end but that's good advice anyways thanks
#53715 (comment)

@mrkpatchaa
Copy link

The latest canary didn't fix it for me :/
I am getting ERR_SSL_WRONG_VERSION_NUMBER as here #55706 (comment)

@xRitsu
Copy link

xRitsu commented Sep 29, 2023

This seems so random. For me, going back to 13.4.19 and 13.5.2 or updating to 13.5.4-canary.1 fixes it. I'm not getting it in development and production on Windows, but I am getting it on Linux, and only in production mode...

@mrkpatchaa
Copy link

I can also confirm that now it's working. I didn't change anything... I rebuild my docker container like twice since this morning 👀

@samuelbailey123
Copy link

samuelbailey123 commented Sep 29, 2023

Also randomly experiencing this issue. 13.4.9 fixed it for me at the moment....
This needs to be a high priority issue if not already. It's been over a month.
Not sure how a company can push so many issues in production releases.

yrojx added a commit to sastrakode/sim-graha-nirmala-web that referenced this issue Oct 1, 2023
@ShahriarKh
Copy link
Contributor

ShahriarKh commented Oct 1, 2023

I'm getting the ERR_SSL_WRONG_VERSION_NUMBER error and only on linux on production.
I tried different file paths for the image src but none of them work.
Next version: 13.5.3

@JustinTBrown
Copy link

Can confirm going back to 13.5.2 from 13.5.3 solved it for me.

@ngocdd
Copy link

ngocdd commented Oct 2, 2023

I got the same issue, and it only appear with production build run dev local can not foud it,
when I' using the ubuntu laptop to access into production web the image can load normally ???
but when I using other my laptop or phone to access into production web it's can not load the images.

my next version: 13.5.3

@shawngustaw
Copy link

this was broken on 13.5.3 for me but with 13.5.4 seems like it's fixed 👍

@WynstelleID
Copy link

like @shawngustaw after upgrade to 13.5.4 it's already fixed

@timomedia
Copy link

timomedia commented Oct 3, 2023

this was broken on 13.5.3 for me but with 13.5.4 seems like it's fixed

It is still not fixed yet. I upgraded to version 13.5.4 but still have the image error as above.
Version 13.5.4 will have the following error message: UND_ERR_INVALID_ARG

@9vfQbg7z4ajrGQxR
Copy link

9vfQbg7z4ajrGQxR commented Oct 3, 2023

this was broken on 13.5.3 for me but with 13.5.4 seems like it's fixed

It is still not fixed yet. I upgraded to version 13.5.4 but still have the image error as above. Version 13.5.4 will have the following error message: UND_ERR_INVALID_ARG

Same here, the issues happening again in production:

upstream image response failed for /test.png TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async globalThis.fetch (/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:9276)
    at async invokeRequest (/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:16:12)
    at async /node_modules/next/dist/server/next-server.js:362:35
    at async imageOptimizer (/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/node_modules/next/dist/server/next-server.js:517:61)
    at async /node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: InvalidArgumentError: invalid connection header
      at processHeader (/node_modules/next/dist/compiled/undici/index.js:1:102994)
      at new Request (/node_modules/next/dist/compiled/undici/index.js:1:100295)
      at [dispatch] (/node_modules/next/dist/compiled/undici/index.js:1:64352)
      at Intercept (/node_modules/next/dist/compiled/undici/index.js:2:93153)
      at [Intercepted Dispatch] (/node_modules/next/dist/compiled/undici/index.js:1:115359)
      at Client.dispatch (/node_modules/next/dist/compiled/undici/index.js:1:115591)
      at [dispatch] (/node_modules/next/dist/compiled/undici/index.js:2:264035)
      at Pool.dispatch (/node_modules/next/dist/compiled/undici/index.js:1:115591)
      at [dispatch] (/node_modules/next/dist/compiled/undici/index.js:1:29874)
      at Agent.Intercept (/node_modules/next/dist/compiled/undici/index.js:2:93153) {
    code: 'UND_ERR_INVALID_ARG'
  }
}

@lpbonomi
Copy link

lpbonomi commented Oct 3, 2023

Same here with 15.5.4

upstream image response failed for /images/logo-ud.png TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11600:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async globalThis.fetch (/home/ubuntu/ultradrop-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:62909)
    at async invokeRequest (/home/ubuntu/ultradrop-app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /home/ubuntu/ultradrop-app/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/home/ubuntu/ultradrop-app/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/home/ubuntu/ultradrop-app/node_modules/next/dist/server/next-server.js:519:61)
    at async /home/ubuntu/ultradrop-app/node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: [Error: 00A8CB89397F0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:354:
  ] {
    library: 'SSL routines',
    reason: 'wrong version number',
    code: 'ERR_SSL_WRONG_VERSION_NUMBER'
  }
}

@tkafka
Copy link

tkafka commented Oct 3, 2023

I confirm - still broken in 13.5.4

upstream image response failed for /img/promo.png TypeError: fetch failed
...
cause: InvalidArgumentError: invalid connection header
...
code: 'UND_ERR_INVALID_ARG'

Ubuntu, node v18.17.1

@Stevemoretz
Copy link

cause: InvalidArgumentError: invalid connection header

@tkafka are you running behind nginx? Maybe this will help: #56038 (comment)

Thanks for this, I updated so maybe some bugs go away but more things broke than fixed lol.

@styfle
Copy link
Member

styfle commented Oct 13, 2023

@luca-vogels Thanks for the code to reproduce this issue!

The reason you're seeing port 3000 is because its the default port assigned here:

port: this.options.port || 3000,
isDev: !!this.options.dev,
hostname: this.options.hostname || 'localhost',

The solution is to pass hostname and port to the custom server so that subsequent fetch() calls work as expected.

I created a PR to demonstrate here:

@f1ght3rlucky

This comment has been minimized.

jeffrylew added a commit to ABATEAI/frontend that referenced this issue Oct 16, 2023
… image issues in prod env

According to vercel/next.js#53715, v13.5.2 has a good chance of working correctly
@mcasters

This comment was marked as duplicate.

@styfle
Copy link
Member

styfle commented Oct 16, 2023

Closing due to my message above.

I also think that more users are finding this issue in the past 3 weeks when they really have a different issue: #56038

That can be fixed by upgrading to next@13.5.5

If you still have problems with the latest Next.js, please create a new issue with the steps to reproduce the problem, thanks!

@styfle styfle closed this as completed Oct 16, 2023
@clevertree
Copy link

Confirmed they finally fixed this issue in 13.5.5. #corporateSabotage

@PawelWywiol
Copy link

It's not working (for me). I've still got the same error, even with a clean setup.

upstream image response failed for /_next/static/media/img-grid-03.66c7ff3b.jpg TypeError: fetch failed
    at Object.fetch (/path-to-node-app/public_nodejs/node_modules/next/dist/compiled/undici/index.js:1:21788)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async invokeRequest (/path-to-node-app/public_nodejs/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /path-to-node-app/public_nodejs/node_modules/next/dist/server/next-server.js:365:35
    at async imageOptimizer (/path-to-node-app/public_nodejs/node_modules/next/dist/server/image-optimizer.js:533:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/path-to-node-app/public_nodejs/node_modules/next/dist/server/next-server.js:519:61)
    at async /path-to-node-app/public_nodejs/node_modules/next/dist/server/response-cache/index.js:92:36
    at async /path-to-node-app/public_nodejs/node_modules/next/dist/lib/batcher.js:43:32 {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1278:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}

@alinayebi9080
Copy link

I find that error occurred because in next/server/next-server.js below code is added. and always use http as protocol.

const protocol = this.serverOptions.experimentalHttpsServer ? "https" : "http";
const invokeRes = await (0, _invokerequest.invokeRequest)(${protocol}://${this.fetchHostname || "localhost"}:${this.port}${newReq.url || ""}, {
method: newReq.method || "GET",
headers: newReq.headers,
signal: (0, _nextrequest.signalFromNodeResponse)(res.originalResponse)
});

@Faruqt
Copy link

Faruqt commented Oct 18, 2023

This issue gave me a headache. I can confirm that v13.5.5 fixes the problem.

@spbro007
Copy link

I haven't checked if 13.5.5 fixed it or not but even if it did, 13.5.5 doesn't work on aws beanstalk node18 / 6.0.1

@Faruqt
Copy link

Faruqt commented Oct 18, 2023

@spbro007 It works for me using Node.js 18 running on 64bit Amazon Linux 2023/6.0.1

@BestTrier
Copy link

I found out that this error still exist in 13.5.6. How can I fix this?

@VittorioMorellini
Copy link

Hi I have the same issue in Next 13.5.5 released on IIS
When I release on Https the Image does not work, the img yes.

I did not understand how to fix the issue, the Image over https does not work
The Image component released on IIS it does not work

markusleh added a commit to webhood-io/webhood that referenced this issue Oct 29, 2023
@yongsk0066
Copy link

yongsk0066 commented Nov 2, 2023

same issue in Next 14.0.1. It was ok before(v13).

  cause: SocketError: other side closed
      at Socket.onSocketEnd (node:internal/deps/undici/undici:9981:26)
      at Socket.emit (node:events:526:35)
      at endReadableNT (node:internal/streams/readable:1408:12)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    code: 'UND_ERR_SOCKET',
    socket: {
      localAddress: '127.0.0.1',
      localPort: 50501,
      remoteAddress: '127.0.0.1',
      remotePort: 3000,
      remoteFamily: 'IPv4',
      timeout: undefined,
      bytesWritten: 1741,
      bytesRead: 0
    }
  }
}

@spbro007
Copy link

spbro007 commented Nov 2, 2023

To everyone encountering this issue,
Cause
I think underlying cause of this issue is OS mismatch as an application works differently on different systems.
I was encountering this issue when trying to use local images in public dir.
Solution
I switched to a cdn for all images. (though other assets like font etc. work as they should).
Now in production, I didn't get that error even in 13.4, 14.

@AymanMorsy
Copy link

I upgraded from v13.5.4 which was OK to V14.0.1 to found this problem, so I revert back to the earlier version and two days later I tried again to upgrade and it works ( the version I upgraded to is the same as before V14.0.1 so weird).

@stasdre
Copy link

stasdre commented Nov 9, 2023

Same problem in NextJS 14.0.0

@dimitri320
Copy link

I'm experiencing the same issue too in NextJS 14.0.0

@maylorsan
Copy link

Same issue with NextJS 14

@yaroslav-kulpan
Copy link

The same problem in NextJS 14

Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Image (next/image) Related to Next.js Image Optimization. linear: next Confirmed issue that is tracked by the Next.js team. locked
Projects
None yet
Development

No branches or pull requests