`enhanced-img` `snippet test(src: string)` results in "TypeError: Cannot read properties of undefined (reading 'src')"

[timephy]

Describe the bug

// This works ✅
<enhanced:img src="./image.jpg" />

// This does NOT ❌
{#snippet imgSnip(src: string)}
    <enhanced:img {src} />
{/snippet}
{@render imgSnip("./image.jpg")}

// Neither does this...
<enhanced:img src={"./image.jpg"} />

Reproduction

Please see above.

Logs

The error during pnpm run dev reads:

TypeError: Cannot read properties of undefined (reading 'src')

System Info

System:
    OS: macOS 15.2
    CPU: (20) x64 Intel(R) Xeon(R) W-2150B CPU @ 3.00GHz
    Memory: 123.22 MB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 23.5.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 9.15.2 - /usr/local/bin/pnpm
    bun: 1.1.34 - ~/code/grouptube/frontend/node_modules/.bin/bun
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @sveltejs/adapter-node: ^5.2.11 => 5.2.11 
    @sveltejs/adapter-static: ^3.0.8 => 3.0.8 
    @sveltejs/enhanced-img: ^0.4.4 => 0.4.4 
    @sveltejs/kit: ^2.15.0 => 2.15.0 
    @sveltejs/vite-plugin-svelte: 5.0.3 => 5.0.3 
    svelte: 5.15.0 => 5.15.0 
    vite: ^6.0.1 => 6.0.1

Severity

serious, but I can work around it

Additional Information

No response

[timephy]

If this is intentional, it could make sense to produce a better error? It was not apparent to me that the snippet did not work because of the following.

<enhanced:img src="./image.jpg" /> // ✅
<enhanced:img src={"./image.jpg"} /> // ❌

[eftichis0202]

Hi Timothy, i am encountering the same problem with snippets and enhanced:img. I am wondering if you found a solution?

the error i am getting:

TypeError: Cannot read properties of undefined (reading 'src')
    at slide (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/src/routes/+page.svelte:201:5)
    at slide1 (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/src/routes/+page.svelte:215:1)
    at SlideGrid (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/src/components/SlideGrid.svelte:27:15)
    at $$render_inner (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/src/routes/+page.svelte:282:36)
    at _page (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/src/routes/+page.svelte:450:3)
    at children (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/.svelte-kit/generated/root.svelte:66:5)
    at _layout (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/src/routes/+layout.svelte:90:1)
    at Root (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/.svelte-kit/generated/root.svelte:61:3)
    at render (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/server/index.js:130:2)
    at Function._render [as render] (/Users/felixgerdschneider/Documents/Coding_Projects/energie-web/node_modules/.pnpm/[email protected]/node_modules/svelte/src/legacy/legacy-server.js:27:24)

my code:

{#snippet slide(img: string, title: string, description: string, path: string)}
	<div class="text-center">
		<a href={path}>
			{#if img}
				<enhanced:img
					src={img}
					alt="hero"
					class="h-[275px] w-[400px] cursor-pointer object-cover"
				/>
			{/if}
		</a>
		<a href={path}>
			<h2 class="mt-4 text-2xl font-light">{title}</h2>
			<p class="h-12">{description}</p>
		</a>
	</div>
{/snippet}
{#snippet slide1()}
	{@render slide(
		'/src/lib/static/wg/Wohngebäude.jpg',
		'Wohngebäude',
		'Neubau und Sanierung',
		'/wohngebaeude'
	)}
{/snippet}
{#snippet slide2()}
	{@render slide(
		'/src/lib/static/nwg/Nichtwohngebäude.jpg',
		'Nichtwohngebäude',
		'Neubau und Sanierung',
		'/nicht-wohngebaeude'
	)}
{/snippet}
{#snippet slide3()}
	{@render slide(
		'/src/lib/static/anlagentechnik/Anlagentechnik4.jpg',
		'Anlagentechnik',
		'Neuinvestitionen, Austauschinvestitionen Erweiterungsinvestitionen',
		'/anlagentechnik'
	)}
{/snippet}
{#snippet slide4()}
	{@render slide(
		'/src/lib/static/energieaudit/Energieaudit.jpg',
		'Energie Audit',
		'Nach ISO 50001 und DIN-EN 16247-1',
		'/energieaudit'
	)}
{/snippet}

if you couldn't ind a way, i will probably give up trying to use:enhanced..

[timephy]

Hey @eftichis0202,

Try importing the image with ?enhanced and pass that to <enhanced:img>.

I do this in an app:

<script lang="ts">
    import exampleMobile from "./Landscape-Player-small.jpg?enhanced"
</script>

<enhanced:img src={exampleMobile} />

This should work with snippets too!

[dustinfreeman]

Isn't the fundamental annoyance that img supports an undefined src, but enhanced:img does not? It should without throwing an error

[timephy]

Isn't the fundamental annoyance that img supports an undefined src

No I don't think that's the issue here 🤷🏽‍♂️