Writing this after half a day’s worth tearing my hair out. Upgraded my other blog to Astro 5, which took some time rewriting the content collection to content layer. Added some other QOL stuff like filtering by tags and deployed.
$$Picture Error
But I kept getting this error that nobody else seemed to have (on Windows 11 WSL):
generating static routes
Cannot access '$$Picture' before initialization
Location:
D:Projectsastro-blog\node_modules.pnpmastro@5.0.5_@types+node@22.10.2_jiti@1.21.6_rollup@4.28.1_typescript@5.5.3_yaml@2.6.1\node_modulesastrodistcoreuildpipeline.js:220:15
Stack trace:
at file:///D:/Projects/astro-blog/dist/chunks/Picture_D8pkweOH.mjs:1425:12
at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)
at async generatePages (file:///D:/Projects/astro-blog/node_modules/.pnpm/astro@5.0.5_@types+node@22.10.2_jiti@1.21.6_rollup@4.28.1_typescript@5.5.3_yaml@2.6.1/node_modules/astro/dist/core/build/generate.js:81:21)
at async AstroBuilder.build (file:///D:/Projects/astro-blog/node_modules/.pnpm/astro@5.0.5_@types+node@22.10.2_jiti@1.21.6_rollup@4.28.1_typescript@5.5.3_yaml@2.6.1/node_modules/astro/dist/core/build/index.js:152:5)
at async build (file:///D:/Projects/astro-blog/node_modules/.pnpm/astro@5.0.5_@types+node@22.10.2_jiti@1.21.6_rollup@4.28.1_typescript@5.5.3_yaml@2.6.1/node_modules/astro/dist/core/build/index.js:45:3)This was purely a build thing. Everything worked on the dev server!
It was really frustrating. I wasn’t sure if it was the (lack thereof) adapter, config, bug, mdx integration. I didn’t think much of the Picture component because all I did was use markdown picture tags and the Image component. I went through trial and error, removing elements, pages, components, packages to no avail.
For some reason I was able to get the build to succeed if I removed files that used getCollection(). This was worse, because I was on a wild goose chase for the wrong cause.
I even contemplated shifting everything to Sveltekit! I must’ve cursed at Astro and my decision to use it multiple times. (Good ‘ol Sveltekit or Go/Templ never gave me much issues…)
Eventually Discord saved the day - v9x’s post was right on the money.
Problem with Legacy Import Path
Turns out I was using an old import path for the Picture component. This wasn’t in the upgrade notes for v5.
This import caused a problem, even though it worked in Astro 4 and before:
import Picture from 'astro/components/Picture.astro';
import { Picture } from 'astro:assets';
<Layout />;Afterword
Not sure if I was just dumb, but I couldn’t find anything on Google or GitHub that referenced the issue or mention the Picture component changed import path. I don’t even remember where I got this import path from, if it wasn’t from the Docs.
The fast release cycles of Astro really did me in and this didn’t cause issues in previous upgrades. And it’s incredibly weird for this to work in dev server and still build successfully if I stopped using getCollections() and the error went away if I removed other pages (not the one with incorrect import)!
So I wrote this, hopefully this will save someone several hours. Though I guess most people are too new to Astro to have this legacy import path.