Node error when attempting to import @astrojs/image

[wonder95]

What version of astro are you using?

1.0.0-beta.47

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When attempting to use @astrojs/image version 0.3.0, I get the following error when I attempt to import it into my .astro component:

Transform failed with 1 error:
  /Users/steve/Sites/mysite/node_modules/@astrojs/image/components/Image.astro:47:0: ERROR: Unexpected "export"

Here is a page where I am attempting to use it.

---
import * as prismicH from '@prismicio/helpers';
import { Debug } from 'astro/components';
import { Image } from '@astrojs/image/components';

const {title, description, image} = Astro.props;

const renderedName = prismicH.asHTML(title);
const renderedDescription = prismicH.asHTML(description);

---
<!-- <Debug {name} /> -->
<section class="mt">
    <h1 set:html={renderedName}></h1>
    <div set:html={renderedDescription}></div>
    <img src={image.url} width={image.dimensions.width} height={image.dimensions.height}>
</section>

When I open it in Code Sandbox (see linked example), I get a different error:

 error   Invalid URL: file://virtual:image-loader
    at new NodeError (internal/errors.js:322:7)
    at onParseError (internal/url.js:270:9)
    at new URL (internal/url.js:346:5)
    at crawlGraph (file:///sandbox/node_modules/astro/dist/core/render/dev/vite.js:18:32)
    at crawlGraph.next (<anonymous>)
    at crawlGraph (file:///sandbox/node_modules/astro/dist/core/render/dev/vite.js:38:12)
    at crawlGraph.next (<anonymous>)
    at crawlGraph (file:///sandbox/node_modules/astro/dist/core/render/dev/vite.js:38:12)
    at crawlGraph.next (<anonymous>)
    at crawlGraph (file:///sandbox/node_modules/astro/dist/core/render/dev/vite.js:38:12)

However, the same as with my local, when I remove the import line for @astrojs/image, the error goes away, and the page works.

Link to Minimal Reproducible Example

https://codesandbox.io/s/snowy-flower-gfhorc?file=/src/pages/index.astro

Participation

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

[FredKSchott]

I'm sorry, code sandbox isn't working for me and neither is Stackblitz given that this is using sharp (a Node-only package).

Tony is back next week and was close to getting us moved over to a WASM optimizer which should be much better for these platforms.

[FredKSchott]

marking as p2 because I haven't heard this reported anywhere else, but will still want to get this looked at next week.

[sandervspl]

I'm also getting an error about virtual:image-loader after starting a new blog template with the astro CLI.

[vite]: Rollup failed to resolve import "virtual:image-loader" from "node_modules/@astrojs/image/dist/lib/get-image.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external

[wonder95]

@FredKSchott All I did to get this error was a) install Astro, b) install @astrojs/image, and 3) import image into a .astro component. Are you not able to generate this error doing the same thing?

[natemoo-re]

Hey @sandervspl and @wonder95, I just ran through your reproduction steps and haven't been able to break things (yet). Mind sharing a bit more info?

• What version of Node are you using? Our minimum is 14.20.×
• What version of NPM are you using?
• Can you still reproduce this on @astrojs/image@0.3.3 and astro@1.0.2?

[natemoo-re]

Actually, I was able to debug this and get it working on CodeSandbox! Looks like you forgot to add the integration to your astro.config.mjs file (at least according to the reproduction linked)!

Can you confirm if adding this to your config fixes the problem?

import { defineConfig } from 'astro/config'
+ import image from '@astrojs/image'

export default defineConfig({
+ integrations: [image()]
})

[wonder95]

@natemoo-re On my local, this is my current astro.config.mjs

import { defineConfig } from 'astro/config';
import vue from "@astrojs/vue";
import tailwind from "@astrojs/tailwind";

import image from "@astrojs/image";

// https://astro.build/config
export default defineConfig({
  integrations: [vue(), tailwind(), image()]
});

[FredKSchott]

We just pushed out new versions of astro and @astrojs/image which fix the known issue reported here.

can you update codesandbox to match what you're seeing locally? I downloaded your codesandbox and it ran locally on the new versions, fyi

[wonder95]

@FredKSchott I updated my local to astro 1.0.3 and @astrojs/image 0.3.4 and it works now.

Thanks much! That was fast work.