ImageError: "url" parameter is valid but upstream response is invalid

netergart commented 11 months ago

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

[X] 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

Pluvas159 commented 11 months ago

i have the same issue on 14.0.1 with custom server

sleeporsmile commented 11 months ago

https://github.com/vercel/next.js/issues/58248

ccxdev commented 11 months ago

14.0.3 Same issue

If it help, on production we have specific route, for example it's /collections/<collection>/image, this route handled by nginx and proxied to backend (not nextjs) that return a file.

malikiz commented 11 months ago

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.

malikiz commented 11 months ago

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}`);
  });
});

netergart commented 11 months ago

hostname

but this will not work if you use images from other sources, I mean if you use local and remote images together from other domain

thomcrielaard commented 10 months ago

Bumping this as I am facing the same issue

ackvanity commented 10 months ago

Got this once in v13's development, now it just happens to some sizes of the same image once I deployed the app using a custom server to cPanel.

thomcrielaard commented 10 months ago

Same issue here! I found a solution which is don't import the image, but add it to public and import it via URL, though it is not an ideal solution

wppaing commented 9 months ago

I am also facing the same issue. In my case upstream image response failed for https://imageurl is infinitely showing in server logs. Even I handle a placeholder image inside onError callback, it soesn't show up and image caught flashing forever.

https://github.com/vercel/next.js/assets/87934366/28c3c443-02f2-45f7-9a6b-5dff73bc4466

styfle commented 9 months ago

Thanks for reporting this issue!

This was fixed in PR https://github.com/vercel/next.js/pull/61471 and will be available in a future stable release.

You can try it out today on the canary channel with npm i next@canary, thanks!

thepuzzlemaster commented 9 months ago

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

thepuzzlemaster commented 9 months ago

@styfle, is there an easy way to track when this fix will get incorporated into a future stable release? Will this issue be mentioned in the release notes or something like that?

styfle commented 9 months ago

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

BryantIT commented 9 months ago

So is this fix not in the stable version yet?

github-actions[bot] commented 8 months ago

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.

vercel / next.js