Get an 500 internal server error with picture tag in development mode

nothinghalosix commented 10 months ago

Astro Info

Astro                    v4.0.3
Node                     v20.7.0
System                   macOS (arm64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

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

Chrome, Safari, Firefox

Describe the Bug

getting 500 internal server error for picture tag. Image stored in src/assets/images/

import { Picture } from 'astro:assets'; import myImage from "../assets/images/bolun.jpg";

Layout:

<Picture src={myImage} formats={['avif', 'webp']} alt="A description of location." />

Output in Inspector:

What's the expected result?

to get a simple quick fix ;) thanks

Link to Minimal Reproducible Example

https://gitlab.com/nothinghalosix/astro4-base

Participation

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

taep96 commented 10 months ago

I was getting the same error with bun and adding sharp to trustedDependencies fixed it.

florian-lefebvre commented 10 months ago

@nothinghalosix are you using Bun (I see on the repo a yarn.lock file but I prefer to check)? If that's case, let me remind you that Astro does not officially support Bun. Regarding images, the issue is usually that you need to install sharp as well.

nothinghalosix commented 10 months ago

on other machine (from work) Macbook Air M1 works fine. yarn version 1.22.19 Astro v4.0.3 Node v20.7.0 System macOS (arm64) Package Manager unknown Output static Adapter none Integrations @astrojs/tailwind

not working machine (private) Macbook Pro M1 Pro. yarn version 1.22.21

@florian-lefebvre when i try to install sharp

warning Error running install script for optional dependency: "/Users/nothing/sites/astro4-base/node_modules/sharp: Command failed. Exit code: 127 Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy) Arguments: Directory: /Users/nothing/sites/astro4-base/node_modules/sharp

drop yarn lock file and node_modules folder, install via npm -> worked for me

ematipico commented 10 months ago

I am not sure there's something we can do here. It seems yarn can't install the package, which means you should file an issue in their repository.

carsakiller commented 10 months ago

I am experiencing a similar issue. I am using the <Image> component to load an image which is referenced in a JSON file in a content collection (nearly exactly as shown in the docs).

I am using NodeJS and npm. I have tried installing sharp manually, yet I am still receiving 500 server errors when loading a page that contains the <Image>s. Building the site seems to work perfectly fine (once sharp was manually installed), it is just the dev server that experiences this problem.

Tried in Astro 4.0.3 as well as 3.5.4 - issue persists in both.

florian-lefebvre commented 10 months ago

Could this be something with the sharp version?

carsakiller commented 10 months ago

I tried v0.33.0, v0.32.6, v0.32.2 and v0.32.0 of sharp. Still receiving 500 errors.

I ran the dev server in --verbose mode, and it appears that it is failing to resolve the _image endpoint, which I assume is a secret Astro endpoint for processing the images. Note how the :resolve is resulting in null:

vite:resolve 0.39ms /_image?href=%2F%40fs%2FD%3A%2Fpath%2Fto%2Fimage.webp%3ForigWidth%3D460%26origHeight%3D460%26origFormat%3Dwebp&f=webp -> null +477ms
vite:load 3.76ms [fs] node_modules\astro\dist\assets\endpoint\node.js +477ms
...
vite:transform 3.82ms node_modules\astro\dist\assets\endpoint\node.js +481ms

Is the loading of node_modules\astro\dist\assets\endpoint\node.js supposed to follow the attempted resolution of the image? From what I can see in that file, it seems necessary in order to load images.

And then later in the log is the [500] /_image 19ms

astro info:

Astro                    v4.0.3
Node                     v20.9.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx

florian-lefebvre commented 10 months ago

@Princesseuh do you have an idea?

taep96 commented 10 months ago

https://github.com/withastro/astro/issues/9367#issuecomment-1846056427

LouisJS commented 9 months ago

Still an issue for me

taep96 commented 9 months ago

If you are using Bun make sure you have the latest version. There is no need to use trustedDependencies anymore.

LouisJS commented 9 months ago

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/

Princesseuh commented 9 months ago

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/

It seems like Vercel did not install Sharp correctly, as you can see if you visit the page directly: https://louis-lecocq.vercel.app/_image?href=%2F_astro%2Fprofile_picture.b1HGgiee.webp&w=125&h=125&q=100&f=webp

LouisJS commented 9 months ago

Yes. And it does happens also when i'm using Yarn locally instead of Npm https://docs.astro.build/fr/reference/errors/missing-sharp/ is not helping yarn add sharp or npm install sharp --save doesn't fix anything

