#'filename' typerror with Astro Image

83 messages · Page 1 of 1 (latest)

merry cargo
ionic pike
#

Silently pinging @steel ermine for tomorrow morning as our most recent image expert.

#

And also paging @tawdry thistle in his role as image guide, emeritus.

keen nest
pale estuary
#

Do you know what three pages it's trying to render Images for when it errors? Is one of them lacking a heroImage?

merry cargo
#

@pale estuary No, all 3 have a heroImage

tawdry thistle
#

I haven't tracked down exactly what's going on yet but it looks like a bundling issue for Netlify Functions. I could build the repo locally as a static site and it even builds and runs with the Node adapter, the build actually still fails if the <Image> component isn't used at all

#

The error is thrown where image-size is being imported as mentioned above, I'll try to track down whether it's actually an issue with that import or if that just happens to be the first time createRequire(import.meta.url) is called in the app

tawdry thistle
# 
const require2 = createRequire(import.meta.url);
require2("image-size");

This is where the error ultimately comes from in the Astro bundle, import.meta.url is undefined

@urban torrent does anything jump out to you here, either why it'd be undefined or if it should be bundled up differently?

I found a few threads on Netlify's support forum but most were mentioning outdated node versions and the general pain of ESM vs CJS

urban torrent
#

I'm not aware... i can spin up an example app though

tawdry thistle
#

I've had to reach for netlify.toml to fix bundling issues before, I can't test locally without linking to the live Netlify deployment but maybe one of these might fix it?

[functions]
  node_bundler = "esbuild"

and one I've used with sharp + @astrojs/image/sharp

[functions]
  external_node_modules = ["sharp"]
  included_files = ["node_modules/sharp/**/*"]
urban torrent
#

if that works maybe its something we can automate in the netlify adapter

#

i'll try it out first

steel ermine
#

I am this close: 🤏
To making a new image-size that's ESM, bundle friendly, TypeScript first, support AVIF Etc

#

I had numerous issues with it in dev, and I'm not surprised that some of them slipped through

urban torrent
#

im working on a reproduction but am currently having trouble getting a hello world even deployed

#

ok got it 😅

ionic pike
steel ermine
#

Hmm, it could actually be

urban torrent
#

No, I tracked down her error, it's because import.meta.url doesn't exist on netlify. There's a workaround we already have but aren't using it for image-size

#

so I'm going to try applying that same fix

steel ermine
#

But, that's unrelated to Una's problem isn't?

#

The problem she's having is not on 2.1

tawdry thistle
steel ermine
#

The specific reason I used a require in the core version was because of a weird issue I was running into, might be worth it to try again with an import statement

urban torrent
#

even though she's not using it, the act of it being required is still in the bundle, causing the error

steel ermine
#

Oh, alright

urban torrent
#

im also getting a weird error when using import, trying to figure it out

merry cargo
#

👀 holds onto my hat

keen nest
#

Looking forward to v2.1.3 release 👀

merry cargo
#

Is there any update on when that will be? ^

urban torrent
#

This will most likely be released today.

merry cargo
#

@urban torrent this almost fixes it -- the images don't show up on the homepage where I'm using Astro image and when you click Blog and then go back to Home, you get an error https://unas-new-site.netlify.app/ Error - [@astrojs/image] src is required

Una Kravets Online

The personal website of Una Kravets. Designer, developer, front-end and UI.

ionic pike
#

My word this is pretty!

#

Looking through source a bit, the homepage images that should be optimised are just the “On the blog” ones, right? The unoptimised ones are used on /blog itself and the other homepage images are manually optimised/from an external domain?

I’m also seeing the error returning to Home from /blog specifically, but not from other pages, which seems super weird!

urban torrent
#

ok, this error looks somewhat familiar

#

ok, im able to recreate in a reproduction

merry cargo
#

@ionic pike yes -- the only ones using the optimized images are on the homepage in the blogs section (for now)

urban torrent
#

I figured out the cause, it's that the image integration is not configured properly to load Squoosh in Netlify, which has its own weird setup. So I'm trying to figure out the best way to fix it without breaking other hosts.

merry cargo
#

Source code is public if that helps

urban torrent
#

Thanks, I have a reproduction that does the same thing, so I'm confident I know the problem. It's taking a little while because hosts do wildly different things, so loading wasm is unfortunately difficult. I have a plan though, but it'll likely be until tomorrow. Hoping to have a preview release you can try out then.

urban torrent
#

@merry cargo if you have the time, could you try out this preview version? If this works for you I'll see about getting the PR finished up.

# 
 "@astrojs/image": "0.0.0-netlify-image-20230315143536",
merry cargo
#

^ issue still there

#

(see deploy preview link)

urban torrent
#

😢

#

thanks

#

oh, this looks like maybe a different problem?

#

Im seeing some of the On the Blog images coming in.

ionic pike
#

Still crashes when navigating to /blog and then back to / again though

merry cargo
#

only the 3 images under "blogs" on the homepage use astro image

#

all of the ones on the blog page do not

#

and yes the navigating to home crashes it

urban torrent
#

Are you all seeing the same crash as me?

Error - [@astrojs/image] `src` is required
urban torrent
#

I think the reverse() is wanting to sort them, but the posts are not sorted (i believe)

#

so randomly you might select one of the posts without a heroImage

#

I would probably recommending adding a filter like posts = posts.filter(post => post.data.heroImage) so you only have the ones with images

merry cargo
#

I added a fallback image like I do on the blog page but not sure if astro img works nice with it

merry cargo
#

unfortunately I think I need to rip out astro image to make this work (it didnt work with the filtering, there were still some issues)

urban torrent
#

sorry to hear that

merry cargo
#

I'm sorry 😦

urban torrent
#

Nothing for you to apologize for! The image integration is experimental and still needs a bit of work. Seeing the things you had a problem with is going to help us improve it. I'm just sorry that it didn't work out for you.

#

I'm not sure if you saw, but we are bring image optimizations into core: https://astro.build/blog/astro-210/#built-in-image-support. This is still experimental too, we are trying to reduce scope to get a good experience first. SSR has been an issue for the image integration since we launched it, so we know that's something we need to prioritize.

Astro
Astro 2.1 | Astro

Introducing built-in image support • Markdoc integration • Watch mode for astro check • New TypeScript helpers and more!

#

Given your experience i think we'll probably want to do some benchmarking on performance as well.

steel ermine
#

On hosts that supports it, using sharp instead of squoosh solve all the performance problems 😅

urban torrent
#

Do we know which ones those are?

steel ermine
#

I think that's all of the supported hosts?

#

The only platform I know you need Squoosh for is Stackblitz

urban torrent
#

Is it a "just works" scenario or do you have to turn a bunch of knobs until it finally works?

#

If it works then I'm really face palming on why i've spent so much effort getting squoosh working in vercel and netlify

steel ermine
#

Hmm, no, you just change your config and install sharp

merry cargo
#

oh nice 🙂 cheers

merry cargo
#

@urban torrent sqoosh cli is also no longer being maintained fyi

steel ermine
#

Yeah, when Sharp will have WASM binaries available, we'll probably drop Squoosh

#

Squoosh's WASM support is the only reason we're keeping it around