vercel/next.js · error

Unknown syntax for length, expected value with unit ({len})

Error message

Unknown syntax for length, expected value with unit ({len})

What it means

Turbopack's SVG dimension calculator (parse_length) expects a width/height value matching `<number><optional-unit>` (e.g. "100", "50px", "2in"). When the attribute value doesn't match that regex — notably percentages, the keyword 'auto', or calc() expressions — parse_length returns this error. It surfaces during image-size inference for SVG assets.

Source

Thrown at turbopack/crates/turbopack-image/src/process/svg.rs:44

});

static ROOT_REGEX: LazyLock<Regex> =
    LazyLock::new(|| Regex::new(r#"<svg\s([^>"']|"[^"]*"|'[^']*')*>"#).unwrap());
static WIDTH_REGEX: LazyLock<Regex> =
    LazyLock::new(|| Regex::new(r#"\swidth=['"]([^%]+?)['"]"#).unwrap());
static HEIGHT_REGEX: LazyLock<Regex> =
    LazyLock::new(|| Regex::new(r#"\sheight=['"]([^%]+?)['"]"#).unwrap());
static VIEW_BOX_REGEX: LazyLock<Regex> =
    LazyLock::new(|| Regex::new(r#"\sviewBox=['"](.+?)['"]"#).unwrap());
static VIEW_BOX_CONTENT_REGEX: LazyLock<Regex> = LazyLock::new(|| {
    Regex::new(r"^\s*((?:\w|\.|-)+)\s+((?:\w|\.|-)+)\s+((?:\w|\.|-)+)\s+((?:\w|\.|-)+)\s*$")
        .unwrap()
});

fn parse_length(len: &str) -> Result<f64> {
    let captures = UNIT_REGEX
        .captures(len)
        .ok_or_else(|| anyhow!("Unknown syntax for length, expected value with unit ({len})"))?;
    let val = captures[1].parse::<f64>()?;
    let unit = &captures[2];
    let unit_scale = UNITS
        .get(unit)
        .ok_or_else(|| anyhow!("Unknown unit {unit}"))?;
    Ok(val * unit_scale)
}

fn parse_viewbox(viewbox: &str) -> Result<(f64, f64)> {
    let captures = VIEW_BOX_CONTENT_REGEX
        .captures(viewbox)
        .ok_or_else(|| anyhow!("Unknown syntax for viewBox ({viewbox})"))?;
    let width = parse_length(&captures[3])?;
    let height = parse_length(&captures[4])?;
    Ok((width, height))
}

fn calculate_by_viewbox(

View on GitHub (pinned to 0ae8c72462)

Solutions

1. Give the SVG explicit numeric width/height (e.g. width="64" height="64") in absolute units.
2. Provide a viewBox attribute (e.g. viewBox="0 0 64 64") so dimensions can be derived when width/height are relative.
3. Remove percentage/auto values if the SVG is consumed as a static image asset.

Example fix

<!-- before -->
<svg width="100%" height="auto" viewBox="0 0 64 64">

<!-- after -->
<svg width="64" height="64" viewBox="0 0 64 64">

// Validate SVG width/height are numeric-with-optional-unit before using as an asset.
const LEN_RE = /^([0-9.]+(?:e-?\d+)?)(in|cm|em|ex|m|mm|pc|pt|px)?$/;
function isValidLength(v) {
  return typeof v === 'string' && LEN_RE.test(v.trim());
}

When it happens

Trigger: An SVG asset with width="100%", height="auto", width="calc(50%)", or any non-numeric length keyword. The error propagates up from calculate() when both width and height, or viewBox fallback, can't be determined.

Common situations: Responsive SVGs authored for the browser using percentage/auto sizing that Turbopack tries to size statically; SVGs exported from design tools with viewport-relative dimensions.

Related errors

• Unknown syntax for viewBox ({viewbox})
• Unknown unit {unit}
• Trace has no navigationStart for ${pageUrl}
• Failed to parse source map URL for ${filename}.
• "url" parameter is valid but image type is not allowed

AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/f496e5b40310dcd4. Report an issue: GitHub.