Server side rendering: "Warning: <linearGradient /> is using uppercase HTML. Always use lowercase HTML tags in React."

[coreh]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

Whenever I render SVG elements that are camel cased (e.g. <linearGradient />) on the server side, I get the following warning:

Warning: <linearGradient /> is using uppercase HTML. Always use lowercase HTML tags in React.

What is the expected behavior?

Warnings should be consistent with the client side rendering, if possible. In this case, I'd expect no warning, since using camel cased SVG element names is pretty standard.

For client side rendering, there seems to be a check for the current namespace:

react/src/renderers/dom/fiber/ReactDOMFiberComponent.js

Lines 344 to 352 in efcac24

	if (namespaceURI === HTML_NAMESPACE) {
	if (__DEV__) {
	warning(
	isCustomComponentTag || type === type.toLowerCase(),
	'<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +
	'in React.',
	type,
	);
	}

For server side rendering, there seems to be currently no such check in place:

react/src/renderers/shared/server/ReactPartialRenderer.js

Lines 537 to 544 in 81706ee

	if (__DEV__) {
	warning(
	tag === element.type,
	'<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +
	'in React.',
	element.type,
	);
	}

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Hitting this on 16.0.0-beta.5. Was not hitting it on 15.6.1, the version I was previously on.

Thanks in advance.

[gaearon]

Looks like server side is missing the namespace check.

[BiosBoy]

Oh, seems like I'm getting this issue too.

In my case, I'm using renderToStaticMarkup on the client-side to put some of the React code into pure HTML body. Don't ask me why :)

Error:
Warning: <linearGradient /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

React: 16.12.0
React-Dom: 16.12.0