How to use `Sharp` library in API with Vercel?

[rwecho]

Link to the code that reproduces this issue

https://github.com/rwecho/portal

To Reproduce

I reference the Sharp library by pnpm add sharp and enable the API to resize the image with it.

It's working well locally. But when I deployed it to the Vercel, the API returned with 500 status.

The detailed log:

Error: Could not load the "sharp" module using the linux-x64 runtime

I searched for the issue, and could not distinguish that the sharp library is build-in.

Current vs. Expected behavior

In the app, we can use the Image component to optimize the image, how to handle it in API? thanks

Verify canary release

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

Provide environment information

The vercel environment, how to get the vercel info?

Which area(s) are affected? (Select all that apply)

Middleware / Edge (API routes, runtime)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[Cow258]

// next.config.js
const nextConfig = {
  webpack: (cfg, options = {}) => {
    cfg.externals.push('sharp')
    const { webpack } = options
    const regex = /^sharp$/
    cfg.plugins.push(new webpack.IgnorePlugin({
      resourceRegExp: regex,
    }))
  }
}

p.s. sharp unable to run on Edge runtime, sharp only can run on serverless function

[mwawrusch]

Ran into this again today, with a working system (and using the workaround from above to no avail).