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

[Eric Liu]

Issue: When using astro-compress in the context of a Vercel build (linux-x64 runtime), the sharp binary is not being found causing a failure to import astro-compress.

Version affected: 2.2.5

Screenshot of issue:

Workaround:
Downgrade astro-compress to 2.2.3 which uses a working version of sharp (0.32.6) (reference)

// package.json
{
  "dependencies": {
    "astro-compress": "2.2.3",
    "typescript": "~5.2.2"
  }
}

Related issues:

• vercel/nft#371
• lovell/sharp#3870

[Nikola Hristov]

Hi, can you maybe try using the #no-sharp (this disables image compression, however) branch like in: #200 or checking if overrides: in your package.json fixes it like in: #244

[Tim-Niclas Oelschläger]

Try add this to your package.json (maybe change the version)
"resolutions": { "astro/sharp": "0.33.0", "astro-compress/sharp": "0.33.0" }

[Nikola Hristov]

Try add this to your package.json (maybe change the version) "resolutions": { "astro/sharp": "0.33.0", "astro-compress/sharp": "0.33.0" }

"resolutions" is specific to Yarn https://yarnpkg.com/configuration/manifest#resolutions use "overrides" for both NPM / PNPM and Yarn:

{
  "overrides": {
    "astro": {
      "sharp": "0.33.0"
    }
  }
}

[nikitaprokopov]

Try add this to your package.json (maybe change the version) "resolutions": { "astro/sharp": "0.33.0", "astro-compress/sharp": "0.33.0" }

"resolutions" is specific to Yarn https://yarnpkg.com/configuration/manifest#resolutions use "overrides" for both NPM / PNPM and Yarn:

{
  "overrides": {
    "astro": {
      "sharp": "0.33.0"
    }
  }
}

Doesn't work for me

[Nikola Hristov]

Try add this to your package.json (maybe change the version) "resolutions": { "astro/sharp": "0.33.0", "astro-compress/sharp": "0.33.0" }

"resolutions" is specific to Yarn yarnpkg.com/configuration/manifest#resolutions use "overrides" for both NPM / PNPM and Yarn:

{
  "overrides": {
    "astro": {
      "sharp": "0.33.0"
    }
  }
}

Doesn't work for me

What is the output of npm ls sharp inside your project?

[nikitaprokopov]

This worked for me:

  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest",
    "astro": {
      "sharp": "0.32.6"
    },
    "astro-compress": {
      "sharp": "0.32.6"
    }
  }

But I have another error:

My package.json:

{
  "name": "arch-capital-landing",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev --host",
    "start": "astro dev --host",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "tsm:watch": "typed-scss-modules ./src/**/*.module.scss -p.$ src --watch"
  },
  "dependencies": {
    "@astrojs/preact": "^3.0.2",
    "@floating-ui/react": "^0.26.4",
    "@fontsource/inter": "^5.0.16",
    "@fontsource/playfair-display": "^5.0.18",
    "@fontsource/roboto": "^5.0.8",
    "astro": "^4.0.9",
    "astro-compress": "^2.2.5",
    "astro-critters": "^2.0.11",
    "framer-motion": "^10.17.4",
    "modern-normalize": "^2.0.0",
    "preact": "^10.19.3",
    "swiper": "^11.0.5",
    "typescript": "^5.3.3"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^6.17.0",
    "autoprefixer": "^10.4.16",
    "cssnano": "^6.0.2",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-astro": "^0.31.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-perfectionist": "^2.5.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-sonarjs": "^0.23.0",
    "eslint-plugin-unicorn": "^50.0.1",
    "prettier": "^3.1.1",
    "sass": "^1.69.7",
    "stylelint": "^16.1.0",
    "stylelint-config-recess-order": "^4.4.0",
    "stylelint-config-standard-scss": "^12.0.0",
    "vite-plugin-optimize-css-modules": "^1.0.6"
  },
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest",
    "astro": {
      "sharp": "0.32.6"
    },
    "astro-compress": {
      "sharp": "0.32.6"
    }
  }
}

[nikitaprokopov]

npm ls sharp

[nikitaprokopov]

#no-sharp

Could you explain please how to switch to #no-sharp? I want to try it but don't understand how

[nikitaprokopov]

#no-sharp

Could you explain please how to switch to #no-sharp? I want to try it but don't understand how

Do this with npm i https://github.com/astro-community/AstroCompress.git#no-sharp -D. Is this correct?

[Nikola Hristov]

@nikitaprokopov You can install it like so:

npm install -D -E astro-community/AstroCompress#no-sharp

[Nikola Hristov]

Should be fixed in the latest v2.2.7 which uses the latest sharp at the time 0.33.1 the same as Astro's 0.33.1

[Wolfleader]

Hi,

This still seems like its an issue even with the latest version of astro-compress 2.2.10 is there any way around it?

[Nikola Hristov]

Will be fixed in #329. You can track that issue there.

[David Awad]

I still have this issue for what it's worth in all of my astro sites when I deploy templates from vercel.

[Nikola Hristov]

@davidawad Can you provide a bit more information on how you're running it ? What version are you using, is it the latest astro + astro-compress or @playform/compress I'm trying it on https://github.com/NikolaRHristov/Starter and it runs / builds successfully - NikolaRHristov/Starter@7ab86cf#commitcomment-142393730

[David Awad]

This was a while ago and was able to fix it but never figured out how

I can tell you that when using latest sharp this breaks. I ran into it on 4 different Astro websites deployed on vercel.

I think the issue Was solved going down to sharp 32.4.

[Nikola Hristov]

@davidawad Have you tried the resolutions hotfix in package.json https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

Like this:

"overrides": {
	"astro": {
		"sharp": "0.32.6"
	},
	"astro-compress": {
		"sharp": "0.32.6"
	}
}