Could not determine intrinsic dimensions for ${resolved_id}

Error message

Could not determine intrinsic dimensions for ${resolved_id}

What it means

In enhanced-img's Vite plugin, update_element rewrites <img> tags in markup, calling sharp(resolved_id).metadata() to obtain intrinsic width/height for the generated attributes. If metadata lacks width or height, it warns that intrinsic dimensions could not be determined and still emits the markup, but width/height attributes may be undefined.

Source

Thrown at packages/enhanced-img/src/vite-plugin.js:157

							throw new Error(
								`Could not locate ${file_path}. Please move it to be located relative to the page in the routes directory or reference it beginning with /static/. See https://vitejs.dev/guide/assets for more details on referencing assets.`
							);
						}
						throw new Error(
							`Could not locate ${file_path}. See https://vitejs.dev/guide/assets for more details on referencing assets.`
						);
					}

					if (OPTIMIZABLE.test(url)) {
						const image = await process_id(resolved_id, plugin_context, imagetools_plugin);
						s.update(node.start, node.end, img_to_picture(content, node, image));
					} else {
						const metadata = await sharp(resolved_id).metadata();
						// this must come after the await so that we don't hand off processing between getting
						// the imports.size and incrementing the imports.size
						const name = imports.get(original_url) || '__IMPORTED_ASSET_' + imports.size + '__';
						if (!metadata.width || !metadata.height) {
							console.warn(`Could not determine intrinsic dimensions for ${resolved_id}`);
						}
						const new_markup = `<img ${serialize_img_attributes(content, node.attributes, {
							src: `{${name}}`,
							width: metadata.width,
							height: metadata.height
						})} />`;
						s.update(node.start, node.end, new_markup);
						imports.set(original_url, name);
					}
				}

				/**
				 * @type {Array<ReturnType<typeof update_element>>}
				 */
				const pending_ast_updates = [];

				walk(/** @type {import('svelte/compiler').AST.TemplateNode} */ (ast), null, {
					RegularElement(node, { next }) {

View on GitHub (pinned to 03f1687fe6)

Solutions

Add explicit width and height attributes on the <img> tag so dimensions don't need to be inferred.
Validate/replace the image file with a known-good asset.
Give SVG files explicit width/height/viewBox attributes in their root element.
Ensure the resolved path is a real raster image (check import alias and extension).

Example fix

<!-- before -->
<img src="$lib/assets/icon.svg" alt="icon" />
<!-- after -->
<img src="$lib/assets/icon.svg" alt="icon" width="32" height="32" />

Defensive patterns

Strategy: validation

Validate before calling

import sharp from 'sharp';
const meta = await sharp(resolvedId).metadata();
if (!meta.width || !meta.height) {
  console.warn(`${resolvedId}: set explicit width/height on the <img> tag`);
}

Prevention

Always set width/height attributes on imgs referencing unmeasurable assets
Ensure SVGs have explicit dimensions
Check resolved import paths point to valid raster files

When it happens

Trigger: Processing an <img src="..."> in a Svelte component during transform (RegularElement handling) where sharp cannot extract dimensions from the resolved image file (corrupt file, unsupported format, or SVG without dimensions).

Common situations: Broken/corrupt images committed to the repo; SVG icons without width/height attributes; images referenced via aliases that resolve to wrong paths; sharp failing on certain CMYK or progressive JPEGs.

Related errors

AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/9d14340ee5debf85. Report an issue: GitHub.