How can I suppress "The tag <some-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?

Answer 1

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 2

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 3

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.