Cannot build when using Sharp 0.33.0 #9345

Boston343 · 2023-12-06T13:46:14Z

Astro Info

Astro                    v4.0.2
Node                     v18.18.2
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             auto-import
                         @astrojs/mdx
                         @astrojs/tailwind
                         @astrojs/sitemap
                         astro-compress

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If I upgrade the Sharp dependency to 0.33.0 for image optimization with astro:assets, I am unable to build locally (npm run build). Development mode still works fine.

This happens with both Astro v3.6.4 and v4.0.2.

The error logged to the console looks like:

MissingSharp: Could not find Sharp. Please install Sharp (`sharp`) manually into your project or migrate to another image service.
    at loadSharp (file:///.../dist/chunks/astro/assets-service_x_nToqfa.mjs:352:11)
    at async Object.transform (file:///.../dist/chunks/astro/assets-service_x_nToqfa.mjs:364:15)
    at async generateImageInternal (file:///.../node_modules/astro/dist/assets/build/generate.js:119:24)
    at async generateImage (file:///.../node_modules/astro/dist/assets/build/generate.js:66:28)
    at async file:///.../node_modules/p-queue/dist/index.js:118:36 {
  loc: undefined,
  title: 'Could not find Sharp.',
  hint: "See Sharp's installation instructions for more information: https://sharp.pixelplumbing.com/install. If you are not relying on `astro:assets` to optimize, transform, or process any images, you can configure a passthrough image service instead of installing Sharp. See https://docs.astro.build/en/reference/errors/missing-sharp for more information.\n" +
    '\n' +
    'See https://docs.astro.build/en/guides/images/#default-image-service for more information on how to migrate to another image service.',
  frame: undefined,
  type: 'AstroError'
}

Additional notes: It seems to be an interaction between astro:assets and astro-compress. If I even have the line import compress from "astro-compress" inside astro.config.mjs the build will fail (I don't even have to add it to the integrations arrray). However, if I remove the compress() integration, and comment out the import statement, it will build fine. THEN I can add the astro-compress import and integration back into the integrations array and it will build and compress fine. But if I then go and add an image or otherwise cause the images to need re-generated (since they aren't cached), the issue will occur again. And then you'll have to do the comment out compress and what-not all over again.

If I downgrade sharp back to 0.32.6 it builds just fine.

What's the expected result?

The website should build and this error should not be thrown.

Link to Minimal Reproducible Example

Stackblitz link. You need to download it, run npm install, then npm run build to see the error. See the "Additional notes" section above for more details.

Participation

I am willing to submit a pull request for this issue.

The text was updated successfully, but these errors were encountered:

Princesseuh · 2023-12-06T13:55:48Z

Could you provide a reproduction? I'm building many websites using Sharp 0.33.0 and Astro 4 successfully both locally and in CI with no issues.

github-actions · 2023-12-06T13:56:05Z

Hello @Boston343. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

Boston343 · 2023-12-06T15:25:19Z

Could you provide a reproduction? I'm building many websites using Sharp 0.33.0 and Astro 4 successfully both locally and in CI with no issues.

Working on trying to replicate on Stackblitz and haven't been able to yet. Might try a local copy of the same code to see if anything changes.

Boston343 · 2023-12-06T16:34:10Z

@Princesseuh I added a stackblitz link, although you'll need to download it to your machine and install npm packages, then attempt to build. I added an additional comment which I've copied here. I'm not sure if this is an astro problem or an astro-compress problem but it seems to be an interaction between the two.

Additional notes: It seems to be an interaction between astro:assets and astro-compress. If I even have the line import compress from "astro-compress" inside astro.config.mjs the build will fail (I don't even have to add it to the integrations arrray). However, if I remove the compress() integration, and comment out the import statement, it will build fine. THEN I can add the astro-compress import and integration back into the integrations array and it will build and compress fine. But if I then go and add an image or otherwise cause the images to need re-generated (since they aren't cached), the issue will occur again. And then you'll have to do the comment out compress and what-not all over again.

But again, if I downgrade sharp to 0.32.6, this issue doesn't happen. So maybe it's a sharp issue? I really have no idea how to diagnose further unfortunately.

josuazurbruegg · 2023-12-10T21:06:49Z

I'm having trouble building using the most recent sharp version too. Downgrading sharp to 0.32.6 helped me as well.
I'm using Astro 4.0.3. I'm not using the astro-compress library. My project is pretty basic but I'm generating various dynamic images using the getImage server-side helper, which is the only thing slightly out of the ordinary that I'm doing.

Happy to provide a reproducible example if needed still!

P.S. this is my first project working with Astro and it has been an absolute treat! A big thank you to everyone involved in the work on the project!

Princesseuh · 2023-12-12T17:30:11Z

Hmm, following the reproduction steps, everything seems to work just fine for me.

One thing I do notice with the astro-compress stuff, is that it pulls an old version of Sharp in addition to the installed one, I wonder if there could be an incompatibility due to having multiple versions installed, perhaps. Nonetheless, I'm not able to reproduce the error in the OP 😦

notjosh · 2023-12-13T16:02:25Z

When I dump the actual error, I get the following exception:

Error: Could not load the "sharp" module using the darwin-x64 runtime
Possible solutions:
- Add platform-specific dependencies:
    npm install --os=darwin --cpu=x64 sharp
  or
    npm install --force @img/sharp-darwin-x64

Turns out, Sharp 0.33.0 changed how binaries are distributed (tldr: lovell/sharp#3750 (comment)).

The fix for me was to run yarn add sharp --ignore-engines, which seems to persist even when node_modules is removed. It's weird though, because I already had sharp in package.json, so I'd expect it to have worked. Computers 🤷 (edit: maybe I spoke too soon on that last point!)

fflaten · 2023-12-18T13:19:17Z

Had the same error in OP since 0.33.0 was released. Remember to clear asset cache between changing versions to force error.

Using pnpm on Debian 11 (devcontainer). Can recreate using a new portfolio template project by only changing portrait.jpg on index page to use <Image> and installing 0.33.1 sharp as dependency. Assuming issue was because Astro has peer dep on 0.32.*

ppo · 2023-12-23T16:52:00Z

I had the same problem installing my site on my server using @astrojs/node, using Astro 4.0.3.

Installing "sharp": "^0.32" on the server (with node v20.10.0) solved the problem.
On my computer (with node v21.2.0), "sharp": "^0.33.1" works fine.

fflaten · 2023-12-27T21:03:58Z

@Princesseuh 4.0.8/#9463 didn't resolve it unfortunately.

All deps using same version yet it fails 😞

pnpm why sharp
Legend: production dependency, optional only, dev only

@fflaten/[email protected] /workspaces/Website

dependencies:
@astrojs/mdx 2.0.3
└─┬ astro 4.0.8 peer
  └── sharp 0.33.1
astro 4.0.8
└── sharp 0.33.1
astro-expressive-code 0.30.1
└─┬ astro 4.0.8 peer
  └── sharp 0.33.1
sharp 0.33.1

devDependencies:
astro-auto-import 0.4.2
└─┬ astro 4.0.8 peer
  └── sharp 0.33.1

 generating optimized images 
[CouldNotTransformImage] Could not transform image `/_astro/me.6Zkk9p1x.png`. See the stack trace for more information.
  Hint:
    This is often caused by a corrupted or malformed image. Re-exporting the image from your image editor may fix this issue.
  Error reference:
    https://docs.astro.build/en/reference/errors/could-not-transform-image/
  Stack trace:
    at generateImageInternal (file:///workspaces/Website/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/astro/dist/assets/build/generate.js:129:21)
    at async file:///workspaces/Website/node_modules/.pnpm/[email protected]/node_modules/p-queue/dist/index.js:187:36
  Caused by:
  Could not find Sharp. Please install Sharp (`sharp`) manually into your project or migrate to another image service.
    at loadSharp (file:///workspaces/Website/dist/chunks/astro/assets-service_YPMpKCGM.mjs:318:11)
    at async generateImageInternal (file:///workspaces/Website/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/astro/dist/assets/build/generate.js:123:26)
    at async file:///workspaces/Website/node_modules/.pnpm/[email protected]/node_modules/p-queue/dist/index.js:187:36

Princesseuh · 2023-12-27T22:03:29Z

Hmm, that's annoying. I unfortunately do not know, and I still cannot reproduce any issues myself.

A question: What version of Node are you using?

fflaten · 2023-12-27T22:12:27Z

v18.16.0

Princesseuh · 2023-12-27T22:23:53Z

Ah, then I know the issue, Sharp's binaries lowest supported version is ^18.17.0. Try upgrading to at least 18.17.0 (the full semver check is ^18.17.0 || ^20.3.0 || >=21.0.0)

That's unfortunate, wonder why it's that version specifically, we might have to pin until the next major of Astro... so annoying.

fflaten · 2023-12-27T22:29:28Z

I'm new to JS/TS world, but shouldn't it complain during pnpm install about that while installing sharp? 😕
Either way I still get the same error with v18.19.0. Trying to reproduce in a new repo with devcontainer/codespace now.

Princesseuh · 2023-12-27T22:30:35Z

I'm new to JS/TS world, but shouldn't it complain during pnpm install about that while installing sharp? 😕 Either way I still get the same error with v18.19.0. Trying to reproduce in a new repo with devcontainer/codespace now.

No, because those are all optionalDeps, the JS world doesn't handle dependencies like this super well, unfortunately...

fflaten · 2023-12-27T22:35:58Z

Either way I still get the same error with v18.19.0. Trying to reproduce in a new repo with devcontainer/codespace now.

Scratch that. Forgot to wipe node_modules after changing versions. v18.17.0+ works - and reproducable in codespace with 18.16.0 🥳 Sorry for not testing that. Haven't touched node version since last Astro requirement change.

@Boston343 You mentioned v18.18.2 in OP. Have you deleted node_modules since moving to that node version? If not, could you try it and install deps again?

Update

I'm new to JS/TS world, but shouldn't it complain during pnpm install about that while installing sharp? 😕

No, because those are all optionalDeps, the JS world doesn't handle dependencies like this super well, unfortunately...

sharp is non-optional dependency in my project, so would expect it to catch it there. It fails as expected by using pnpm install --engine-strict so I've added engine-strict=true to .npmrc now avoid this again 🙂

PaulMorris · 2023-12-28T13:58:07Z

I was getting a build failure on Cloudflare pages: [ERROR] [vite] [vite]: Rollup failed to resolve import "sharp" while using nodejs 18.14.1. I found this issue, upgraded to nodejs 20.10.0 and that resolved the build failure.

louisiscoding · 2023-12-28T22:26:07Z

Astro v4.0.8
Node v20.10.0
System macOS (x64)
Package Manager npm
Output server
Adapter @astrojs/vercel/serverless
Integrations @astrojs/react
@astrojs/tailwind

Using npm run dev in development works. But as soon as i host it on Vercel : https://louis-lecocq.vercel.app/

Boston343 · 2023-12-30T18:12:42Z

@fflaten yeah I've deleted node_modules, along with dist, and .astro folders at various points and it doesn't seem to help.

Currently running Node v20.10.0 and npm 10.2.3, otherwise same stuff as original post

I'm getting intermittent errors now with Sharp even while in dev mode with Astro 4.0.8 where it says "Could not find Sharp.", when it could just 2 minutes ago, without me even closing the dev environment (just updating a file so it reloads). I have not managed to find consistency with what causes it. Right now I'm working with 4.0.7 and it seems fine. Seems like Sharp ^0.33.0 is just causing problems.

emrerdem1 · 2024-01-04T19:52:46Z

This issue only occurs after migrating to v4.1.0 for me.

Node: v20.10.0
Astro: 4.1.0
Yarn: 1.22.19

I'm getting these warnings about Sharp after nuking and re-installing node_modules:

warning package.json: No license field
warning [email protected]: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The engine "libvips" appears to
warning @img/[email protected]: The engine "p
warning @img/[email protected]: The engine "g
warning @img/[email protected]: The engine "pnp
warning @img/[email protected]: The engine "gli
warning @img/[email protected]: The en
warning @img/[email protected]: The en
warning @img/[email protected]: The engi
warning @img/[email protected]: The engi
warning @img/[email protected]: The engin
warning @img/[email protected]: The engin
warning @img/[email protected]: The eng
warning @img/[email protected]: The eng
warning @img/[email protected]: The eng
warning @img/[email protected]: The eng
warning @img/[email protected]: The engin
warning @img/[email protected]: The engin
warning @img/[email protected]: The
warning @img/[email protected]: The
warning @img/[email protected]: The e
warning @img/[email protected]: The e
warning @img/[email protected]: The engine "pnpm
warning @img/[email protected]: The engine "glib
warning @img/[email protected]: The engine "pn
warning @img/[email protected]: The engine "gl
ine "musl" appears to be invalid.
warning @img/[email protected]: The engine "pnpm" appears to be invalid.
warning @img/[email protected]: The engine "pnpm" appears to be invalid.
warning @img/[email protected]: The engine "pnpm" appears to be invalid.
[3/4] Linking dependencies...
warning "@astrojs/react > @vitejs/[email protected]" has unmet peer dependency "vite@^4.2.0 || ^5.0.0".
warning Workspaces can only be enabled in private projects.
[4/4] Building fresh packages...

Error:

Could not process image request: MissingSharp: Could not find Sharp. Please install Sharp (`sharp`) manually into your project or migrate to another image service.
    at loadSharp (C:/Users/A/project/node_modules/astro/dist/assets/services/sharp.js:19:11)
    at async Object.transform (C:/Users/A/project/node_modules/astro/dist/assets/services/sharp.js:31:15) 
    at async Module.GET (C:/Users/A/project/node_modules/astro/dist/assets/endpoint/node.js:67:30)        
    at async callEndpoint (file:///C:/A/A/project/node_modules/astro/dist/core/endpoint/index.js:124:16)
    at async #tryRenderRoute (file:///C:/Users/A/project/node_modules/astro/dist/core/pipeline.js:119:16) 
    at async DevPipeline.renderRoute (file:///C:/Users/A/project/node_modules/astro/dist/core/pipeline.js:58:20)
    at async handleRoute (file:///C:/Users/A/project/node_modules/astro/dist/vite-plugin-astro-server/route.js:248:18)
    at async run (file:///C:/Users/A/project/node_modules/astro/dist/vite-plugin-astro-server/request.js:50:14)
    at async runWithErrorHandling (file:///C:/Users/A/project/node_modules/astro/dist/vite-plugin-astro-server/controller.js:64:5)
    at async handleRequest (file:///C:/Users/A/project/node_modules/astro/dist/vite-plugin-astro-server/request.js:44:3) {
  loc: undefined,
  title: 'Could not find Sharp.',
  hint: "See Sharp's installation instructions for more information: https://sharp.pixelplumbing.com/install. If you are not relying on `astro:assets` to optimize, transform, or process any images, you can configure a passthrough image service instead 
of installing Sharp. See https://docs.astro.build/en/reference/errors/missing-sharp for more information.\n" +
    '\n' +
    'See https://docs.astro.build/en/guides/images/#default-image-service for more information on how to migrate to another image service.',
  frame: undefined,
  type: 'AstroError'
}
22:49:22 [500] /_image 130ms

Sharp dep is getting installed just fine in v4.0.6, so I had to downgrade back to the working version.

Princesseuh · 2024-01-04T19:53:56Z

4.1.0 includes no changes to this, so it's most likely a coincidence!

emrerdem1 · 2024-01-04T19:56:30Z

4.1.0 includes no changes to this, so it's most likely a coincidence!

It could be. I tried upgrading to 4.1.0 twice, and had to downgrade back to 4.0.6. I don't know what's the cause, unfortunately.

vrabe · 2024-01-07T08:55:51Z

It could be. I tried upgrading to 4.1.0 twice, and had to downgrade back to 4.0.6. I don't know what's the cause, unfortunately.

Downgrading to 4.0.6 works for me though warnings still appear. I don't know why either.

silveltman · 2024-01-07T13:26:26Z

The fix for me was to run yarn add sharp --ignore-engines, which seems to persist even when node_modules is removed. It's weird though, because I already had sharp in package.json, so I'd expect it to have worked. Computers 🤷 (edit: maybe I spoke too soon on that last point!)

yarn add sharp --ignore-engines also fixed it for me

AdamKniec · 2024-01-07T20:57:25Z

I had a problem to render any image on Astro v4.0.8 using the built in <Image> component... I was about to give up but luckily I found this thread.

If you are getting errors / warnings about missing Sharp or images beeing undefined even though the path you give to src is correct then try

yarn add sharp --ignore-engines just like guys above suggested

I don't know if it's the proper way to fix that but I'm finally able to render the image...

Thanks you good people on this thread :D

nimser · 2024-01-09T14:47:50Z

For me all tips here weren't enough, I had to update pnpm itself with pnpm i --global pnpm (as well as setting a recent node version)

joao-pedrozo · 2024-02-03T13:32:38Z

For me all tips here weren't enough, I had to update pnpm itself with pnpm i --global pnpm (as well as setting a recent node version)

Thanks

jacklenox · 2024-02-03T15:08:21Z

Just to confirm that for me as well, I just needed to update my versions of node and npm. I use nvm, so it was a matter of: nvm install --lts

…ssue see withastro/astro#9345

nemanjam · 2024-05-14T13:24:47Z

I had the same problem installing my site on my server using @astrojs/node, using Astro 4.0.3.

Installing "sharp": "^0.32" on the server (with node v20.10.0) solved the problem. On my computer (with node v21.2.0), "sharp": "^0.33.1" works fine.

0.32.6 works, while 0.33.3 fails.

EKliptus · 2024-05-18T10:06:54Z

In my case, I solved this issue for build but not for astro dev ???

TL;DR
With astro, pnpm, node up-to date and sharp manual install v0.32.6 :
-> build on linux prod server : OK
-> build on windows dev laptop : OK
-> astro dev on the same windows dev laptop : KO

Astro               v4.8.6
Node                v20.13.1
System              Windows (x64)
Package Manager     pnpm (v9.1.1)
Output              static
Adapter             none
Integrations        @astrojs/sitemap
                    @astrojs/tailwind
                    @astrojs/alpinejs
                    @vite-pwa/astro-integration

Before this issue appear to me, I am using only @vite-pwa/assets-generator with pwaAssets integration that automatically generate pwa assets in dev and build mode.

Then I wanted to use astro assets:image and I must manually install sharp :

with sharp 0.33.x -> no build and no astro dev (error trigger by @vite-pwa/assets-generator).
with sharp 0.32.6 -> builds are ok but not astro dev (error trigger by Astro)

With sharp 0.32.6 manual install :

✔when build no error appear (linux or windows) : astro assets:image and pwaAssets runs like a charm.
BUT
⁉ I have errors on pages with assets:image Image tag : MissingSharp Astro Error
@vite-pwa/assets-generator use sharp without error with astro dev in my case because I used pwaAssets integration in AstroPWA integration

Finally when I deactivate pwaAssets integration from @vite-pwa/assets-generator all runs without error but I loose my pwa assets (404) in astro dev.

I see :

astro assets:image must work with sharp 0.32.6
when @vite-pwa/assets-generator works with up-to-date sharp 0.33.4

@astrojs/tailwind 5.1.0
└─┬ astro 4.8.6 peer
  └── sharp 0.33.4
@vite-pwa/assets-generator 0.2.4
├── sharp 0.32.6
└─┬ sharp-ico 0.1.5
  └── sharp 0.32.6
@vite-pwa/astro 0.3.1
├─┬ @vite-pwa/assets-generator 0.2.4 peer
│ ├── sharp 0.32.6
│ └─┬ sharp-ico 0.1.5
│   └── sharp 0.32.6
├─┬ astro 4.8.6 peer
│ └── sharp 0.33.4
└─┬ vite-plugin-pwa 0.19.8 peer
  └─┬ @vite-pwa/assets-generator 0.2.4 peer
    ├── sharp 0.32.6
    └─┬ sharp-ico 0.1.5
      └── sharp 0.32.6
astro 4.8.6
└── sharp 0.33.4
sharp 0.32.6
sharp-ico 0.1.5
└── sharp 0.32.6
vite-plugin-pwa 0.19.8
└─┬ @vite-pwa/assets-generator 0.2.4 peer
  ├── sharp 0.32.6
  └─┬ sharp-ico 0.1.5
    └── sharp 0.32.6

Thank you for your clarifications.

EKliptus · 2024-05-18T10:12:06Z

For the moment, my workaround choices are :

either I bypass Astro assets:image Image tag processing with passthroughImageService() in dev mode
either I disable pwaAssets integration in AstroPWA integration in dev mode

Princesseuh · 2024-05-18T10:22:56Z

It seems like the PWA plugin you're using is using an outdated version of Sharp perhaps? Recent versions of Astro assume Sharp 0.33.x

EKliptus · 2024-05-18T12:14:14Z

It seems like the PWA plugin you're using is using an outdated version of Sharp perhaps? Recent versions of Astro assume Sharp 0.33.x
Ok yes it is ! brain fog... It's more clear for me now...
Thank you @Princesseuh

Cannot build when using Sharp 0.33.0 #9345

Cannot build when using Sharp 0.33.0 #9345

Comments

Boston343 commented Dec 6, 2023 • edited Loading

Astro Info

If this issue only occurs in one browser, which browser is a problem?

Describe the Bug

What's the expected result?

Link to Minimal Reproducible Example

Participation

Princesseuh commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

Boston343 commented Dec 6, 2023

Boston343 commented Dec 6, 2023 • edited Loading

josuazurbruegg commented Dec 10, 2023

Princesseuh commented Dec 12, 2023

notjosh commented Dec 13, 2023 • edited Loading

fflaten commented Dec 18, 2023 • edited Loading

ppo commented Dec 23, 2023

fflaten commented Dec 27, 2023 • edited Loading

Princesseuh commented Dec 27, 2023

fflaten commented Dec 27, 2023

Princesseuh commented Dec 27, 2023

fflaten commented Dec 27, 2023 • edited Loading

Princesseuh commented Dec 27, 2023 • edited Loading

fflaten commented Dec 27, 2023 • edited Loading

PaulMorris commented Dec 28, 2023 • edited Loading

louisiscoding commented Dec 28, 2023

Boston343 commented Dec 30, 2023

emrerdem1 commented Jan 4, 2024 • edited Loading

Princesseuh commented Jan 4, 2024

emrerdem1 commented Jan 4, 2024

vrabe commented Jan 7, 2024

silveltman commented Jan 7, 2024

AdamKniec commented Jan 7, 2024 • edited Loading

nimser commented Jan 9, 2024 • edited Loading

joao-pedrozo commented Feb 3, 2024

jacklenox commented Feb 3, 2024

nemanjam commented May 14, 2024

EKliptus commented May 18, 2024 • edited Loading

EKliptus commented May 18, 2024 • edited Loading

Princesseuh commented May 18, 2024

EKliptus commented May 18, 2024

dfrios commented Aug 7, 2024

bskimball commented Aug 8, 2024

Giovannisabces commented Aug 28, 2024

JordanMcn commented Sep 20, 2024

moojing commented Nov 23, 2024 • edited Loading

Boston343 commented Dec 6, 2023 •

edited

Loading

Boston343 commented Dec 6, 2023 •

edited

Loading

notjosh commented Dec 13, 2023 •

edited

Loading

fflaten commented Dec 18, 2023 •

edited

Loading

fflaten commented Dec 27, 2023 •

edited

Loading

fflaten commented Dec 27, 2023 •

edited

Loading

Princesseuh commented Dec 27, 2023 •

edited

Loading

fflaten commented Dec 27, 2023 •

edited

Loading

PaulMorris commented Dec 28, 2023 •

edited

Loading

emrerdem1 commented Jan 4, 2024 •

edited

Loading

AdamKniec commented Jan 7, 2024 •

edited

Loading

nimser commented Jan 9, 2024 •

edited

Loading

EKliptus commented May 18, 2024 •

edited

Loading

EKliptus commented May 18, 2024 •

edited

Loading

moojing commented Nov 23, 2024 •

edited

Loading