Astro's <Image /> component (500 Internal Server Error)

[golamrabbiazad]

What version of Bun is running?

1.0.1

What platform is your computer?

Linux 6.2.0-32-generic x86_64 x86_64

What steps can reproduce the bug?

using the bunx astro dev command or bunx --bun astro dev command shows an Internal Server Error in the browser.

What is the expected behavior?

No response

What do you see instead?

No response

Additional information

The Internal Server Error only shows when importing a local Image from a folder to an Astro component.

[nathandaly]

Bump

Also getting this with Astro v3 and Bun when in SSR mode.

(Can confirm this doesn't happen with npm)

Mac Ventura 13.5.1

import Image from "../assets/images/Experts/Image.png";

<Image
  class="w-full h-full rounded-full object-cover"
  src={image}
  alt={alt}
/>

[golamrabbiazad]

One thing to share is that If I install packages with npm and then install packages with bun, Astro's <Image/> component works fine. :smile:

[econmang]

Just wanted to add to this with my environment as well, as I'm experiencing a similar issue.

What version of Bun is running?

1.0.2

What platform is your computer?

Ubuntu 22.04.3 LTS (Note: this is via WSL for Windows)

What steps can reproduce the bug?

using the bunx astro dev command or bunx --bun astro dev command shows an Internal Server Error in the browser.

What is the expected behavior?

Image should show; no error response.

What do you see instead?

Image does not show, 500 error response.

Additional information

Similar to the above, seems to only occur for local as I was able to reference a web resource and it worked.

This works:

This doesn't (image saved to src/assets/):

With error message: GET http://localhost:4321/_image?href=%2F%40fs%2Fhome%2Feconm%2FDocuments%2Fpersonal%2Fprojects%2Fweb%2Fastronautical-atmosphere%2Fsrc%2Fassets%2Fgopher.png%3ForigWidth%3D1300%26origHeight%3D1392%26origFormat%3Dpng&w=300&h=300&f=webp 500 (Internal Server Error)

[econmang]

One thing to share is that If I install packages with npm and then install packages with bun, Astro's <Image/> component works fine. 😄

This is a workaround that works for me as well, @golamrabbiazad. Thanks for pointing it out. If I npm install the sharp dependency, then run with bun, all is well. 🤷‍♂️

[xexiu]

This error is also happening for me using bun. OSX: Mac Ventura 13.5.1

The workaround I used for this works fine, for me, right now, but it's not something to stick with:

astro.config.msj

import { defineConfig, passthroughImageService } from 'astro/config';

// https://astro.build/config
export default defineConfig({
   site: 'YOUR_SITE',
   integrations: [YOUR_INTEGRATIONS],
   image: {
      service: passthroughImageService(), <-- this
   },
});

[dinesh-hills]

Hey I am facing the same issue while using bun. Is it possible to just install the sharp dep package using npm and continue using bun for the rest?

[taep96]

You should add sharp to your trustedDependencies in package.json, remove node_modules and bun.lockb, and then reinstall all packages. That way it should run the postinstall script and work without needing to install sharp yourself.

[dinesh-hills]

You should add sharp to your trustedDependencies in package.json, remove node_modules and bun.lockb, and then reinstall all packages. That way it should run the postinstall script and work without needing to install sharp yourself.

this works thanks for the help @taep96

[taep96]

This is fixed in 1.0.17.

[riki137]

I have bun 1.0.21 and this error still happens

[nojaf]

I have this on Windows (latest canary):

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/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/assets/services/sharp.js:19:11)
    at async Object.transform (C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/assets/services/sharp.js:31:15)
    at async Module.GET (C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/assets/endpoint/node.js:67:30)
    at async renderEndpoint (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/runtime/server/endpoint.js:32:20)
    at async callMiddleware (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/core/middleware/callMiddleware.js:11:10)
    at async RenderContext.render (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/core/render-context.js:92:22)
    at async handleRoute (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/vite-plugin-astro-server/route.js:196:18)
    at async run (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/vite-plugin-astro-server/request.js:48:14)
    at async runWithErrorHandling (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/vite-plugin-astro-server/controller.js:64:5)
    at async handleRequest (file:///C:/Users/nojaf/Projects/amplifying-fsharp.github.io/node_modules/astro/dist/vite-plugin-astro-server/request.js:42: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'
}

Which confused me as this https://x.com/thepaperdave/status/1760850733883351332?s=20 seemed to work.