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/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?

do you want to get rid of pollution in development ? because these warnings shouldn't appear in production build — niceman, Feb 12 '18 at 17:19
it's a fairly large wall of warnings. one for every type of element on the page. I would like to get rid of pollution in development. — Seph Reed, Feb 12 '18 at 17:32
As of now, the easiest solution I've found is to prepend every possible tag with "x-". There's some old hardly known rule about x-tags in html which says anything that starts with "x-" is okay to use. — Seph Reed, Mar 07 '18 at 21:46

score 22 · Answer 1 · answered Apr 05 '19 at 14:43

22

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

answered Apr 05 '19 at 14:43

triple

421
4
14

Can confirm. This should be the accepted answer. I was also able to successfully removed the warnings by adding the "is" tag to my custom elements. Any value works, for example: is="custom". Even a single space is sufficient. – kiddailey Mar 19 '20 at 19:14
If anyone is here that tag being , I could resolve it by using webview like this anything here. – isuru chathuranga May 21 '20 at 14:32

John Jones · Accepted Answer · 2020-04-24T00:16:51.573

8

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

edited Apr 24 '20 at 00:16

answered Oct 10 '18 at 23:42

John Jones

2,027
16
25

I'm no longer working on the project, so I can't verify this works, but it does appear to be a good solution to the problem. If put behind dev env condition, it seems like it'll work fine without hurting anything. – Seph Reed Oct 11 '18 at 02:33
It’s a hack, but I like it! +200 – ColinE Oct 13 '18 at 19:40

score 4 · Answer 3 · answered Apr 20 '20 at 13:09

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

score 2 · Answer 4 · answered Oct 08 '18 at 01:54

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.

score 2 · Answer 5 · answered Mar 29 '22 at 13:01

2

React 16 gives warnings with x3dom components .

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

answered Mar 29 '22 at 13:01

Tabraiz Malik

106
1
6

score 1 · Answer 6 · answered Nov 02 '21 at 08:14

1

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

answered Nov 02 '21 at 08:14

Hope

11
1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/30236855) – Mahdi Zarei Nov 02 '21 at 11:40
May not be relevant ... but hey, I had the same symptom and this resolved the error messages . jb – den232 Mar 13 '22 at 21:10

score 0 · Answer 7 · edited Aug 27 '21 at 18:08

0

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.

edited Aug 27 '21 at 18:08

Paul Roub

36,322
27
84
93

answered Aug 27 '21 at 17:54

Thuy

1,493
1
11
11

Jeremy Thompson · Answer 8 · 2023-01-03T01:56:56.520

0

This is what got rid of the Web Browser Warnings for me:

BAD:

const SocialMedia = (props) => {
 <socialmedia>
    return (

Good:

const SocialMedia = (props) => {
    return (

edited Jan 03 '23 at 01:56

answered Jan 02 '23 at 18:07

Jeremy Thompson

61,933
36
195
321

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

8 Answers8

Linked