-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Description
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:
- Create a new YEW project with version 0.21 with a simple hello world application that contains a SVG
- Add a linear gradient similar to the snippet above
- 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.