sveltejs / sveltejs/kit

`enhanced:img` does not support dynamically provided SVGs

Open
#13,740 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:enhanced-img
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

On the server I use a dynamic import

import.meta.glob("./images/*.{png,svg}", { query: { enhanced: true } })

And when on the client inside a {#each} block I display each image using <enhanced:img src={image} />, I get the following exception :

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

Looking at the implementation it seems that the enhanced:img package is supposed to support this at runtime with the following code

https://github.com/sveltejs/kit/blob/b183244819559ec20b6726379b00552d4fbf97e8/packages/enhanced-img/src/preprocessor.js#L352-L361

But it generates the following code :

if (typeof image === "string") {
    $$payload.out += "<!--[-->";
    $$payload.out += `<img${attr("src", image.img.src)}${attr("width", image.img.w)}${attr("height", image.img.h)}>`;
  } else {
    $$payload.out += "<!--[!-->";

It tests that image is a string and then try to access image.img.src

Reproduction

https://github.com/mquandalle/enhanced-img-svgpng

git clone git@github.com:mquandalle/enhanced-img-svgpng.git
npm run dev
Logs

System Info
System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M2
    Memory: 93.03 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    bun: 1.2.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 135.0.7049.114
    Safari: 18.0
  npmPackages:
    @sveltejs/adapter-auto: ^4.0.0 => 4.0.0 
    @sveltejs/enhanced-img: ^0.4.4 => 0.4.4 
    @sveltejs/kit: ^2.16.0 => 2.20.7 
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3 
    svelte: ^5.0.0 => 5.28.2 
    vite: ^6.2.5 => 6.3.3
Severity

annoyance

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/enhanced-img/src/preprocessor.js at the linked lines and reproduce the failure using the enhanced-img-svgpng repository with npm run dev. Trace how the dynamically imported SVG value is handled inside the {#each} block, then verify that enhanced:img renders those values without the undefined-property exception.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.