Getting 404 using @astrojs/image

[Knaackee]

What version of astro are you using?

1.6.10

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

No

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

A new astro site with the @astrojs/image integration does not show the image.

Code:

  <Image
    src="https://via.placeholder.com/150x150"
    alt=""
    width={150}
    height={150}
  />

The Chrome Dev Tools showing a 404 with the url http://localhost:3000/_image?w=150&h=150&href=https%3A%2F%2Fvia.placeholder.com%2F150x150.

Any ideas?

Link to Minimal Reproducible Example

https://codesandbox.io/s/blissful-goldberg-lvvwxz?file=/src/pages/index.astro

Cannot believe this is not working.
I use Windows but the linked Sandbox uses Linux and it's not working either.

Participation

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

[panwauu]

Could you try adding .jpg to the path? (Could be related to #4644)

[Knaackee]

@panwauu

I've tried that. Doesn't work either :(

[bluwy]

It seems to be working fine for me on macos. In the codesandbox it's giving a 500 instead with this in the terminal:

log

TypeError: Cannot read property 'dispatchJob' of undefined
    at processBuffer (/node_modules/@astrojs/image/dist/vendor/squoosh/image-pool.js:45:32)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async SquooshService.transform (/node_modules/@astrojs/image/dist/loaders/squoosh.js:96:18)
    at async Module.get (/sandbox/node_modules/@astrojs/image/dist/endpoint.js:33:30)
    at async call (file:///sandbox/node_modules/astro/dist/core/endpoint/index.js:70:20)
    at async call (file:///sandbox/node_modules/astro/dist/core/endpoint/dev/index.js:15:10)
    at async handleRoute (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/route.js:113:20)
    at async run (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/request.js:45:14)
    at async runWithErrorHandling (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/controller.js:65:5)
    at async handleRequest (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/request.js:39:3)
TypeError: Cannot read property 'dispatchJob' of undefined
    at processBuffer (/node_modules/@astrojs/image/dist/vendor/squoosh/image-pool.js:45:32)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async SquooshService.transform (/node_modules/@astrojs/image/dist/loaders/squoosh.js:96:18)
    at async Module.get (/sandbox/node_modules/@astrojs/image/dist/endpoint.js:33:30)
    at async call (file:///sandbox/node_modules/astro/dist/core/endpoint/index.js:70:20)
    at async call (file:///sandbox/node_modules/astro/dist/core/endpoint/dev/index.js:15:10)
    at async handleRoute (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/route.js:113:20)
    at async run (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/request.js:45:14)
    at async runWithErrorHandling (file:///sandbox/node_modules/astro/dist/vite-plugin-astro-server/controller.js:65:5

Maybe you can try bumping the node version? Seems like there's an issue with polyfilling some API.

[Knaackee]

I will try that asap and report back.

[isaac-mcfadyen]

Also experiencing this issue on Node v18.12.1, Astro 1.4.4 and @astrojs/image 0.12.0

[JerryWu1234]

Also experiencing this issue on Node v18.12.1, Astro 1.4.4 and @astrojs/image 0.12.0

use node 16 again

[savicaleksa]

I've had this error fixed by installing sharp and configuring @astrojs/image to work with it.
See this docs section for more info on using sharp for your images.

[luukdv]

The error seems to originate from the squoosh integration, which is why switching to sharp will circumvent it.

Based on some tests using this table as a reference, the issue only exists when using Node < 15.4, where this line will throw.

Also experiencing this issue on Node v18.12.1

Are you sure that's not this Node 18 related issue?