`Image` component does not work with https `next dev` #55706

peakercope · 2023-09-21T08:26:42Z

Link to the code that reproduces this issue

https://github.com/peakercope/material-ui-nextjs-pages-router-ts-example

To Reproduce

Clone the example repo
Run pnpm i
Run pnpm dev
Open https://localhost:3000/ in browser

Current vs. Expected behavior

Current result: Banner is not visible

Expected result: Banner is visible

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 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.18.0
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: 7.25.0
    Relevant Packages:
      next: 13.5.2
      eslint-config-next: 13.5.2
      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)

Not sure

Additional context

Image response with 500 error code in browser with message "url" parameter is valid but upstream response is invalid

Terminal console error:

upstream image response failed for /_next/static/media/half-page-banners-desktop-dog-coat.d9613929.jpeg TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async invokeRequest (/material-ui-nextjs-pages-router-ts/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /material-ui-nextjs-pages-router-ts/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/material-ui-nextjs-pages-router-ts/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/material-ui-nextjs-pages-router-ts/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/next-server.js:519:61)
    at async /material-ui-nextjs-pages-router-ts/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: SocketError: other side closed
      at Socket.onSocketEnd (/material-ui-nextjs-pages-router-ts/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/undici/index.js:1:73361)
      at Socket.emit (node:events:529:35)
      at endReadableNT (node:internal/streams/readable:1368:12)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    code: 'UND_ERR_SOCKET',
    socket: {
      localAddress: '::1',
      localPort: 60275,
      remoteAddress: '::1',
      remotePort: 3000,
      remoteFamily: 'IPv6',
      timeout: undefined,
      bytesWritten: 946,
      bytesRead: 0
    }
  }
}

_NEXT-1646

The text was updated successfully, but these errors were encountered:

0xABBCCC · 2023-09-21T10:40:11Z

Have you tested it if it works in production?

I've seen the same issues from others but all of them had external image urls rather than local. Their solution was to add remotePatterns or domains on their nextjs config

hipdev · 2023-09-22T03:39:33Z

Ummm, I'm not able to reproduce the issue 🤔

moshie · 2023-09-22T09:00:27Z

I've been getting a similar issue on our UAT environment it works on local:

upstream image response failed for /images/navbar/image.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/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /opt/application/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/opt/application/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/opt/application/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:519:61)
    at async /opt/application/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/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 started happening when I updated from 12 to 13 I tried using the next/legacy/image but same outcome.

We use a corporate proxy so the above PR looks like it could solve our problem

Some information that might be useful:

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.18.0
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: 8.7.1
    Relevant Packages:
      next: 13.5.2
      eslint-config-next: 12.3.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

The IPC request to `imageOptimizer` assumed the server was listening on http, so this updates it to pull the protocol from `getRequestMeta` instead. This also adds the option to pass in a path to the CA Root so that the dev server can add it to `NODE_EXTRA_CA_CERTS` Closes NEXT-1646 Fixes #55706

joacub · 2023-09-23T14:59:58Z

noes does not work in http 😀

joacub · 2023-09-23T15:00:23Z

"url" parameter is valid but upstream response is invalid

upstream image response failed for /static/branding/store-templates/template-light1.jpeg 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 (/app/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:62829)
    at async invokeRequest (/app/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /app/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/app/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/app/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:519:61)
    at async /app/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: [Error: 00C8F516A37F0000: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'
  }
}

nagman · 2023-09-26T09:47:07Z

I have the same issue:

In the browser:

"url" parameter is valid but upstream response is invalid

In the server console:

