🐛 BUG: Astro/image getImage doesn't work in .ts file

[nicolasverlhiac]

What version of astro are you using?

v1.0.0-rc.4

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

None

What package manager are you using?

yarn

What operating system are you using?

Mac (M1)

Describe the Bug

Hi @tony-sull 👋 (issue following our discussion yesterday)

@astrojs/image: 0.3.0

When is use getImage in a .ts context, and when I run yarn build or yarn dev I get this error message :

You can mark the path "virtual:image-loader" as external to exclude it from the bundle, which will remove this error. You can also add ".catch()" here to handle this failure at run-time instead of bundle-time.

Test it :

import { getImage } from '@astrojs/image';

export async function get() {
  const img = await getImage({
      "src": `https://api.weavescan.dev/storage/uploads/2022/08/02/android-chrome-512x512_uid_62e9856669173.png`,
      "width": 50,
      "height": 50,
      "format": "webp"
    });
    return {
      body: JSON.stringify(
        {"src":img.src} 
      )
  };
 }

Link to Minimal Reproducible Example

N/A

Participation

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

[nicolasverlhiac]

Build message :

{
errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 42,
        file: 'node_modules/@astrojs/image/dist/lib/get-image.js',
        length: 22,
        line: 72,
        lineText: '    const { default: mod } = await import("virtual:image-loader");',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "virtual:image-loader" as external to exclude it from the bundle, which will remove this error. You can also add ".catch()" here to handle this failure at run-time instead of bundle-time.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "virtual:image-loader"'
    }
  ]
}

[oliverpool]

I have the same error message in a .js flle (and a local image). The astro dev runs fine, however the astro build fails.

[nicolasverlhiac]

Hi,

For information, I redid tests with the following versions :
@astrojs/image: 0.3.3
astro: 1.0.2

And the issue persists.

[natemoo-re]

Hey @oliverpool and @nicolasverlhiac, just ran into a similar issue. Can you confirm that the image() integration is actually added to your astro.config.mjs file?

#4257 (comment)

[nicolasverlhiac]

Hey @natemoo-re, I confirm that I already have these settings in my astro.config.mjs

[oliverpool]

I think I found my issue: I was using getImage at the top of my file, and not inside the export const get = ... function!