SVG <path> tag unrecognized with React 16

[ash-vd]

I have an element in which I have code similar to this:

<svg width="100%" height="100%" viewBox="0 0 80 80"> <path ref={(currentLevel) => { this.currentLevel = currentLevel; }} className={styles.svgBorderCurrent} d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z" /> </svg>.

The svg and it's paths are rendered, but I get an error in the console:

The tag <path> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

What is the right way to render this svg? I never got a message like this in React 15.x.

[gaearon]

Please share a complete example reproducing this. Such as a fiddle or a GitHub project. Otherwise it is very hard to fix issues.

[gaearon]

I cannot reproduce this with your example.
Please provide a full reproducing project and say which browser you're using.

[ash-vd]

Ah, you found my example :). I was still working on it, because I can't reproduce it there myself. I think it has something to do with the combination of external libraries. I will update the example when I find the time. Thanks!

[gaearon]

Oh, I just copy pasted your snippet into an empty page 😛
But it didn't help.

If you can provide an example that would be great.

[gaearon]

I’m going to close as this is currently unreproducible.

I suspect that for some reason you were accidentally rendering <path> outside of <svg>. Another possibility is that there’s some bug in how we track namespaces, but we can only check that with a reproducing example.

If you find one, let us know and we can reopen. Or feel free to file a new issue.

Thanks!

[ericclemmons]

Somewhat related, but you can see similar errors when using something like http://barecss.com/ with custom tags:

<!-- card element -->
<card>
	<p>Your content</p>
</card>

Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Users experiencing this legitimately are likely in the minority, I'm sure.

[gaearon]

The site says it explicitly:

Getting a classless grid system means using the very non-standards compliant but totally working grid element.

Cards use the also totally non-compliant card element but works fine in IE9+. These cards are meant to be used within a grid.

This is not great because it prevents standards from actually introducing such elements in the future (since they may break existing websites). I don’t think we’ll be going out of our way to support this.

[ericclemmons]

Oh, I completely understand the implications. I just wanted to add that note that, again, likely a minority of people may see that's not directly related to SVG.

It's a warning, after all. (for those that find this since it's ranked #1 in Google for this warning)

[EightArmCode]

Spammy spammy spammy. React should not warn us about using elements that are IN THE SPEC.