astro/image: Failed to parse URL error with Picture component

[mundry]

What version of astro are you using?

1.4.7

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

None

What package manager are you using?

pnpm, npm

What operating system are you using?

Linux

Describe the Bug

Trying to build projects with astro/image since version 0.8 fails with the error below. Up to version 0.7.1 the same projects build fine.
The error occurs with jpegs and pngs identically. Switching package managers also has no effect to the better.
Putting the image in the src/ directory directly, without any subfolders doesn't solve the issue either.
The error only occurs with the <Picture /> component. The build runs fine with the <Image /> component.

$ npm run build

> @example/[email protected] build
> astro build

10:48:24 [build] output target: static
10:48:24 [build] Collecting build info...
10:48:24 [build] Completed in 22ms.
10:48:24 [build] Building static entrypoints...
10:48:24 [build] Completed in 722ms.

 generating static routes
▶ src/pages/index.astro

[@astrojs/image] "alt" text was not provided for an <Image> or <Picture> component.

A future release of @astrojs/image may throw a build error when "alt" text is missing.

The "alt" attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel).

  └─ /index.html (+26ms)
 optimizing 1 image in batches of 16
(node:20460) 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)
 error   "Failed to parse URL from /tmp/astro-image-issue-url/node_modules/@astrojs/image/dist/vendor/squoosh/avif/avif_node_enc.wasm"
Error: "Failed to parse URL from /tmp/astro-image-issue-url/node_modules/@astrojs/image/dist/vendor/squoosh/avif/avif_node_enc.wasm"
    at createSafeError (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/util.js:52:73)
    at fixViteErrorMessage (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/errors.js:19:15)
    at AstroBuilder.run (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:130:13)
    at async build (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/cli/index.js:190:14)
    at async cli (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/cli/index.js:207:5)

How to reproduce

/tmp$ npm create astro@latest

Welcome to Astro! (create-astro v1.1.0)
Lets walk through setting up your new Astro project.

✔ Where would you like to create your new project? … astro-image-issue-url
✔ Which template would you like to use? › Just the basics (recommended)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … no
ℹ Sounds good! You can come back and run git init later.
✔ How would you like to setup TypeScript? › Strict (recommended)
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!

 Next steps

You can now cd into the astro-image-issue-url project directory.
Run npm run dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add

Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.

/tmp$ cd astro-image-issue-url/
/tmp/astro-image-issue-url$ rm -r src/components src/layouts
/tmp/astro-image-issue-url$ mkdir -p src/assets/img
/tmp/astro-image-issue-url$ npx astro add image
⠋ Resolving packages...(node:17825) 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)
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────────╮
 │ npm install @astrojs/image sharp@>=0.31.0  │
 ╰────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ // https://astro.build/config                 │
 │ import image from "@astrojs/image";           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [image()]                     │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

   success  Added the following integration to your project:
  - @astrojs/image

/tmp/astro-image-issue-url$ npm run build

> @example/[email protected] build
> astro build

10:46:03 [build] output target: static
10:46:03 [build] Collecting build info...
10:46:03 [build] Completed in 20ms.
10:46:03 [build] Building static entrypoints...
10:46:04 [build] Completed in 631ms.

 generating static routes
▶ src/pages/index.astro

[@astrojs/image] "alt" text was not provided for an <Image> or <Picture> component.

A future release of @astrojs/image may throw a build error when "alt" text is missing.

The "alt" attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel).

  └─ /index.html (+43ms)
 optimizing 1 image in batches of 16
(node:18451) 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)
 error   "Failed to parse URL from /tmp/astro-image-issue-url/node_modules/@astrojs/image/dist/vendor/squoosh/avif/avif_node_enc.wasm"
Error: "Failed to parse URL from /tmp/astro-image-issue-url/node_modules/@astrojs/image/dist/vendor/squoosh/avif/avif_node_enc.wasm"
    at createSafeError (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/util.js:52:73)
    at fixViteErrorMessage (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/errors.js:19:15)
    at AstroBuilder.run (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:130:13)
    at async build (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/cli/index.js:190:14)
    at async cli (file:https:///tmp/astro-image-issue-url/node_modules/astro/dist/cli/index.js:207:5)

Link to Minimal Reproducible Example

https://github.com/mundry/astro-image-issue-url

Participation

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

[MoustaphaDev]

It builds fine in stackblitz though

[mundry]

It builds fine in stackblitz though

Indeed.

Stackblitz uses Node v16. I'm using Node v18.10.0 running into this error.

Switching to Node v16 on my machine resolves the error. Weirdly, switching back to Node v18 and running the build again doesn't produce the error, not even after deleting the dist directory. It's only once the node_modules directory is removed and the dependencies are reinstalled, does the error occur again using Node v18.

[snorremd]

Switching to Node v16 on my machine resolves the error. Weirdly, switching back to Node v18 and running the build again doesn't produce the error, not even after deleting the dist directory. It's only once the node_modules directory is removed and the dependencies are reinstalled, does the error occur again using Node v18.

I've reproduced the issue in my Astro project on Node v18.X on Linux x64. Downgrading to Node 16.X does indeed fix the problem. Note that Astro Image seem to write asset cache inside the node_modules folder. So this would explain things working until you delete the node_modules folder.

[bluwy]

I think this is a bug upstream based on the stacktrace: GoogleChromeLabs/squoosh#1260

[matthewp]

Yes, squoosh doesn't currently support Node 18: GoogleChromeLabs/squoosh#1242

The underlying issue is that it uses fetch to create its wasm binaries and Node 18 fetch doesn't support file URLs. So that is the difference. They will probably need to add an alternate way to support Node 18.

Closing as this is an upstream bug we can't work around.

[septatrix]

I get TypeError: fetch failed [...] cause: Error: connect ECONNREFUSED 127.0.0.1:3000 which can be worked around by passing --host 127.0.0.1 to astros CLI. I am not sure if this is the same error or whether I should create a new issue.

[mundry]

I get TypeError: fetch failed [...] cause: Error: connect ECONNREFUSED 127.0.0.1:3000 which can be worked around by passing --host 127.0.0.1 to astros CLI. I am not sure if this is the same error or whether I should create a new issue.

Definitely create a new issue as this one has been closed.
Regardless of that, I'm highly sceptical that those two issues are related.

Wild shot in the dark guess, since I've seen similar issues with vite-based projects (not on Astro tho): You might be binding to the IPv6 address of localhost.

[septatrix]

Wild shot in the dark guess, since I've seen similar issues with vite-based projects (not on Astro tho): You might be binding to the IPv6 address of localhost.

Thanks for the tip, that does indeed seems to be the culprit. I am not sure what the correct resolution in this case would be but I created a new issue for further discussion: #5699.

[offwork]

What means parseURL??

It's hard to understand Astro's expectations! It seems ridiculous to me that images can't find their path in Dev or Prod mode. I ran it after build time thinking it might be related to formatting, but the situation is the same.