Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Node error when attempting to import @astrojs/image #4257

Closed
1 task
wonder95 opened this issue Aug 10, 2022 · 9 comments · Fixed by #4279
Closed
1 task

Node error when attempting to import @astrojs/image #4257

wonder95 opened this issue Aug 10, 2022 · 9 comments · Fixed by #4279
Assignees

Comments

@wonder95
Copy link

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
Copy link
Member

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
Copy link
Member

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

@FredKSchott FredKSchott added the - P2: nice to have Not breaking anything but nice to have (priority) label Aug 11, 2022
@sandervspl
Copy link

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
Copy link
Author

@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
Copy link
Member

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 natemoo-re added needs response Issue needs response from OP needs repro Issue needs a reproduction labels Aug 11, 2022
@natemoo-re natemoo-re assigned natemoo-re and unassigned tony-sull Aug 11, 2022
@natemoo-re natemoo-re removed needs response Issue needs response from OP - P2: nice to have Not breaking anything but nice to have (priority) needs repro Issue needs a reproduction labels Aug 11, 2022
@natemoo-re
Copy link
Member

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
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

wonder95 commented Aug 12, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants