pnpm 8.14.3, Next.js 14.1.0 standalone mode, sharp missing

[emilioaray-dev]

Hello,

I'm encountering a problem while trying to use Next.js 14 with Docker and the 'sharp' package for image optimization. I've followed all the required steps, but I'm consistently facing an error.

Here is the link to my repository for reference:
GitHub Repository Link

The specific error message I'm encountering in Docker is as follows:

2024-01-26 05:01:10    ▲ Next.js 14.1.0
2024-01-26 05:01:10    - Local:        http://localhost:3000
2024-01-26 05:01:10    - Network:      http://0.0.0.0:3000
2024-01-26 05:01:10 
2024-01-26 05:01:10  ✓ Ready in 60ms
2024-01-26 05:02:44  ⨯ Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly.

Below is my Dockerfile:

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

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

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD ["node", "server.js"]

And this is my .env file:

NEXT_SHARP_PATH=/app/node_modules/sharp

The issue seems to occur consistently, and it affects the ability to convert images to WebP format for optimization.

I would greatly appreciate any assistance or guidance in resolving this issue. Please let me know if you need any more information or if there are specific details you'd like me to provide.

Thank you for your help.

[lovell]

This looks like a problem with the standalone build logic in Next.js specific to pnpm and its use of symlinks.

This logic is based in the https://github.com/vercel/nft dependency so you may want to ask there.

Outside the container I see the following, please note the symlink.

$ pnpm i --frozen-lockfile
...
$ ls -l node_modules/.pnpm/@[email protected]/node_modules/@img
lrwxrwxrwx 1 user group   85 Jan 26 10:47 sharp-libvips-linux-x64 -> ../../../@[email protected]/node_modules/@img/sharp-libvips-linux-x64
drwxrwxr-x 3 user group 4096 Jan 26 10:47 sharp-linux-x64

Inside the container, after Next.js has run its file tracing, the symlink has gone:

$ docker build -t sharp-3967 .
$ docker run --rm sharp-3967 sh -c "ls -l node_modules/.pnpm/@[email protected]/node_modules/@img"
drwxr-xr-x    3 nextjs   nodejs        4096 Jan 26 10:37 sharp-linux-x64

@styfle Do you have any ideas around this? I saw there are some existing tests at https://github.com/vercel/nft/tree/main/test/unit/pnpm-symlinks so perhaps this might be another scenario to add?

[styfle]

Thanks I'll take a look 👍

The bug is likely in next and not @vercel/nft from what I can tell.

This looks like a duplicate of vercel/next.js#59346

[styfle]

I was mistaken, it was a bug in @vercel/nft since pnpm doesn't hoist so we have to recursively add optionalDependencies

• fix: update sharp special case for pnpm vercel/nft#387

[lovell]

Thanks for the updates, I'll close.

For anyone else coming here this was fixed in Next.js v14.1.1-canary.28 via commit vercel/next.js@5ee6a07

[jacksongoode]

Is there any holdover solution in the meantime?

[lovell]

@jacksongoode pnpm provides overrides that might allow you to pin to a more recent version of @vercel/nft, at least 0.26.3 for the fix, as that's where the problem was.

[mamlzy]

Thanks for the updates, I'll close.

For anyone else coming here this was fixed in Next.js v14.1.1-canary.28 via commit vercel/next.js@5ee6a07

I've tried it and it works, thank you!