Svelte target ID mismatch: hardcoded svekyll-app vs shortcode svekyll-app-{slug} #17

New issue

Open

opened 2026-10-23 21:21:49 +00:00 by xrd · 0 comments

xrd commented

2026-10-23 21:21:49 +00:00

Owner

Why a wildcard fallback isn't enough

A naive fix using querySelectorAll('[id^="svekyll-app-"]')[0] would only mount the first Svelte app on a page, breaking pages with multiple svekyll posts.

Proper fix

Sprinkyll now replaces a SPRINKYLL_TARGET_ID placeholder in main.js with the correct slug-specific ID at build time. Each svekyll bundle gets its own hardcoded target ID, so multiple Svelte apps per page work correctly.

PR: #18

The template main.js hardcodes 'svekyll-app' as the Svelte mount target, but Hugo shortcodes generate IDs like 'svekyll-app-{slug}'. This causes: Uncaught TypeError: can't access property '$$', i is undefined. ## Why a wildcard fallback isn't enough A naive fix using `querySelectorAll('[id^="svekyll-app-"]')[0]` would only mount the first Svelte app on a page, breaking pages with multiple svekyll posts. ## Proper fix Sprinkyll now replaces a `SPRINKYLL_TARGET_ID` placeholder in main.js with the correct slug-specific ID at build time. Each svekyll bundle gets its own hardcoded target ID, so multiple Svelte apps per page work correctly. PR: https://extrastatic.dev/svekyll/sprinkyll/pulls/18