Astro 1.0.2: In production, images are not being transformed

[djmtype]

Since Astro 1.0.2, the links to images transformed by astro-imagetools are broken in production only, 404. I tried referencing images from .md frontmatter as well as images within .mdx file using the <Picture /> component. While I'm getting the blurred up versions of the images, the link to the final images are all broken and no images have been transformed regardless of what the CLI tells me.

• The path to my images resides in /public/images since Astro 0.2.x
• Not using Astro SSR
• Using Astro 1.0.3, "astro-imagetools": "^0.6.10" with npm

[ChauhanT]

+1. I can confirm. I updated to the stable astro release (1.0.x) and the builds broke completely.

[PeteJStewart]

Yep, I'm finding the same that images don't work when running build/preview, but do work when running develop.

I've rolled back to "astro": "1.0.0-rc.7" and everything is working as expected again.

I had tested with all the latest astro versions, up to 1.0.5

[skourismanolis]

I have the same issue after updating to astro stable. It seems like the images are being transformed and written to cache, but are not written to the dist directory at the final step of the build. Rolling back to 1.0.0-rc.7 seems to fix it for now, as mentioned by @PeteJStewart.

[AndreaPontrandolfo]

+1. This bug is critical. It makes astro-imagetools completely unsustainable to use in the long run, because we cannot update the Astro version until this gets fixed.

[npmrun]

node_modules\astro-imagetools\integration\index.js add this code

export default {
  name: "astro-imagetools",
  hooks: {
    "astro:config:setup": ......,
     // add this code
    async "astro:build:done"(){
        const { default: closeBundle } = await import("../plugin/hooks/closeBundle.js");
        await closeBundle()
    }
  },
};

It worked for me ,I think this is not a good way to solve it, but that's all I can do for now

[KyleFontenot]

I have a similar situation, where a previous project pre 1.0 astro worked just fined. I keep getting fileTypeFromBuffer is not a function errors only on my server builds (Netlify) as opposed to just formatted image 404s (which I've seen when testing the omission of remote images)

• Local builds and dev work fine.
• Only throws error with remote images from my CMS. Have verified the links passed in the prop are correct.
• I've tried [email protected] through [email protected] with no success.
• Have allowed Access-Control-Allow-Origin = "*" in netlify.toml just in case.

Anyone have any suggestions? Might have to make a reproduction

[enricogallesio]

I confirm the issue is still present with Astro v1.0.8. I hope this to be fixed asap. It is indeed a critical issue.

I could temporarily solve the problem with the fix submitted by @npmrun, https://github.com/RafidMuhymin/astro-imagetools/issues/111#issuecomment-1223765068 Thank you very much!

[germanz]

Raised a PR to fix this for SSG. SSR with the node adapter still has issues though, despite calling closeBuild, the asset store is empty.

[RobbieTheWagner]

@RafidMuhymin any chance we could merge #115 and release a new version? We really need support for Astro v1 here.

[KyleFontenot]

Until @RafidMuhymin merges, I thought there might be a way to use a fork as a dependency but I could not get it to work. Does anyone have experience just using the pull request as a dependency?

[Tc-001]

npm: https://www.npmjs.com/package/patch-package pnpm: https://pnpm.io/cli/patch yarn: https://yarnpkg.com/cli/patch

With these you should be able to manually add the line from #115 and commit it to git. You may need to use "astro:build:done" as the hook (https://github.com/RafidMuhymin/astro-imagetools/pull/115#issuecomment-1230936973)

I have had the patch applied for a few days and the build seems fine

[KyleFontenot]

Thanks a million Tc-001.

I'm still running into build-only errors despite germanz's PR and npmrun's lines.

Cannot read properties of undefined (reading 'replace')
    at getAssetPath (file:///<  projectfolder  >/node_modules/astro-imagetools/plugin/utils/shared.js:36:6)
    at file:///<  projectfolder >/node_modules/astro-imagetools/plugin/hooks/load.js:105:29
    at Array.map (<anonymous>)

• works on dev, but not on build
• tried [email protected] and [email protected] with [email protected]
• tried germnaz's "astro:config:done": vitePluginAstroImageTools.closeBundle,
• tried npmrun's
• tried both germanz's and npmruns together.
• the input file path is correct. Input file missing errors throw otherwise.

[germanz]

@Tc-001 I think the easiest is to put those lines in your Astro config file:

astroImageTools.hooks['astro:build:done'] = async () =>
  (await import("./node_modules/astro-imagetools/plugin/hooks/closeBundle.js")).default();

[Tc-001]

@KyleFontenot Try using "astro:build:done" as the hook: https://github.com/RafidMuhymin/astro-imagetools/pull/115#issuecomment-1230936973

@germanz Thanks! That is quite a bit cleaner

[KyleFontenot]

Brilliant. Thank you. @germanz 's PR works with this addition. https://github.com/RafidMuhymin/astro-imagetools/pull/115#issuecomment-1231980558 Even on [email protected] 👍

[AndreaPontrandolfo]

Thank you. Used PNPM patch-package feature with your fix and now i'm rocking [email protected] Great!

[germanz]

@RafidMuhymin any chance to merge my fix?

[aminya]

I have also verified this. Starting from Astro 1.0.2, this issue starts. Downgrading to Astro 1.0.1 fixes the issue for now.

[beeb]

EDIT: this is probably a different issue, see https://github.com/RafidMuhymin/astro-imagetools/issues/118

I have a similar problem, but in my case the production build is not even going through.

I get an error:

▶ src/pages/index.astro
 error   Cannot read properties of undefined (reading 'slice')
TypeError: Cannot read properties of undefined (reading 'slice')
    at getSrcset (file:///[redacted]/dist/entry.mjs?time=1662108981075:2050:43)
    at async file:///[redacted]/dist/entry.mjs?time=1662108981075:2434:22
    at async Promise.all (index 0)
    at async getImageSources (file:///[redacted]/dist/entry.mjs?time=1662108981075:2432:19)
    at async Promise.all (index 0)
    at async getImage (file:///[redacted]/dist/entry.mjs?time=1662108981075:2717:42)
    at async renderImg (file:///[redacted]/dist/entry.mjs?time=1662108981075:3209:28)
    at async file:///home/valentin/[redacted]/dist/entry.mjs?time=1662108981075:3275:32
    at async renderToIterable (file:///[redacted]/dist/entry.mjs?time=1662108981075:464:21)
    at async renderAstroComponentInline (file:///[redacted]/dist/entry.mjs?time=1662108981075:736:24)

But if I debug, the path is actually correct (fullPath is the absolute path to my source image with the query params):

The load function ( https://github.com/RafidMuhymin/astro-imagetools/blob/787323a7f56f39278d897d4b19c483417538337b/packages/astro-imagetools/plugin/hooks/load.js ) returns undefined.

In my <Img /> component, I use src={`/src/images/${somevar}.png`}.

[aminya]

See https://github.com/RafidMuhymin/astro-imagetools/pull/115#issuecomment-1233916046

[beeb]

See #115 (comment)

This has no effect for my problem (I checked that the patch was applied correctly). Build doesn't go through... I'll create a separate issue.