Next.js unable to get Sharp working

Why do I still see this message:

‘For production Image Optimization with Next.js, the optional ‘sharp’ package is strongly recommended. Run ‘npm i sharp’, and Next.js will use it automatically for Image Optimization.’

Sharp has been added to the package.json as per the instructions from the Next.js documentation. Is this simply not supported by Netlify?

Hi there!

Can you post a link to the build logs as well as your current package.json file?

{
  "name": "@rocket-house-productions/source",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "slicemachine": "start-slicemachine",
    "lint": "nx run-many --target=lint --all",
    "prepare": "husky"
  },
  "dependencies": {
    "@clerk/nextjs": "^5.2.8",
    "@ducanh2912/next-pwa": "^10.2.8",
    "@gsap/react": "^2.1.1",
    "@next/bundle-analyzer": "^14.2.5",
    "@prismicio/client": "^7.6.0",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "@prismicio/slice-simulator-react": "^0.2.3",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.13",
    "class-variance-authority": "^0.7.0",
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.12",
    "react-hook-form": "^7.52.1",
    "react-hot-toast": "^2.4.1",
    "@hookform/resolvers": "^3.9.0",
    "framer-motion": "^11.3.17",
    "gsap": "./gsap-bonus.tgz",
    "iconsax-react": "^0.0.8",
    "lucide-react": "^0.417.0",
    "next": "14.2.5",
    "next-slicezone": "^0.2.6",
    "nextjs-toploader": "^1.6.12",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-player": "^2.16.0",
    "sharp": "^0.33.4",
    "swiper": "^11.1.9",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "tslib": "^2.3.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@nx/cypress": "19.5.1",
    "@nx/eslint": "19.5.1",
    "@nx/eslint-plugin": "19.5.1",
    "@nx/jest": "19.5.1",
    "@nx/js": "19.5.1",
    "@nx/netlify": "^17.2.3",
    "@nx/next": "19.5.1",
    "@nx/react": "19.5.1",
    "@nx/workspace": "19.5.1",
    "@slicemachine/adapter-next": "^0.3.45",
    "@svgr/webpack": "^8.1.0",
    "@swc-node/register": "~1.9.1",
    "@swc/cli": "~0.3.12",
    "@swc/core": "~1.5.7",
    "@swc/helpers": "~0.5.11",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@testing-library/react": "15.0.6",
    "@types/jest": "^29.4.0",
    "@types/node": "18.16.9",
    "@types/react": "18.3.1",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.16.0",
    "@typescript-eslint/parser": "^7.16.0",
    "autoprefixer": "^10.4.19",
    "babel-jest": "^29.4.1",
    "cypress": "^13.13.0",
    "eslint": "~8.57.0",
    "eslint-config-next": "14.2.3",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "husky": "^9.1.3",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "nx": "19.5.1",
    "postcss": "^8.4.40",
    "prettier": "^3.3.3",
    "sass": "1.62.1",
    "slice-machine-ui": "^2.4.1",
    "tailwindcss": "^3.4.7",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.5.2"
  }
}

Next.js Runtime v5 doesn’t even use Sharp. If you need Sharp you’re likely using Runtime v4 which we don’t provide support for anymore.

I just did a production build and seems the message disappeared. On any of my preview builds, nextjs does show the following during build:

11:50:28 AM: $ nx run kids-guitar-dojo:build
11:50:37 AM: > nx run kids-guitar-dojo:build
11:50:37 AM: > next build
11:50:42 AM: ▲ Next.js 14.2.5
11:50:42 AM: Creating an optimized production build …
11:50:42 AM: ○ (pwa) PWA support is disabled.
11:50:44 AM: :warning: For production Image Optimization with Next.js, the optional ‘sharp’ package is strongly recommended. Run ‘npm i sharp’, and Next.js will use it automatically for Image Optimization.
11:50:44 AM: Read more: Sharp Missing In Production | Next.js
11:50:54 AM: ✓ Compiled successfully
11:50:54 AM: Skipping linting
11:50:54 AM: Checking validity of types …
11:50:57 AM: Collecting page data …
11:50:59 AM: Generating static pages (0/25) …
11:51:02 AM: Generating static pages (6/25)
11:51:02 AM: Generating static pages (12/25)
11:51:02 AM: Generating static pages (18/25)

I guess it is fine if this works on production.