Processing the same image in multiple places causes strange errors (enhanced-img)

[elliott-with-the-longest-name-on-github]

Describe the bug

When processing the same image in multiple places, there's some racey behavior causing strange and misleading errors. The likelihood of the issue occurring seems proportional to the number of instances, with 7 or so seeming to guarantee it.

Reproduction

I'm not sharing my reproduction publicly as it uses an image of me, but I have shared it internally with the maintainers.
https://github.com/elliott-with-the-longest-name-on-github/enhanced-img-repro

If you're looking to test this yourself:

• Create a SvelteKit app
• Set up enhanced-img
• Add 7 or so identical enhanced-img elements
• Have them reference a large image. I'm not sure if this factors in, but mine is an 8k image.

Logs

# Two possibilities:

error during build:
[vite-plugin-svelte] [plugin vite-plugin-svelte] Error while preprocessing /Users/elliottjohnson/dev/me/wedding-site/src/routes/travel/+layout.svelte - Input file has corrupt header: webp: unable to parse image

# or

error during build:
[vite-plugin-svelte] [plugin vite-plugin-svelte] Error while preprocessing /Users/elliottjohnson/dev/me/wedding-site/src/routes/coming-soon/+page.svelte - Input file contains unsupported image format

# Here's the rest of the trace

Error: [plugin vite-plugin-svelte] Error while preprocessing /Users/elliottjohnson/dev/me/wedding-site/src/routes/coming-soon/+page.svelte - Input file contains unsupported image format
    at Sharp.metadata (/Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/[email protected]/node_modules/sharp/lib/input.js:487:17)
    at Object.load (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-imagetools/dist/index.js:112:74)
    at async process (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@sveltejs/enhanced-img/src/preprocessor.js:195:22)
    at async update_element (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@sveltejs/enhanced-img/src/preprocessor.js:106:15)
    at async Promise.all (index 0)
    at async markup (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_modules/@sveltejs/enhanced-img/src/preprocessor.js:156:4)
    at async process_markup (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/[email protected]/node_modules/svelte/src/compiler/preprocess/index.js:309:20)
    at async Module.preprocess (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/[email protected]/node_modules/svelte/src/compiler/preprocess/index.js:355:25)
    at async compileSvelte (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:85:20)
    at async Object.transform (file:///Users/elliottjohnson/dev/me/wedding-site/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:148:20)

System Info

System:
    OS: macOS 15.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 202.02 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.4.0 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
    bun: 1.1.24 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.54
    Safari: 18.3

Severity

blocking all usage of SvelteKit

Additional Information

Might downgrade severity if I can find a workaround, but haven't managed one yet.

[benmccann]

My guess would be a race condition writing to and reading from the cache: https://github.com/JonasKruckenberg/imagetools/blob/fc6963f8212242797a3cc224bbd80450cc83f524/packages/vite/src/index.ts#L143

[elliott-with-the-longest-name-on-github]

I manually disabled caching by setting cacheOptions.enabled to false in vite-imagetools and it fixed the issue -- so the bug seems to be a race condition in reading/writing the cache there.

[elliott-with-the-longest-name-on-github]

I'm not convinced this is an imagetools bug, or at least it's not easily reproducible... I just set up a project with about a thousand identical images processed by vite-imagetools and no matter what configuration I used, I couldn't get it to fail. (I mimicked the config we pass from enhanced-img to vite-imagetools in the imports.) But it reliably fails when using enhanced-img. So I'm not sure where the bug is...

[benmccann]

I just set up a project with about a thousand identical images processed by vite-imagetools and no matter what configuration I used, I couldn't get it to fail

Were they on different pages?

The code changed quite a bit when we migrated to Svelte 5, so another thing to check might be whether this happens with Svelte 4 before 0.4.0: https://github.com/sveltejs/kit/blob/main/packages/enhanced-img/CHANGELOG.md#040

[elliott-with-the-longest-name-on-github]

Yeah, I set up 10 pages each importing 30 copies of the same image and rendering them