How can I suppress “The tag is unrecognized in this browser” warning in React?

Question

I\'m using elements with custom tag names in React and getting a wall of these errors. There\'s a GitHub issue on the subject (https://github.com/hyperfuse/react-anime/issues/3

Answer 1

Update:

see the answer from @triple with the correct solution: https://stackoverflow.com/a/55537927/1483006

Orignal:

I'm not saying this a correct thing you should really do, but you could hook console.error and filter this message by putting this somewhere before react-anime is loaded:

const realError = console.error;
console.error = (...x) => {
  // debugger;
  if (x[0] === 'Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.') {
    return;
  }
  realError(...x);
};

It seemed to work on the sample that was posted in the GitHub issue you linked at least. :3

Answer 2

I don't believe there's a built in way to suppress the error message.

The warning message is logged right here in react-dom. You could fork react-dom and simply remove the error message. For a change as small as this, perhaps using something like patch-package would be useful, so you don't have to maintain a fork.

Answer 3

I found a potential fix for this issue - if you are using a plugin (and potentially in other circumstances) you can use the is attribute.

Found here when working with X3d - simply writing <scene is="x3d" .../> works

Answer 4

My solution was to create envelope component which renders <div> with desired classes:

import React, {Component, DetailedHTMLFactory, HTMLAttributes} from "react";
import classNames from "classnames";

export default class SimpleTagComponent extends Component<SimplePropTypes>{
    baseClassName = 'simpleComponent'

    render() {
        return React.createElement(
            'div',
            {
                ...this.props,
                className: classNames(this.baseClassName, this.props.className),
            },
            this.props.children
        );
    }
}

type SimplePropTypes = HTMLAttributes<HTMLDivElement>

export class MyTag extends SimpleTagComponent {
    baseClassName = 'my'
}