Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
chrisdoc opened this issue Dec 14, 2021 · 3 comments · Fixed by #32522
Closed

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

chrisdoc opened this issue Dec 14, 2021 · 3 comments · Fixed by #32522

Comments

@chrisdoc
Copy link

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.

@chrisdoc chrisdoc added the bug Issue was opened via the bug report template. label Dec 14, 2021
@balazsorban44 balazsorban44 added kind: bug and removed bug Issue was opened via the bug report template. labels Dec 15, 2021
@kodiakhq kodiakhq bot closed this as completed in #32522 Dec 15, 2021
kodiakhq bot pushed a commit that referenced this issue Dec 15, 2021
This ensures we trace the `image-optimizer` for the standalone output mode as previously this was always ignored under the assumption image optimizing would be handled at the CDN level in standalone mode. 

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

Fixes: #32513
@ijjk
Copy link
Member

ijjk commented Dec 15, 2021

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

@paescuj
Copy link

paescuj commented Dec 23, 2021

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
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Feb 6, 2022
natew pushed a commit to natew/next.js that referenced this issue Feb 16, 2022
This ensures we trace the `image-optimizer` for the standalone output mode as previously this was always ignored under the assumption image optimizing would be handled at the CDN level in standalone mode. 

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

Fixes: vercel#32513
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants