How can I suppress the “The tag is unrecogn

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?

Answer 1

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 2

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