CODEWITHSUNDEEP
reactjswarnings
Seph Reed
Seph Reed

Reputation: 11038

How can I suppress "The tag <some-tag> is unrecognized in this browser" warning in React?

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/33) in which someone states:

This is a new warning message in React 16. Has nothing to do with anime/react-anime and this warning can safely be ignored.

It's nice that it can be safely ignored, but it's still not going to pass scrutiny when my code is filling the console with useless error messages.

How can I suppress these warnings?

Upvotes: 28

Views: 37627

Answers (7)

Tabraiz Malik
Tabraiz Malik

Reputation: 126

React 16 gives warnings with x3dom components .

including is="x3d" in component suppresses these warnings.

Upvotes: 2

Hope
Hope

Reputation: 11

I had the same error. My problem was the new file for js when I use sfc I first letter of the name (tagname) has to be capital letter. I am just new so, I didn't notice it. But I am writing this just in case

Upvotes: 1

Thuy
Thuy

Reputation: 1663

I wrapped my HTML in the <svg> tag.

https://github.com/facebook/react/issues/16135:

I think you're probably rendering them outside of <svg> tags.

Upvotes: 0

John Jones
John Jones

Reputation: 2043

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

Upvotes: 8

d9k
d9k

Reputation: 2094

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'
}

Upvotes: 4

triple
triple

Reputation: 451

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

Upvotes: 25

TLadd
TLadd

Reputation: 6894

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.

Upvotes: 2

Related Questions