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
- Fixed `image-optimizer` crashing when using `outputFileTracing` (#48513) <!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible w... — committed to vercel/next.js by DuCanhGH a year ago
- Debug broken image in production - Add `sharp`, based on: - https://github.com/vercel/next.js/issues/48077 - https://nextjs.org/docs/messages/sharp-missing-in-production — committed to mattdriscoll/mid-cities-rv-park by deleted user a year ago
Temporary workaround
I tested it with those versions and it is working. Above versions seems broken unfortunatelly
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:
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 thenext.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.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!
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