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

  1. pnpm i
  2. mkcert localhost (can skip)
  3. 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)

Most upvoted comments

i have the same issue on 14.0.1 with custom server

+3
Pluvas159 on Dec 4, 2023

@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.

image
+1
styfle on Feb 13, 2024

I can confirm that this is fixed in the latest canary version for me using a custom server with SSL.

+1
thepuzzlemaster on Feb 13, 2024

I came up with a solution. In general, I decided to replace the urls in the file itself server.js Which seems logical.

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dotenv = require('dotenv');

dotenv.config({ path: `.env` });
const dev = process.env.NODE_ENV !== 'production';
const ORIGIN = process.env.ORIGIN
const hostname = 'localhost';
const port = process.env.APP_PORT || 3000;
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true);
      let newParsedUrl = parsedUrl

      if (parsedUrl.pathname === '/_next/image') {
        const newSearch = new URLSearchParams({
          ...parsedUrl.query,
          url: `${ORIGIN}${parsedUrl.query.url}`,
        }).toString()

        newParsedUrl = parse(`${parsedUrl.pathname}?${newSearch}`)
      }

      await handle(req, res, newParsedUrl);
    } catch (err) {
      console.error('Error occurred handling', url, err);
      res.statusCode = 500;
      res.end('internal server error');
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});
+1
malikiz on Dec 11, 2023

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.

+1
malikiz on Dec 11, 2023
Read more comments on GitHub
← next.js: image optimizer returns 400 when path contains unicode characters
next.js: ImageResponse type error on route after updating to 13.5.1 →