LouisJS commented 9 months ago

Ok so i've found something. It is actually more related to Vercel than Astro and Sharp itself

https://docs.astro.build/fr/guides/integrations-guide/vercel/#imageservice

When enabled, an Image Service powered by the Vercel Image Optimization API will be automatically configured and used in production. In development, the image service specified by devImageService will be used instead.

Update your astro.config file to this

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  output: 'static',
  adapter: vercel({
    imageService: true,   <== will use Vercel Image optimization instead of sharp in production
  }),
});

lilnasy commented 9 months ago

I could not reproduce the issue.

@nothinghalosix Do you know if the it errors when installing with npm or pnpm?

lilnasy commented 9 months ago

If there was an issue here, a recent update might have fixed it. Feel free to reopen if that is not the case.

benjamin-guibert commented 9 months ago

Ok so i've found something. It is actually more related to Vercel than Astro and Sharp itself

https://docs.astro.build/fr/guides/integrations-guide/vercel/#imageservice

When enabled, an Image Service powered by the Vercel Image Optimization API will be automatically configured and used in production. In development, the image service specified by devImageService will be used instead.

Update your astro.config file to this
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  output: 'static',
  adapter: vercel({
    imageService: true,   <== will use Vercel Image optimization instead of sharp in production
  }),
});

Works for me, thanks! 👍🏻

nothinghalosix commented 9 months ago

Ok so i've found something. It is actually more related to Vercel than Astro and Sharp itself

https://docs.astro.build/fr/guides/integrations-guide/vercel/#imageservice

When enabled, an Image Service powered by the Vercel Image Optimization API will be automatically configured and used in production. In development, the image service specified by devImageService will be used instead.

Update your astro.config file to this
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  output: 'static',
  adapter: vercel({
    imageService: true,   <== will use Vercel Image optimization instead of sharp in production
  }),
});

still have the same issue. Added in my config and install vercel with yarn add @astrojs/verce

carsakiller commented 9 months ago

Upgraded Astro to 4.1.1 and Picture is working. Not sure what fixed it, but glad it is working 🎉

nothinghalosix commented 9 months ago

the update to astro 4.1.1 not fix my issue

Fix: import { defineConfig, passthroughImageService } from "astro/config"; export default defineConfig({ image: { service: passthroughImageService(), }, });

in astro.config.js

https://docs.astro.build/en/reference/errors/missing-sharp/

lilnasy commented 9 months ago

@nothinghalosix Can you share the result of npm why sharp?

Princesseuh commented 9 months ago

You're most likely running an old version of Node / your package manager that is incompatible with Sharp's latest version. You can install the old version of Sharp by doing npm install sharp@0.32.6, or update Node / your package manager and try to reinstall.

In the next version of Astro, we'll be pinning Sharp to 0.32.6 until Astro 5.0, where hopefully a majority of users will be running more up to date versions of things.

ignatz commented 5 months ago

For prosperity, I encountered the same symptomos using node, having sharp, ... when upgrading astro from 4.3.7 to the latest. I bisected it - it specifically broke from 4.4.6 -> 4.4.7 and the CHANGELOG shows a mostly image related issues. Ultimately I traced it down to having an 'DEV=""' in my .env file. W/o the variable, the image service resumed normal operations. That was unexpected :/

grohart commented 2 months ago

I had the same problem of errors 500 when using Image component in PROD environment with an Astro app running in a subdir, eg: https://test.org/myapp.

The problem was the subdir included in the href param:

https://test.org/myapp/_image?href=/myapp/_astro/hr.6GW7JLmf.jpg&f=webp

There is no error when removing the subdir string:

https://test.org/myapp/_image?href=/_astro/hr.6GW7JLmf.jpg&f=webp

So I had to rewrite the query string from middleware.ts:

const basePath = import.meta.env.BASE_URL.replace( /\/+$/, "" );
const currentPath = ( basePath ? context.url.pathname.slice( basePath.length ) : context.url.pathname ) || '/';
if ( currentPath == "/_image" ) {
  const queryString = decodeURIComponent( context.url.search );
  if ( basePath == "" || !queryString.includes( basePath ) ) {
    return next();
  }
  return context.redirect( basePath + currentPath + queryString.replace( basePath, '' ) );
}

I know this is dirty but I didn't found another solution yet

withastro / astro