reflex
reflex copied to clipboard
[REF-2810] Error: img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
Describe the bug
When a user makes a simple mistake, and passes the image src
as a child, this causes a browser error.
Instead Reflex should catch this at compile time and throw an actionable error in the terminal, or just assume what the user meant and apply the child as the src
To Reproduce
rx.image("/landing/hero.webp", alt="Reflex Logo", width="100%", height="auto"),
OOOPS, meant to write it as
rx.image(src="/landing/hero.webp", alt="Reflex Logo", width="100%", height="auto"),
Screenshots Poor user experience π
Specifics (please complete the following information):
- Python Version: 3.11.8
- Reflex Version: 0.5.0a1
- OS: macOS 14
- Browser (Optional): Chrome
From SyncLinear.com | REF-2810
@masenf i tried accessing the first args assuming the user forgot to pass in the src attribute but getting an empty list. i think it stops compiling after the error is thrown . unless otherwise, it'd be best to throw an actionable error in the terminal as you suggested
@Yummy-Yums i think you would want to override the create
classmethod instead of __init__
.
It's the call to super.__init__
that's triggering the exception, so if you call that before your logic, then the exception will be raised before you get a chance to do anything.
@masenf applying the child as src still throws a browser error but works fine in the backend , so i guess throwing the TypeError in the else
block for user to handle is a better option. is this fine?
in the else block, why not
return super().create(src=children[0], **props)
Fixed via #3307