Skip to content

SSR fails with linearGradient #3871

@troels-im

Description

@troels-im

Problem
When attempting to do hydration of a component that has a SVG with a linearGradient, the hydration fails with following panic:

main-71a4e29a00acec2f.js:631 panicked at /Users/tfr/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/yew-0.21.0/src/dom_bundle/btag/mod.rs:358:13:
assertion `left == right` failed: expected element of kind linearGradient, found lineargradient.
  left: "lineargradient"
 right: "linearGradient"

The core issue appears to be related to that SVG is case sensitive and you need to define your gradients like this:

            <@{"linearGradient"} id=":S1:-fade" x1="0" x2="0" y1="0" y2="1">
                <stop offset="40%" stop-color="white"></stop><stop offset="100%" stop-color="black"></stop>
            </@>

for it to be correct when rendered.

Steps To Reproduce
Steps to reproduce the behavior:

  1. Create a new YEW project with version 0.21 with a simple hello world application that contains a SVG
  2. Add a linear gradient similar to the snippet above
  3. Enable SSR and hydration

Expected behavior
I would expect this to not panic. Clearly it is the same element appearing just with different casing.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment:

  • Yew version: v0.21, release
  • Rust version: 1.88.0-nightly (2e6882ac5 2025-05-05), nightly-aarch64-apple-darwin (active, default)`
  • Target: wasm32-unknown-emscripten + aarch64-apple-darwin (
  • Build tool, if relevant: [e.g. wasm-pack, trunk]
  • OS: macOS
  • Browser and version: chrome

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later

I think the biggest issue in me solving this myself is that I don't know the codebase well enough to assess what the proper solution is. At a first glance, it looks like this could be solved by just lower casing the tag name when comparing, but this might be an incorrect solution.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions