React: 'tspan' and 'text' tags not working

[lar248]

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

What is the current behavior? In Chrome, we see the following errors:

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

Traced that this issue has persisted as seen in #11023

We have these tags capitalized already and rendered inside of the SVG, so not sure what else to do. We're using the recharts library as well:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

Here is a code snippet:

import React from 'react';
import { XAxis, YAxis, CartesianGrid, Legend, Label,
         ScatterChart, Scatter, Text, ReferenceLine,
         Tooltip } from 'recharts';
class XAxisTick extends Text {
  render() {
    const { payload, unknownYear } = this.props;
    return (payload.value !== unknownYear ?
      (<Text {...this.props} style={Theme.label}>{payload.value}</Text>) :
         <UnknownYearLabel {...this.props} style={Theme.label} />
      );
  }
}

What is the expected behavior?
The expected behavior is for these charts to work without the errors in our console related to <tspan> or <text>

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.2 but this issue occurred before we updated as well

[aweary]

@lar248 as mentioned in #11023, can you verify if you're possibly rendering the tspan and text tag outside of a parent svg element? I tried reproducing your issue and it appears to be working fine.

Could you please provide a reduced test case that reproduces the issue? Thanks!

[gaearon]

Closing as we couldn't reproduce. If this us a problem please provide a full reproducing example.

[gaearon]

We have these tags capitalized already and rendered inside of the SVG

One other possible cause would be if svg tags were created outside of React, and were mistakingly created using document.createElement('svg') rather than document.createElementNS('http://www.w3.org/2000/svg', 'svg').

[gaearon]

I misunderstood @aweary’s comment: I thought he couldn’t repro with your original example.
So I decided to try that.

I spent a few minutes spinning up a new React project to try your original code. Unfortunately only after that I realized that the code you provided is not actually runnable as-is. You didn’t wrap the component into a Recharts container, didn’t provide the expected props, etc. I tried putting <Text> inside <ScatterChart> (my best guess as to what you were trying to do) and it didn’t reproduce. So unfortunately that was not productive few minutes.

In the future, when reporting bugs, please provide examples people can actually run. If somebody goes through just ten issues, and each of those issues requires six minutes to verify before it turns out they’re unreproducible, that’s an hour spent on nothing.

I very much appreciate the time you took to file the issue. But to me, it’s just sad that we could’ve fixed it but instead I have to go to other issues. Now I don’t know when I’ll be able to look into this again (assuming there’ll be a reproducing case in the future). Thank you!