Astro Image component unhandled rejection error with JPG's

[westernwontons]

What version of astro are you using?

1.4.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

I import an image like so:

import Tile1 from '@/images/tiles/_1.jpg';

then I use it like so:

<Image src={Tile1} alt='' height={420} width={420} />

and I get this error:

(node:25670) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Failed to parse URL from /Users/nagybotond/dev/astro/edi/node_modules/.pnpm/@[email protected][email protected]/node_modules/@astrojs/image/dist/vendor/squoosh/mozjpeg/mozjpeg_node_dec.wasm".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

PNGs are fine, but JPEGs, WEBP images all show this behaviour. Haven't tested with AVIF yet.

Link to Minimal Reproducible Example

https://github.com/westernwontons/edi

Participation

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

[idoob]

I am able to reproduce this as well. @westernwontons, what version of node are you using? Is this possibly an underlying issue with squoosh? I originally ran into the issue using node 18.2.0. I then tried node 18.1.0 after reading this comment but got the same error. Node 18.0.0 finally worked for me.

[westernwontons]

I'm using v18.10.0 at the moment. I haven't checked with different versions before. I did now and you are right, the error goes away when I use v18.0.0

[surjithctly]

Same issue with 18.12.0, Even 18.4 doesn't solve. Only v16 works now.

Sidenote: Avif files still doesn't work on v16 or v18. Also the documentation suggest we can use image from public by adding / but it throws image not found error.

Avif Error:
I have used the official avif: https://astro-moon-landing.netlify.app/assets/images/astronaut/yLnzHhqALK-800.avif

// both not working - from public or inside src. 
import heroImage from "/hero.avif";
import heroImage from "assets/hero.avif";

<Image src={heroImage} alt="Astronaut" />

unsupported file type: undefined (file: undefined)
/Users/.../Astro/.../node_modules/.pnpm/[email protected]/node_modules/image-size/dist/index.js:42:11
41 |     // throw up, if we don't understand the file
> 42 |     throw new TypeError('unsupported file type: ' + type + ' (file: ' + filepath + ')');
     |           ^
  43 | }
  44 | /**
  45 |  * Reads a file into a buffer.
TypeError: unsupported file type: undefined (file: undefined)
    at lookup (/Users/.../Astro/.../node_modules/.pnpm/[email protected]/node_modules/image-size/dist/index.js:42:11)
    at imageSize (/Users/.../Astro/.../node_modules/.pnpm/[email protected]/node_modules/image-size/dist/index.js:98:16)
    at metadata (file:///Users/.../Astro/.../node_modules/.pnpm/@[email protected]/node_modules/@astrojs/image/dist/utils/metadata.js:6:54)
    at async Context.load (file:///Users/.../Astro/.../node_modules/.pnpm/@[email protected]/node_modules/@astrojs/image/dist/vite-plugin-astro-image.js:28:20)
    at async Object.load (file:///Users/Surjith/.../Astro/.../node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:41394:32)
    at async loadAndTransform (file:///Users/.../Astro/.../node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-c842e491.js:37746:24

My folder name contains [space] but not sure if that's the root cause for this.

[surjithctly]

Is there any update on this issue. node 18.0 became mainstream already, so many people have issues setting up old version just for this. nvm is an option but many people won't use it. I've personally got many issues regarding this.

So, can anyone categorize this bug as p4-important instead of minor? coz this is a blocking bug. (@matthewp)

[surjithctly]

@Princesseuh thanks so much! does this also fix the avif issue?

[Princesseuh]

@Princesseuh thanks so much! does this also fix the avif issue?

I admittedly haven't tried, but I don't believe so. Planning to investigate that one separately!

Sorry for the inconvenience in the meantime