-
Notifications
You must be signed in to change notification settings - Fork 46.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: renderToStaticMarkup throw warning about SVG PascalCase and camelCase naming #18258
Comments
could you make a codesanbox version or a git repo that demonstrates this issue? |
@threepointone hi! Here you go https://codesandbox.io/s/reactsvgtestapp-sh7b. Well, it works in a bit different way on codesandbox, but the error can be spotted anyway. Just on the page load please open the console directly in the browser (instead integrated one) and reload the page. So you will found the error about inconsistent SVG nodes naming on the first render like on the screenshot below: https://imgur.com/a/C9MpF3Y. The funny think on the codesandbox it disappears on the second rerender, which doesn't make a trick inside my project. Thanks. |
So that console error thrown when we try to insert the
|
I had a quick look at this one, and as far as I can tell the error is being thrown because getIntrinsicNamespace() tests specifically for an The test could be expanded to cover the 32 valid SVG child tags that have camelCase names, which would make I'm still new around here so I'm not sure what the general policy is on balancing edge cases vs. library size vs. consistency so let me know. |
Any updates yet? :( |
This is currently unsupported. SVG is its own spec with its own DOM. Lumping its SVG DOM elements with HTML DOM elements is problematic in a number of ways. A workaround would be to wrap your element in |
Hmm, let me check this possibility... |
Going to close this because it's unsupported, but if the workaround works, do please share here :) |
Seems like this is a truly workaround for now. Worked for me! |
React version: 16.12.0
Error:
Warning: <linearGradient /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
The current behavior
Any
SVG
-inside node(LinearGradient
,feDropShadow
, etc), that should be in PascalCase/camelCase inside HTML indeed, throw me a warning above through React'simport { renderToStaticMarkup } from 'react-dom/server'
renderToStaticMarkup
method.I use renderToStaticMarkup to parse and then insert its DOM inside global HTML (don't ask me why :) ) on client-side, not SSR.
The expected behavior
Should not throw any warnings and render SVG-in tags in PascalCase without any efforts and tears in fact.
Thanks.
P.S.
I saw this report, but it seems like it doesn't fix for some reason #10415 ...
The text was updated successfully, but these errors were encountered: