Comments (15)
Just wanted to leave here that the same thing happened to me, took me a while to figure out that I had my imports messed up.
I feel like since these types are not compatible, the code shouldn't have compiled (or maybe give a warning). It's a bit sad to see that people have had this issue for 3,5 years now.
from svg.
In my case I wasn't intentionally mixing them so once I figured out what went wrong it was easy to fix. Still, it would have been nice if the compiler would have warned me for my stupidity.
from svg.
I pretty often use inline SVGs in my HTML and I can add class
attribute to almost any element including SVG:
<div class="house">
<svg class="dog">
<path d="" />
</svg>
</div>
So when I first time tried Elm, my intuition failed:
div [ class "house" ]
[ svg [ class "dog", svgContent "<path d='' />" ] []
]
svgContent content =
property "innerHTML" (Json.Encode.string content)
The compiler didn't tell me anything about it. So I got Uncaught TypeError: Cannot set property className...
runtime exception. It's totally my fault coming from my wrong expectations and previous experience.
BTW, if Html.class
implementation would also use VirtualDom.attribute "class" value
approach, it would prevent the problem for other newcomers. I guess it relies on the className
property for performance?
from svg.
Hello from 2020 (what a great year!), I've just spent over an hour wondering why my page fails unexpectedly (and actually goes into infinite loop of updateIfNeeded
), just because I accidentally imported Html.Attributes.class
instead of Svg.Attributes.class
which the compiler happily accepted :-(
I got used so much to Elm's "If it compiles it just works" so I was quite taken aback by this. Not sure which is the correct place to push for fix, whether here or at the elm/compiler but I guess this should really get fixed. Seems like I'm not the only one who stumbled upon this...
from svg.
I'm not even using Elm anymore. I guess the ecosystem has just stalled due to the Elm 0.19 release fiasco. These issues may never be fixed.
from svg.
I am using inline SVGs a lot a also. I am really don't like this runtime exception since only because of this I am checking every page of my Elm project for this issue (and there still possible runtime issues when state changes for example).
The most bad thing is that elm compiler allows to pass Html.Attributes.class
to functions with definition like this: icon : String -> List (Svg.Attribute msg) -> Svg msg
from svg.
I've just ran into the same issue.
Accidentally used Html.Attribute.class
instead of TypedSvg.Attributes.class
.
Yes, it caused a runtime error which was surprising and somewhat disappointing. People are running into this, see the referenced tickets. I also arrived here from such a ticket.
I would suggest going ahead with a breaking change to ensure that the type system can still protect us from runtime errors.
from svg.
Greetings from 2022 👋
This bit us as well. Interestingly, this did not cause a fatal runtime error during the development build with the --debug
flag on, and only error-ed out for the production build, which made it significantly more nasty for us
from svg.
Happened to me as well.
from svg.
I had the same problem.
@evancz Why class
functions from Html and Svg modules have incompatible implementations?
-- From Html.Attributes
-- className property can't be used for svg nodes
class value =
VirtualDom.property "className" (Json.string value)
-- From Svg.Attributes
class value =
VirtualDom.attribute "class" value
from svg.
SVG does not have JS properties. You can not use properties for anything.
I am just curious why people are mixing and matching between these libraries.
from svg.
I ran into this problem because I was using inline SVGs. Easy mistake to make any time you're using inline SVGs. Took some digging to realize what I was doing wrong.
from svg.
I had same issue. It would be good if it could be caught by compiler, to help enforce "no runtime exceptions".
I think the issue is that both Svg.Attribute msg
and Html.Attribute msg
are type aliases, which don't enforce strong typing. Don't see an easy solution, without breaking changes. It would be good if elm had something like type alias that enforced strong typing (could use a union type with a single variant but it's a bit messy, and a breaking change).
from svg.
I just ran into this exact issue today, didn't take long to figure out but still confused because I got a runtime error instead of a compiler error.
from svg.
According to the source, Svg.svg
accepts List (Html.Attribute msg)
:
svg : List (Html.Attribute msg) -> List (Svg msg) -> Html.Html msg
My use is embedding SVG in HTML too. I mistakenly added Html.Attribute.class
to Svg.svg
.
To fix it I added a wrapper HTML element (span
) with the class.
from svg.
Related Issues (20)
- How to use the onResize event? HOT 2
- svg/html conflict HOT 2
- not producing right case for attribute viewBox HOT 2
- SVG Decoder HOT 4
- Stringly typed HOT 2
- Add Svg.Attributes.classList HOT 1
- special-case many nodes HOT 2
- Expose onWithOptions HOT 2
- Svg.Attributes.style not consistent with Html.Attributes.style HOT 1
- Use of deprecated xlink prefixed attributes (e.g. xlinkHref instead of href) HOT 4
- Getting point information from SVG. HOT 3
- href attribute missing HOT 1
- Svg.Keyed.node is not working properly for all cases HOT 3
- Serializing SVG HOT 1
- [Suggestion] viewBox : Int -> Int -> Int -> Int -> Attribute msg HOT 1
- Use of xlink:href in SVG causes rendering problems
- Runtime issue in compiled code
- PROBLEM BUILDING DEPENDENCIES
- Runtime error with blank nodes
- Help Request: Center text around a point HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg.