Next JS - Netlify - Build failed - Error: Could not load the "sharp" module using the linux-x64 runtime

Question

I've added the following configuration to my netlify.toml file, but I'm still facing the issue.

[context.staging]
  command = "yarn build"
  publish = ".next" 

[functions]
  node_bundler = "esbuild"
  external_node_modules = ["sharp"]
  included_files =  ["node_modules/sharp/**/*"]

[[plugins]]
  package = "@netlify/plugin-nextjs"

I am encountering this error when Netlify triggers the build process. The issue appears to be related to the 'sharp' package, which I am using in one of my Next.js APIs to compress images. Therefore, removing the package is not a viable solution. I have already configured the netlify.toml file as mentioned, but the problem persists. Any suggestions or solutions would be greatly appreciated

**@next/next/no-img-element
11:29:12 AM: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
11:29:19 AM:    Collecting page data ...
11:29:20 AM: Error: Could not load the "sharp" module using the linux-x64 runtime
11:29:20 AM: Possible solutions:
11:29:20 AM: - Ensure optional dependencies can be installed:
11:29:20 AM:     npm install --include=optional sharp
11:29:20 AM:     yarn add sharp --ignore-engines
11:29:20 AM: - Ensure your package manager supports multi-platform installation:
11:29:20 AM:     See https://sharp.pixelplumbing.com/install#cross-platform
11:29:20 AM: - Add platform-specific dependencies:
11:29:20 AM:     npm install --os=linux --cpu=x64 sharp
11:29:20 AM: - Consult the installation documentation:
11:29:20 AM:     See https://sharp.pixelplumbing.com/install
11:29:20 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/sharp/lib/sharp.js:114:9)
11:29:20 AM:     at Module._compile (node:internal/modules/cjs/loader:1356:14)
11:29:20 AM:     at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
11:29:20 AM:     at Module.load (node:internal/modules/cjs/loader:1197:32)
11:29:20 AM:     at Module._load (node:internal/modules/cjs/loader:1013:12)
11:29:20 AM:     at Module.require (node:internal/modules/cjs/loader:1225:19)
11:29:20 AM:     at mod.require (/opt/build/repo/node_modules/next/dist/server/require-hook.js:65:28)
11:29:20 AM:     at require (node:internal/modules/helpers:177:18)
11:29:20 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/sharp/lib/constructor.js:10:1)
11:29:20 AM:     at Module._compile (node:internal/modules/cjs/loader:1356:14)
11:29:21 AM: > Build error occurred
11:29:21 AM: Error: Failed to collect page data for /api/image-process
11:29:21 AM:     at /opt/build/repo/node_modules/next/dist/build/utils.js:1258:15
11:29:21 AM:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
11:29:21 AM:   type: "Error"
11:29:21 AM: }
11:29:21 AM: error Command failed with exit code 1.
11:29:21 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11:29:21 AM: ​
11:29:21 AM: "build.command" failed                                        
11:29:21 AM: ────────────────────────────────────────────────────────────────
11:29:21 AM: ​
11:29:21 AM:   Error message
11:29:21 AM:   Command failed with exit code 1: yarn build
11:29:21 AM: ​
11:29:21 AM:   Error location
11:29:21 AM:   In build.command from netlify.toml:
11:29:21 AM:   yarn build
11:29:21 AM: ​
11:29:21 AM:   Resolved config
11:29:21 AM:   build:
11:29:21 AM:     command: yarn build
11:29:21 AM:     commandOrigin: config
11:29:21 AM:     environment:
11:29:21 AM:       - NEXT_PUBLIC_AWS_ACCESS_KEY_ID
11:29:21 AM:       - NEXT_PUBLIC_AWS_CLIENTID
11:29:21 AM:       - NEXT_PUBLIC_AWS_REGION
11:29:21 AM:       - NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY
11:29:21 AM:       - NEXT_PUBLIC_AWS_USERPOOLID
11:29:21 AM:       - NEXT_PUBLIC_S3_UPLOAD_BUCKET
11:29:21 AM:       - NEXT_PRIVATE_TARGET
11:29:21 AM:     publish: /opt/build/repo/.next
11:29:21 AM:     publishOrigin: config
11:29:21 AM:   functions:
11:29:21 AM:     "*":
11:29:21 AM:       external_node_modules:
11:29:21 AM:         - sharp
11:29:21 AM:       included_files:
11:29:21 AM:         - node_modules/sharp/**/*
11:29:21 AM:       node_bundler: esbuild
11:29:21 AM:   plugins:
11:29:21 AM:     - inputs: {}
11:29:21 AM:       origin: config
11:29:21 AM:       package: "@netlify/plugin-nextjs"
11:29:21 AM: Failed during stage "building site": Build script returned non-zero exit code: 2
11:29:21 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
11:29:21 AM: Failing build: Failed to build site
11:29:22 AM: Finished processing build request in 1m56.09s**

Answer 1

yarn cache clean && yarn add --os=linux --cpu=x64 sharp@0.32 --ignore-engines && yarn build

Did the trick for me in the netlify build script 😅

Javascript is beautiful

Answer 2

[build] command = "yarn add sharp --ignore-engines && yarn build"

Try this. it's worked for me.