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

mundry · 2022-10-11T09:08:49Z

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:///tmp/astro-image-issue-url/node_modules/astro/dist/core/util.js:52:73)
    at fixViteErrorMessage (file:///tmp/astro-image-issue-url/node_modules/astro/dist/core/errors.js:19:15)
    at AstroBuilder.run (file:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:130:13)
    at async build (file:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:///tmp/astro-image-issue-url/node_modules/astro/dist/cli/index.js:190:14)
    at async cli (file:///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:///tmp/astro-image-issue-url/node_modules/astro/dist/core/util.js:52:73)
    at fixViteErrorMessage (file:///tmp/astro-image-issue-url/node_modules/astro/dist/core/errors.js:19:15)
    at AstroBuilder.run (file:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:130:13)
    at async build (file:///tmp/astro-image-issue-url/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:///tmp/astro-image-issue-url/node_modules/astro/dist/cli/index.js:190:14)
    at async cli (file:///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.

The text was updated successfully, but these errors were encountered:

MoustaphaDev · 2022-10-12T00:53:47Z

It builds fine in stackblitz though

mundry · 2022-10-12T16:39:43Z

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 · 2022-10-16T13:34:44Z

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 · 2022-10-21T08:27:28Z

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

matthewp · 2022-11-07T16:48:18Z

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 · 2022-12-29T16:17:46Z

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 · 2022-12-29T17:05:51Z

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 · 2022-12-29T21:02:33Z

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 · 2024-04-07T11:26:05Z

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.

gustawdaniel · 2024-11-07T18:09:53Z

i have

Failed to parse URL from /_astro/411d6d7d-6a1e-4096-9a88-fc16a9978f2e.CbYZN9Mo.avif
  Stack trace:
    at node:internal/deps/undici/undici:13178:13
    at async getImage$1 (file:///home/daniel/pro/blog/dist/chunks/PostsList_BGGX2qwc.mjs:891:20)
    at async file:///home/daniel/pro/blog/dist/chunks/PostsList_BGGX2qwc.mjs:1431:25
    at async file:///home/daniel/pro/blog/dist/chunks/PostsList_BGGX2qwc.mjs:1429:27
  Caused by:
  Invalid URL
    at new URL (node:internal/url:816:29)
    at fetch (node:internal/deps/undici/undici:9998:25)
    at fetch (node:internal/bootstrap/web/exposed-window-or-worker:72:12)
    at getImage$1 (file:///home/daniel/pro/blog/dist/chunks/PostsList_BGGX2qwc.mjs:891:26)
    at async file:///home/daniel/pro/blog/dist/chunks/PostsList_BGGX2qwc.mjs:1431:25
 ELIFECYCLE  Command failed with exit code 1.

for

 import myImage from "../../assets/images/411d6d7d-6a1e-4096-9a88-fc16a9978f2e.avif"
---

<div class="relative mt-8 flex items-center gap-x-4">
    <!--<Picture src="https://preciselab.fra1.digitaloceanspaces.com/blog/img/411d6d7d-6a1e-4096-9a88-fc16a9978f2e.avif"-->
    <Picture src={myImage.src}
             widths={[256]}
             formats={['avif']}
             alt={data.author} inferSize={true}
             class="h-10 w-10 rounded-full bg-gray-100 object-cover"
    ></Picture>

Of course

new URL('/_astro/411d6d7d-6a1e-4096-9a88-fc16a9978f2e.CbYZN9Mo.avif')

throws error

Uncaught TypeError: URL constructor: /_astro/411d6d7d-6a1e-4096-9a88-fc16a9978f2e.CbYZN9Mo.avif is not a valid URL.

but how can I fix it in astro?

In config I have

export default defineConfig({
  site: 'https://gustawdaniel.com',

matthewp added pkg: image Related to the `@astrojs/image` package (scope) - P4: important Violate documented behavior or significantly impacts performance (priority) labels Oct 13, 2022

matthewp self-assigned this Nov 4, 2022

matthewp closed this as completed Nov 7, 2022

rodrigolj mentioned this issue Nov 14, 2022

Swoosh not compatible with NodeJS 18 and being deprecated craftzdog/craftzdog-uses#6

Closed

CodyJasonBennett mentioned this issue Dec 19, 2022

Error: spawn toktx EACCESS donmccurdy/glTF-Transform#750

Closed

leomp12 added a commit to ecomplus/cloud-commerce that referenced this issue Dec 20, 2022

chore: Must keep using Node 16 for storefront while withastro/astro#5051

8d52677

septatrix mentioned this issue Dec 29, 2022

"fetch failed" for <Image> component when transforming local images #5699

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mundry commented Oct 11, 2022

MoustaphaDev commented Oct 12, 2022

mundry commented Oct 12, 2022

snorremd commented Oct 16, 2022 •

edited

Loading

bluwy commented Oct 21, 2022

matthewp commented Nov 7, 2022

septatrix commented Dec 29, 2022

mundry commented Dec 29, 2022

septatrix commented Dec 29, 2022

offwork commented Apr 7, 2024 •

edited

Loading

gustawdaniel commented Nov 7, 2024

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

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

Comments

mundry commented Oct 11, 2022

What version of astro are you using?

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

What package manager are you using?

What operating system are you using?

Describe the Bug

How to reproduce

Link to Minimal Reproducible Example

Participation

MoustaphaDev commented Oct 12, 2022

mundry commented Oct 12, 2022

snorremd commented Oct 16, 2022 • edited Loading

bluwy commented Oct 21, 2022

matthewp commented Nov 7, 2022

septatrix commented Dec 29, 2022

mundry commented Dec 29, 2022

septatrix commented Dec 29, 2022

offwork commented Apr 7, 2024 • edited Loading

gustawdaniel commented Nov 7, 2024

What version of `astro` are you using?

snorremd commented Oct 16, 2022 •

edited

Loading

offwork commented Apr 7, 2024 •

edited

Loading