upstream image response failed for /_next/static/media/landscape.4c44eb27.jpg 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 globalThis.fetch (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:62909)
    at async invokeRequest (/app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async /app/node_modules/next/dist/server/next-server.js:362:39
    at async imageOptimizer (/app/node_modules/next/dist/server/image-optimizer.js:537:13)
    at async cacheEntry.imageResponseCache.get.incrementalCache (/app/node_modules/next/dist/server/next-server.js:519:61)
    at async /app/node_modules/next/dist/server/response-cache/index.js:102:36 {
  cause: [Error: 587BFC6F477F0000: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'
  }
}

Yet I'm importing a local image, with import, like this:

import Landscape from '../../../components/ResponsiveImage/samples/landscape.jpg';

My env info:

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
Binaries:
  Node: 18.18.0
  npm: 7.20.0
  Yarn: 1.22.19
  pnpm: 8.7.5
Relevant Packages:
  next: 13.5.3
  eslint-config-next: 13.5.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: standalone

I must precise that when I build on my local env (macOs m1 Ventura), it works.

But when I build a container image and deploy it in preproduction on my kubernetes cluster, with node alpine 18.18.0 and sharp installed, it doesn't work.

I don't know if it's related to the fact that the preproduction has an https url, unlike my local build. I'll try to deploy my build to vercel in order to see if it's due to my Dockerfile config or not.

nagman · 2023-09-26T10:02:43Z

Ok, so when building and deploying on vercel, the error is gone. I'll investigate in my Dockerfile to see why it fails on my preproduction server.

advancingu · 2023-09-26T10:12:52Z

@nagman I'm seeing the exact same error with static image files when deploying to Kubernetes.

My hypothesis is that some component tries to access these images locally from Next.js for processing through https even though everything behind the load balancer should use http.

advancingu · 2023-09-26T13:13:49Z

Issue should be fixed in #55988

terrymun · 2023-09-26T13:32:07Z

Might be related to #53715

timothyerwin · 2023-09-28T21:33:38Z

I'm getting the same issue. Is there a workaround in the meantime while we wait for the supposed fix above?

 <Image
          src="/logo.png"
          width={256}
          height={256}
          priority
        />

2023-09-28T21:25:38.990747564Z upstream image response failed for /logo.png TypeError: fetch failed
2023-09-28T21:25:38.990800465Z     at Object.fetch (node:internal/deps/undici/undici:11576:11)
2023-09-28T21:25:38.990807166Z     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-09-28T21:25:38.990811466Z     at async globalThis.fetch (/home/site/wwwroot/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:62909)
2023-09-28T21:25:38.990815266Z     at async invokeRequest (/home/site/wwwroot/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
2023-09-28T21:25:38.990819666Z     at async /home/site/wwwroot/node_modules/next/dist/server/next-server.js:362:39
2023-09-28T21:25:38.990823366Z     at async imageOptimizer (/home/site/wwwroot/node_modules/next/dist/server/image-optimizer.js:537:13)
2023-09-28T21:25:38.990827266Z     at async cacheEntry.imageResponseCache.get.incrementalCache (/home/site/wwwroot/node_modules/next/dist/server/next-server.js:519:61)
2023-09-28T21:25:38.990831266Z     at async /home/site/wwwroot/node_modules/next/dist/server/response-cache/index.js:102:36 {
2023-09-28T21:25:38.990834966Z   cause: [Error: C0070786B4710000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:355:
2023-09-28T21:25:38.990839266Z   ] {
2023-09-28T21:25:38.990843366Z     library: 'SSL routines',
2023-09-28T21:25:38.990847366Z     reason: 'wrong version number',
2023-09-28T21:25:38.990851467Z     code: 'ERR_SSL_WRONG_VERSION_NUMBER'
2023-09-28T21:25:38.990855667Z   }
2023-09-28T21:25:38.990859767Z }

Iulian-Dragomirescu · 2023-09-29T06:02:37Z

@timothyerwin You use a custom server? (Node.js) or next build in?
If u use a custom server try to add port in next({port})

// Config
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 }); // add port here
const handle = server.getRequestHandler();

shawngustaw · 2023-10-03T03:11:09Z

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

github-actions · 2023-10-17T12:01:38Z

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.

peakercope added the bug Issue was opened via the bug report template. label Sep 21, 2023

balazsorban44 added area: experimental Image (next/image) Related to Next.js Image Optimization. linear: next Confirmed issue that is tracked by the Next.js team. labels Sep 21, 2023

ztanner mentioned this issue Sep 22, 2023

fix Image when used with --experimental-https #55775

Merged

kodiakhq bot closed this as completed in #55775 Sep 22, 2023

mrkpatchaa mentioned this issue Sep 29, 2023

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

Closed

1 task

github-actions bot added the locked label Oct 17, 2023

github-actions bot locked as resolved and limited conversation to collaborators Oct 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Image` component does not work with https `next dev` #55706

`Image` component does not work with https `next dev` #55706

peakercope commented Sep 21, 2023 •

edited by padmaia

Loading

0xABBCCC commented Sep 21, 2023

hipdev commented Sep 22, 2023

moshie commented Sep 22, 2023 •

edited

Loading

joacub commented Sep 23, 2023

joacub commented Sep 23, 2023 •

edited

Loading

nagman commented Sep 26, 2023

nagman commented Sep 26, 2023

advancingu commented Sep 26, 2023

advancingu commented Sep 26, 2023

terrymun commented Sep 26, 2023

timothyerwin commented Sep 28, 2023

Iulian-Dragomirescu commented Sep 29, 2023

shawngustaw commented Oct 3, 2023

github-actions bot commented Oct 17, 2023

Image component does not work with https next dev #55706

Image component does not work with https next dev #55706

Comments

peakercope commented Sep 21, 2023 • edited by padmaia Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

0xABBCCC commented Sep 21, 2023

hipdev commented Sep 22, 2023

moshie commented Sep 22, 2023 • edited Loading

joacub commented Sep 23, 2023

joacub commented Sep 23, 2023 • edited Loading

nagman commented Sep 26, 2023

nagman commented Sep 26, 2023

advancingu commented Sep 26, 2023

advancingu commented Sep 26, 2023

terrymun commented Sep 26, 2023

timothyerwin commented Sep 28, 2023

Iulian-Dragomirescu commented Sep 29, 2023

shawngustaw commented Oct 3, 2023

github-actions bot commented Oct 17, 2023

`Image` component does not work with https `next dev` #55706

`Image` component does not work with https `next dev` #55706

peakercope commented Sep 21, 2023 •

edited by padmaia

Loading

moshie commented Sep 22, 2023 •

edited

Loading

joacub commented Sep 23, 2023 •

edited

Loading