ImageError with NextJS 13.5.3

[yaegashi]

After updating to NextJS 13.5.3, I'm getting the following errors on the Azure webapp:

2023-09-28T00:48:19.741635131Z upstream image response failed for /ai-icon.png TypeError: fetch failed
2023-09-28T00:48:19.741797035Z     at Object.fetch (node:internal/deps/undici/undici:11457:11)
2023-09-28T00:48:19.742358847Z     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-09-28T00:48:19.742378547Z     at async globalThis.fetch (/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.prod.js:135:62935)
2023-09-28T00:48:19.742385348Z     at async invokeRequest (/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
2023-09-28T00:48:19.742391048Z     at async /node_modules/next/dist/server/next-server.js:362:39
2023-09-28T00:48:19.742395648Z     at async imageOptimizer (/node_modules/next/dist/server/image-optimizer.js:537:13)
2023-09-28T00:48:19.742407448Z     at async cacheEntry.imageResponseCache.get.incrementalCache (/node_modules/next/dist/server/next-server.js:519:61)
2023-09-28T00:48:19.742412648Z     at async /node_modules/next/dist/server/response-cache/index.js:102:36 {
2023-09-28T00:48:19.742417148Z   cause: [Error: C0A7E36448710000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:355:
2023-09-28T00:48:19.742421548Z   ] {
2023-09-28T00:48:19.742425648Z     library: 'SSL routines',
2023-09-28T00:48:19.742429448Z     reason: 'wrong version number',
2023-09-28T00:48:19.742432949Z     code: 'ERR_SSL_WRONG_VERSION_NUMBER'
2023-09-28T00:48:19.742436749Z   }
2023-09-28T00:48:19.742440149Z }
2023-09-28T00:48:19.774519436Z ImageError: "url" parameter is valid but upstream response is invalid
2023-09-28T00:48:19.774589738Z     at imageOptimizer (/node_modules/next/dist/server/image-optimizer.js:549:19)
2023-09-28T00:48:19.774596038Z     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-09-28T00:48:19.774601838Z     at async cacheEntry.imageResponseCache.get.incrementalCache (/node_modules/next/dist/server/next-server.js:519:61)
2023-09-28T00:48:19.774607338Z     at async /node_modules/next/dist/server/response-cache/index.js:102:36 {
2023-09-28T00:48:19.774625038Z   statusCode: 500
2023-09-28T00:48:19.774628939Z }

The webapp freshly deployed with azd shows the following screen. /ai-icon.png seems broken due to this error.

Reverting to NextJS 13.4.12 resolves the problem.

[giuliohome]

It needs the following two changes:

img tag instead of Image in src/features/chat/chat-ui/start-new-chat.tsx

and

  images: {
    remotePatterns: [
        {
           protocol: 'https',
            hostname: '**',
             port: '',
             pathname: '**',
         },
     ],
  },

in src/next.config.js

[thivy]

this is now resolved

[yaegashi]

Fix confirmed, thanks!