Closed Iulian-Dragomirescu closed 7 months ago
Wow, same here:
Use to work fine before.
i get the same error but i solve with:
after this i get new error =))
cause: ConnectTimeoutError: Connect Timeout Error
Reporting the same: https://gist.github.com/igeligel/13473e8702239fa17ec83a89a30f66f8
Some more information:
I think it might be related to this: https://github.com/vercel/next.js/pull/55775
Picture was always on the server:
Same error, some images works well but some image not loaded and throw this error '"url" parameter is valid but upstream response is invalid'. I am using nginx web server.
Remotely it will only work if you put your server IP instead of the domain.
Remotely it will only work if you put your server IP instead of the domain.
Yes you right, if we put server IP then it works well, we spend lots of time with this issue.
I downgrade to 13.5.2, now error is "The requested resource isn't a valid image for /assets/icons/gdpr.png received text/html; charset=utf-8"
We did downgrade to 13.5.2 and works well for now :)
Experiencing the same issue. I will backup to 13.5.2 in the mean time.
Experiencing same issue with 13.5.3. In my case running Next.js in Docker container (http) then served over AWS CloudFront (https). Reverting to 13.5.2 fixes it for now.
Same issue with 13.5.3. Downgrade to 13.5.2 works as expected.
I managed to find the solution for version 13.5.3
as well. || For Node.js server **
const port = process.env.PORT || 3000; // this line
// Next js init
const dev = process.env.NODE_ENV !== "production";
const server = next({ dev, dir: process.cwd(), port }); // need to put "port" here
const handle = server.getRequestHandler();
I have the same problem on next 13.5.3
with the following error on every public images "url" parameter is valid but upstream response is invalid
.
fixing to the 13.5.2
for now.
Got this issue too when I upgraded from 13.4.19 to v13.5.3, so had to revert that upgrade. Will probably upgrade to v15.2 based on previous comments in this thread.
Fyi, some of the issues reported here should be fixed by https://github.com/vercel/next.js/pull/55988
I can confirm the issue on 13.5.3
and that downgrading to 13.5.2
resolved the issue with "url" parameter is valid but upstream response is invalid
.
Next is a shit show lmao, how can you not have a test for this in place ?
It's crazy how Next.js is pushing me more and more to stop putting so much effort into making the latest stable updates if it's only to get these kinds of bugs, I understand why many people have had a bad experience with this framework in the past or recently, it's a shame. Every update is like Russian roulette to see if it hasn't introduced a new bug.
upgrading to 15.5.4
fixes this issue for us.
Edit: nextjs app setup with api and frontend routes, typoscript, deployed on digital ocean app platform.
Upgrading to 13.5.4
does not work for us. We're getting "url" parameter is valid but upstream response is invalid."
On the server side, we get an error like so. This is not working for us unless we rollback our versions.
Experiencing same issue with 13.5.3. In my case running Next.js in Docker container (http) then served over AWS CloudFront (https). Reverting to 13.5.2 fixes it for now.
Fixed in 13.5.4 for me.
13.5.4
fixes this issue for us.
13.5.4 works for me ❤️
13.5.4 does not fix the issue for me - receiving the following errors:
upstream image response failed for /_next/static/media/logo-fff.5c2fe673.png TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11)
at async invokeRequest (/Users/[redacted]/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:16:12)
at async /Users/[redacted]/node_modules/next/dist/server/next-server.js:362:35
at async imageOptimizer (/Users/[redacted]/node_modules/next/dist/server/image-optimizer.js:537:13)
at async cacheEntry.imageResponseCache.get.incrementalCache (/Users/[redacted]/node_modules/next/dist/server/next-server.js:517:61)
at async /Users/[redacted]/node_modules/next/dist/server/response-cache/index.js:102:36 {
cause: InvalidArgumentError: invalid connection header
at processHeader (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:102994)
at new Request (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:100295)
at [dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:64352)
at Intercept (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:2:93153)
at [Intercepted Dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115359)
at Client.dispatch (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115591)
at [dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:2:264035)
at [Intercepted Dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115258)
at Pool.dispatch (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115591)
at [dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:29874) {
code: 'UND_ERR_INVALID_ARG'
Using app and pages directory behind NGINX. If I'm supposed to be adding some sort of header in my NGINX config, a nudge in the right direction would be greatly appreciated.
I'm getting identical error as @aslakson
I'm only on app dir behind NGINX though, not pages.
Hey everyone!! Hope my message can help a lot of you guys out.
My guess, there was a bug introduced from an update that is causing all of this. I've spent days trying to fix it, and the only fix is downgrading.
MY ISSUES: Internal images are not showing in production (It didn't matter the method, public folder, import method, or absolute path), external images work fine.
NOTES: 13.5.4 did not work for me.
I've gotten all the errors I see on this thread.
As for my setup if this is something you have similar:
package.json:
"sharp": "^0.32.6",
"react": "18.2.0",
"next": "13.4.12",
Server Versions
nginx version: nginx/1.18.0 (Ubuntu)
Docker version 24.0.5, build ced0996
NGINX CONFIG:
server {
listen 80;
listen 443 ssl;
server_name your_domain_here.com www.your_domain_here.com;
ssl_certificate /etc/nginx/ssl/server.crt;
ssl_certificate_key /etc/nginx/ssl/server.key;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-For $proxy_protocol_addr;
proxy_set_header Host $host;
proxy_headers_hash_max_size 512;
proxy_headers_hash_bucket_size 128;
error_page 502 503 504 /maintenance.html;
proxy_intercept_errors on;
}
location /backend {
proxy_pass http://127.0.0.1:4000;
proxy_redirect off;
}
}
https://github.com/vercel/next.js/issues/56038#issuecomment-1746864558
13.5.4 does not fix the issue for me - receiving the following errors:
upstream image response failed for /_next/static/media/logo-fff.5c2fe673.png TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at async invokeRequest (/Users/[redacted]/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:16:12) at async /Users/[redacted]/node_modules/next/dist/server/next-server.js:362:35 at async imageOptimizer (/Users/[redacted]/node_modules/next/dist/server/image-optimizer.js:537:13) at async cacheEntry.imageResponseCache.get.incrementalCache (/Users/[redacted]/node_modules/next/dist/server/next-server.js:517:61) at async /Users/[redacted]/node_modules/next/dist/server/response-cache/index.js:102:36 { cause: InvalidArgumentError: invalid connection header at processHeader (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:102994) at new Request (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:100295) at [dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:64352) at Intercept (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:2:93153) at [Intercepted Dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115359) at Client.dispatch (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115591) at [dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:2:264035) at [Intercepted Dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115258) at Pool.dispatch (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:115591) at [dispatch] (/Users/[redacted]/node_modules/next/dist/compiled/undici/index.js:1:29874) { code: 'UND_ERR_INVALID_ARG'
Using app and pages directory behind NGINX. If I'm supposed to be adding some sort of header in my NGINX config, a nudge in the right direction would be greatly appreciated.
I got the same error if I removed sharp
.
this: https://github.com/vercel/next.js/pull/56226 is likely the cause of this issue
I can also confirm this same issue persists in 13.5.4
Version v13.5.4-canary.8 works, next canary versions breaks everything.
@joacub Thanks. So for now downgrading to 13.5.2 would be the only "safe" way to work around this issue?
@joacub Thanks. So for now downgrading to 13.5.2 would be the only "safe" way to work around this issue?
v13.5.4-canary.8 can be used safely, I have tested and everything is working fine.
I have same issue persists in 13.5.4
this issue still in the latest canary version up to day. the commit the remove the headers filters is likely to be the reason fo this error: https://github.com/vercel/next.js/pull/56226
I fixed this issue by updating the nginx config for the domain
#The following variables should be changed and contain unique name in each file if you want to create config for multiple websites. Also please use underscore(_) for names instead of spaces( ) or (-)
#1: upstream_website
#2: STATIC
#3: IP:PORT
#4: yourdomain.com
#5: 256M (This is the maximum size of each request)
proxy_cache_path /var/cache/nginx/upstream_website levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off; #1,2
upstream upstream_website {
server IP:PORT;
} #1,3
server {
listen 80;
server_name yourdomain.com; #4
client_max_body_size 256M; #5
server_tokens off;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
location /_next/static {
proxy_cache STATIC; #2
proxy_pass http://upstream_website; #1
}
location /static {
proxy_cache STATIC; #2
proxy_ignore_headers Cache-Control;
proxy_cache_valid 60m;
proxy_pass http://upstream_website; #1
}
location /_next/image {
proxy_cache STATIC; #2
proxy_pass http://upstream_website; #1
}
location / {
proxy_pass http://upstream_website; #1
}
}
The issue is occuring because of your nginx config not containing the config for the location of images generated by next/image
at /_next/image
We shouldn't have to deal with regressions introduced by NextJS, particularly when it's the probably only framework (I know) which requires such an unusual configuration.
I fixed this issue by updating the nginx config for the domain
#The following variables should be changed and contain unique name in each file if you want to create config for multiple websites. Also please use underscore(_) for names instead of spaces( ) or (-) #1: upstream_website #2: STATIC #3: IP:PORT #4: yourdomain.com #5: 256M (This is the maximum size of each request) proxy_cache_path /var/cache/nginx/upstream_website levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off; #1,2 upstream upstream_website { server IP:PORT; } #1,3 server { listen 80; server_name yourdomain.com; #4 client_max_body_size 256M; #5 server_tokens off; gzip on; gzip_proxied any; gzip_comp_level 4; gzip_types text/css application/javascript image/svg+xml; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; location /_next/static { proxy_cache STATIC; #2 proxy_pass http://upstream_website; #1 } location /static { proxy_cache STATIC; #2 proxy_ignore_headers Cache-Control; proxy_cache_valid 60m; proxy_pass http://upstream_website; #1 } location /_next/image { proxy_cache STATIC; #2 proxy_pass http://upstream_website; #1 } location / { proxy_pass http://upstream_website; #1 } }
The issue is occuring because of your nginx config not containing the config for the location of images generated by
next/image
at/_next/image
For other people trying to do this, this si not the solution.
cause: InvalidArgumentError: invalid connection header
Removing the Upgrade
and Connection
header from nginx block for _next
fixed this issue for me.
As a simplified example, following does not work.
location /_next {
# Next.js images, etc.
proxy_pass http://127.0.0.1:3001;
proxy_read_timeout 60;
proxy_connect_timeout 60;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
}
The following works.
location /_next {
# Next.js images, etc.
proxy_pass http://127.0.0.1:3001;
proxy_read_timeout 60;
proxy_connect_timeout 60;
proxy_redirect off;
}
I had this issue and the chunk not found issue which was fixed by https://github.com/vercel/next.js/pull/56187 but the image issue is still there
cause: InvalidArgumentError: invalid connection header
Removing the
Upgrade
andConnection
header from nginx block for_next
fixed this issue for me.As a simplified example, following does not work.
location /_next { # Next.js images, etc. proxy_pass http://127.0.0.1:3001; proxy_read_timeout 60; proxy_connect_timeout 60; proxy_redirect off; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; }
The following works.
location /_next { # Next.js images, etc. proxy_pass http://127.0.0.1:3001; proxy_read_timeout 60; proxy_connect_timeout 60; proxy_redirect off; }
can you please share the complete config
can you please share the complete config
Actually my config has a lot of other stuff, so it might be better if you share yours, and maybe I can help fix? @ShreshthTiwari
can you please share the complete config
Actually my config has a lot of other stuff, so it might be better if you share yours, and maybe I can help fix? @ShreshthTiwari
proxy_cache_path /var/cache/nginx/astrostops_website levels=1:2 keys_zone=STATIC_AS:10m inactive=7d use_temp_path=off;
upstream website {
server IP:PORT;
}
server {
server_name mywebsitedomain.com;
client_max_body_size 256M;
server_tokens off;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
location /_next {
proxy_cache STATIC_AS;
proxy_pass http://website;
}
location /static {
proxy_cache STATIC_AS;
proxy_ignore_headers Cache-Control;
proxy_cache_valid 60m;
proxy_pass http://website;
}
location / {
proxy_pass http://website;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/astrostops.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/astrostops.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = mywebsitedoamin.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name mywebsitedoamin.com;
return 404; # managed by Certbot
}
@ShreshthTiwari the config looks okay, what error are you getting?
Edit: I am not sure if one-to-one discussion is encouraged here. Maybe we should use Discussions?
this is not a problem in the nginx is a bug introduced by nextjs by droping the filter headers in this commit: https://github.com/vercel/next.js/pull/56226
@huozhi hey, sorry for the ping but maybe you didnt see this, and still nobody seeing.
I am currently running in standalone and facing a similar issue behind an https load balancer. It is not next/image
specific but all GET requests via:
export const GET = async (req: Request) => {
...
return new Response(res, {
status: 200,
headers: {
'content-type': 'application/xml',
'cache-control': 's-maxage=31556952',
},
});
}
results in:
TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:13220:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
cause: [Error: 185CCA705E3E0000: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'
}
This is the same error response as https://github.com/vercel/next.js/issues/56038#issuecomment-1736121768
I had tried v13.5.3
, v13.5.4
, and v13.5.5-canary.7
Definitley seems like a common thread is proxy pass through headers from Nginx, Works via Ip access not using domain name and https, /_next/static requests work /_next/images/ requests fail. Error,
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 imageOptimizer (/var/www/www.jelkslaw.comnew/node_modules/next/dist/server/image-optimizer.js:521:29)
at async cacheEntry.imageResponseCache.get.incrementalCache (/var/www/www.jelkslaw.comnew/node_modules/next/dist/server/next-server.js:520:61)
at async /var/www/www.jelkslaw.comnew/node_modules/next/dist/server/response-cache/index.js:102:36 {
cause: ConnectTimeoutError: Connect Timeout Error
at onConnectTimeout (/var/www/www.jelkslaw.comnew/node_modules/next/dist/compiled/undici/index.js:1:92227)
at /var/www/www.jelkslaw.comnew/node_modules/next/dist/compiled/undici/index.js:1:91719
at Immediate._onImmediate (/var/www/www.jelkslaw.comnew/node_modules/next/dist/compiled/undici/index.js:1:92109)
at process.processImmediate (node:internal/timers:476:21) {
code: 'UND_ERR_CONNECT_TIMEOUT'
}
}
Logged Request Heders and Profile from /node_modules/next/dist/server/next-server.js
requestHeaders {
connection: 'upgrade',
host: 'www.jelkslaw.com',
pragma: 'no-cache',
'cache-control': 'no-cache',
'sec-ch-ua': '"Google Chrome";v="117", "Not;A=Brand";v="8", "Chromium";v="117"',
'sec-ch-ua-mobile': '?0',
'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36',
'sec-ch-ua-platform': '"Linux"',
accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'no-cors',
'sec-fetch-dest': 'image',
referer: 'https://www.jelkslaw.com/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9,it;q=0.8',
cookie: '_ga_CH71PE2KSN=GS1.2.1689592525.31.1.1689592525.0.0.0; _ga=GA1.1.597303003.1680882486; _ga_42W8871NFR=GS1.1.1697050119.56.1.1697053516.0.0.0',
'x-middleware-invoke': '',
'x-invoke-path': '/favicon.ico',
'x-invoke-query': '%7B%7D',
'x-invoke-output': '/favicon.ico'
}
requestProtocol http
Messed around with Nginx config proxy pass through settings all day and Nextjs versions, no luck at all. Hope this information helps solve the problem.
Hey everyone!! Hope my message can help a lot of you guys out.
My guess, there was a bug introduced from an update that is causing all of this. I've spent days trying to fix it, and the only fix is downgrading.
MY ISSUES: Internal images are not showing in production (It didn't matter the method, public folder, import method, or absolute path), external images work fine.
NOTES: 13.5.4 did not work for me.
I've gotten all the errors I see on this thread.
As for my setup if this is something you have similar:
- SSL with Cloudflare
- Remote server with docker containers running the NextJS server exposing to port 3000.
- NGNIX acting as a proxy and load balancer listening to requests on port 80 and 443 and forwarding that to port 3000.
package.json:
"sharp": "^0.32.6", "react": "18.2.0", "next": "13.4.12",
Server Versions
nginx version: nginx/1.18.0 (Ubuntu) Docker version 24.0.5, build ced0996
NGINX CONFIG:
server { listen 80; listen 443 ssl; server_name your_domain_here.com www.your_domain_here.com; ssl_certificate /etc/nginx/ssl/server.crt; ssl_certificate_key /etc/nginx/ssl/server.key; location / { proxy_pass http://127.0.0.1:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Real-IP $proxy_protocol_addr; proxy_set_header X-Forwarded-For $proxy_protocol_addr; proxy_set_header Host $host; proxy_headers_hash_max_size 512; proxy_headers_hash_bucket_size 128; error_page 502 503 504 /maintenance.html; proxy_intercept_errors on; } location /backend { proxy_pass http://127.0.0.1:4000; proxy_redirect off; } }
Also using cloudflare SSL and NGINX and getting the exact same issue
@Iulian-Dragomirescu how can we add a label to this issue so it can actually get triaged and viewed as a bug?
I am getting an error too with 13.5.4 version, images are not loaded on production. I am behind cloudflare SSL and using pm2 to start the server.
/root/.pm2/logs/admin-error-2.log last 15 lines: 2|admin | at /var/www/html/karstic.ro/karstic-admin/node_modules/next/src/server/response-cache/index.ts:129:28 { 2|admin | cause: InvalidArgumentError: invalid connection header 2|admin | at processHeader (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:102994) 2|admin | at new Request (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:100166) 2|admin | at Client.[dispatch] (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:64352) 2|admin | at Intercept (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:2:93153) 2|admin | at Client.[Intercepted Dispatch] (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:115359) 2|admin | at Client.dispatch (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:115591) 2|admin | at Pool.[dispatch] (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:2:264035) 2|admin | at Pool.[Intercepted Dispatch] (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:115258) 2|admin | at Pool.dispatch (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:115591) 2|admin | at Agent.[dispatch] (/var/www/html/karstic.ro/karstic-admin/node_modules/next/dist/compiled/undici/index.js:1:29874) { 2|admin | code: 'UND_ERR_INVALID_ARG' 2|admin | } 2|admin | }
HI, Image works in development and production (only locally, not remotely), but in nginx I get this error (from nginx console):
my folders public/assets/icons/gdpr.png
i try to convert the image in webp.. same error restart server.. same
and this:
"url" parameter is valid but upstream response is invalid
i receive from chromeexemple.com/_next/image?url=%2Fassets%2Ficons%2Fgdpr.png&w=256&q=75
Any ideea?
Thanks!
Additional information
NEXT-1680