next.js: Image not working on production

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 16.15.0
      npm: 8.18.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.0
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image), Jest (next/jest)

Link to the code that reproduces this issue

https://github.com/muhammedogz/next-image-error

To Reproduce

npx create-next-app@latest after created update next-config

/**
 * @type {import('next').NextConfig}
 **/

const config = {
  images: {
    domains: ["avatars.githubusercontent.com"],
  },
  output: "standalone",
  reactStrictMode: false,
};

module.exports = config;

use this docker file

# Install dependencies only when needed
FROM node:16-alpine AS deps

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json ./ 

RUN npm i --legacy-peer-deps

# Rebuild the source code only when needed
FROM node:16-alpine AS builder

ENV NEXT_TELEMETRY_DISABLED 1

WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

# Production image, copy all the files and run next
FROM node:16-alpine AS runner

ENV NEXT_TELEMETRY_DISABLED 1
ENV PORT 3000

WORKDIR /app

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENTRYPOINT ["node", "server.js"]

modify index.ts

import Image from "next/image";

export default function Home() {
  return (
    <div>
      test
      <Image
        alt="test"
        src={"https://avatars.githubusercontent.com/u/14985020?s=200&v=4"}
        width={100}
        height={100}
      />
    </div>
  );
}

After that, run docker commands in the root of the project

docker build .
docker run -dp 3000:3000 <image-id>

Locate to the http://localhost:3000/ image is not shown.

Helpfull info Docker Logs output

Error: Cannot find module 'next/dist/compiled/jest-worker'
Require stack:
- /app/node_modules/next/dist/server/lib/squoosh/main.js
- /app/node_modules/next/dist/server/image-optimizer.js
- /app/node_modules/next/dist/server/next-server.js
- /app/server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
    at Function.mod._resolveFilename (/app/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Function.Module._load (node:internal/modules/cjs/loader:871:27)
    at Module.require (node:internal/modules/cjs/loader:1098:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at Object.<anonymous> (/app/node_modules/next/dist/server/lib/squoosh/main.js:8:19)
    at Module._compile (node:internal/modules/cjs/loader:1196:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
    at Module.load (node:internal/modules/cjs/loader:1074:32)
    at Function.Module._load (node:internal/modules/cjs/loader:909:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/app/node_modules/next/dist/server/lib/squoosh/main.js',
    '/app/node_modules/next/dist/server/image-optimizer.js',
    '/app/node_modules/next/dist/server/next-server.js',
    '/app/server.js'
  ]
}

Describe the Bug

Images are not shown. Server sending 500 for images. Exact same docker file and exact same project working yesterday. I tried it with different nextjs versions.

Expected Behavior

Show the images without error

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Dockarized and deploy to the AWS

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 43
  • Comments: 30 (3 by maintainers)

Commits related to this issue

Most upvoted comments

Temporary workaround

COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+ COPY --from=builder /app/node_modules/next/dist/compiled/jest-worker ./node_modules/next/dist/compiled/jest-worker

I tested it with those versions and it is working. Above versions seems broken unfortunatelly

"next": "13.2.4",
"eslint-config-next": "13.2.4"

I have a same problem. standalone mode working nice only "next": "13.2.4". In other cases the Image component doesn’t get correct image url.

I have the same issue with Nextjs 13.4.3 . I had to use instead of <Image /> component.

This issue is back on 13.4.1

Images break or we get an “internal server error” (was working fine on 13.3.1 and 13.3.4)

Edit for more information:

  • On Desktop, we get an “internal server error” on all pages of the website
  • On mobile, website loads but images break (same thing that was happening with this issue)
  • Reverting to 13.3.4 fixes it, so it doesn’t look like it’s related to our code
  • Nextjs web app deployed on AWS Amplify

I can confirm that downgrading from 13.3 to 13.2.4 fixes the issue.

I haven’t seen as many breaking changes as in 13.3 in a long time 😦

I have encountered the same issue as stated above. There is a very bad workaround, which is to turn the optimization off for next/image in the next.config.js until the problem is fixed. The images will show up again, but you have lost the srcset generation and other benefits, so downgrading to 13.2.4 is the better solution.

@damgel where should I put these codes?

`COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/package.json ./package.json COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

  • COPY --from=builder /app/node_modules/next/dist/compiled/jest-worker ./node_modules/next/dist/compiled/jest-worker`

You need to put this lines in your Dockerfile. Just locate the COPY command inside the file and replace with this lines.

IMG_20230627_135732.jpg

@damgel where should I put these codes?

`COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/package.json ./package.json COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

  • COPY --from=builder /app/node_modules/next/dist/compiled/jest-worker ./node_modules/next/dist/compiled/jest-worker`

You need to put this lines in your Dockerfile. Just locate the COPY command inside the file and replace with this lines.

ridiculous when stuff gets fixed then broken again!

Temporary workaround

COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+ COPY --from=builder /app/node_modules/next/dist/compiled/jest-worker ./node_modules/next/dist/compiled/jest-worker

this solution only work for internal images

The same issue shows up using 13.3.0 on AWS Amplify (which deploys using docker). This seems to be a similar issue to https://github.com/vercel/next.js/issues/48173