Using <Image /> component with-docker results in missing image-optimizer

[chrisdoc]

What example does this report relate to?

with-docker

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

latest

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Docker

Describe the Bug

When using the <Image /> component in combination with the new standalone feature https://nextjs.org/docs/advanced-features/output-file-tracing results in the image-optimizer.js not being part of the copied node_modules and all request to the image produce a 500 error.

Curl request to the image URL that is being requested by next.js in the frontend

  -H 'Connection: keep-alive' \
  -H 'Pragma: no-cache' \
  -H 'Cache-Control: no-cache' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: no-cors' \
  -H 'Sec-Fetch-Dest: image' \
  -H 'Referer: http://localhost:3000/' \
  -H 'Accept-Language: en,en-US;q=0.9,de;q=0.8,nl;q=0.7' \
  --compressed

result

Internal Server Error

Error: Cannot find module './image-optimizer'
Require stack:
- /app/node_modules/next/dist/server/next-server.js
- /app/server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.fn (/app/node_modules/next/dist/server/next-server.js:609:49)
    at Router.execute (/app/node_modules/next/dist/server/router.js:222:48)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Server.run (/app/node_modules/next/dist/server/next-server.js:1135:29)
    at async Server.handleRequest (/app/node_modules/next/dist/server/next-server.js:325:20)
    at async Server.<anonymous> (/app/server.js:18:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/app/node_modules/next/dist/server/next-server.js',
    '/app/server.js'
  ]
}

1. Build your container: docker build -t nextjs-docker ..
2. Run your container: docker run -p 3000:3000 nextjs-docker.
3. Connect to running container docker exec -it $(docker ps -q) ash
4. Navigate to server directory cd node_modules/next/dist/server/
5. List files in server directory ls 0la

Output from Docker container file system after connecting with missing image-optimizer.js

/app $ cd node_modules/next/dist/server/
/app/node_modules/next/dist/server $ ls -la
total 300
drwxr-xr-x    4 nextjs   nodejs        4096 Dec 14 20:47 .
drwxr-xr-x    9 nextjs   nodejs        4096 Dec 14 20:47 ..
-rw-r--r--    1 nextjs   nodejs        3473 Dec 14 20:47 accept-header.js
-rw-r--r--    1 nextjs   nodejs       16027 Dec 14 20:47 api-utils.js
-rw-r--r--    1 nextjs   nodejs        3185 Dec 14 20:47 config-shared.js
-rw-r--r--    1 nextjs   nodejs         544 Dec 14 20:47 config-utils.js
-rw-r--r--    1 nextjs   nodejs       24927 Dec 14 20:47 config.js
-rw-r--r--    1 nextjs   nodejs        2687 Dec 14 20:47 crypto-utils.js
-rw-r--r--    1 nextjs   nodejs         521 Dec 14 20:47 denormalize-page-path.js
-rw-r--r--    1 nextjs   nodejs        2750 Dec 14 20:47 font-utils.js
-rw-r--r--    1 nextjs   nodejs         599 Dec 14 20:47 get-page-files.js
-rw-r--r--    1 nextjs   nodejs         635 Dec 14 20:47 htmlescape.js
-rw-r--r--    1 nextjs   nodejs         827 Dec 14 20:47 image-config.js
-rw-r--r--    1 nextjs   nodejs        6674 Dec 14 20:47 incremental-cache.js
drwxr-xr-x    2 nextjs   nodejs        4096 Dec 14 20:47 lib
-rw-r--r--    1 nextjs   nodejs        3068 Dec 14 20:47 load-components.js
-rw-r--r--    1 nextjs   nodejs       88521 Dec 14 20:47 next-server.js
-rw-r--r--    1 nextjs   nodejs        1492 Dec 14 20:47 node-polyfill-fetch.js
-rw-r--r--    1 nextjs   nodejs        1260 Dec 14 20:47 normalize-page-path.js
-rw-r--r--    1 nextjs   nodejs         454 Dec 14 20:47 optimize-amp.js
-rw-r--r--    1 nextjs   nodejs        1055 Dec 14 20:47 render-result.js
-rw-r--r--    1 nextjs   nodejs       51710 Dec 14 20:47 render.js
-rw-r--r--    1 nextjs   nodejs         705 Dec 14 20:47 request-meta.js
-rw-r--r--    1 nextjs   nodejs        3046 Dec 14 20:47 require.js
-rw-r--r--    1 nextjs   nodejs        3194 Dec 14 20:47 response-cache.js
-rw-r--r--    1 nextjs   nodejs       11495 Dec 14 20:47 router.js
-rw-r--r--    1 nextjs   nodejs        2868 Dec 14 20:47 send-payload.js
-rw-r--r--    1 nextjs   nodejs        1477 Dec 14 20:47 serve-static.js
-rw-r--r--    1 nextjs   nodejs        1102 Dec 14 20:47 utils.js
drwxr-xr-x    5 nextjs   nodejs        4096 Dec 14 20:47 web

Expected Behavior

image-optimizer.js is being part of node_modules when using standalone mode and 200 is returned with the image instead of 500

To Reproduce

I created a minimal example here chrisdoc@3d8eb4d to reproduce that adds one <Image /> tag with a reference to an external Image.

[ijjk]

Hi, this has been updated in v12.0.8-canary.7 of Next.js, please update and give it a try!

[paescuj]

Hi, this has been updated in v12.0.8-canary.7 of Next.js, please update and give it a try!

Can confirm, it's working with >= v12.0.8-canary.7 👍 Thanks!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.