Bug: renderToStaticMarkup throw warning about SVG PascalCase and camelCase naming

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’s import { 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 https://github.com/facebook/react/issues/10415 …

[dfltr]

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 <svg> tag at the top level, so an orphaned <linearGradient> (or any other camelCase SVG child) is assumed to be in the HTML namespace. Because it’s assumed to be in the HTML namespace, it fails the naming convention test for HTML elements, hence the error.

The test could be expanded to cover the 32 valid SVG child tags that have camelCase names, which would make getIntrinsicNamespace ~653 bytes longer, but that would also result in lowercase SVG children, hyphenated children, and camelCase children all going through slightly different code paths for validation.

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.

[BiosBoy]

A workaround would be to wrap your element in <svg> and then extract it from the output. Hope that helps!

Seems like this is a truly workaround for now. Worked for me!