"Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."

[karl-run]

Using a blank create-react-app application, with only react-anime installed and only a simple Anime tag I get this warning in Chrome:

Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

[itsOmidKarami]

i have the same problem and i don't have any idea what to do! nothing happens at all!

[alaingalvan]

Woah, this is weird, so we're using <g> as a wrapper component and it worked fine for a while. The main reason was that we couldn't be sure if you were doing animations in SVGs or not.

Thanks for reporting!

[rethna2]

This library was very much helpful in one of my projects. Thanks to the creators and maintainers.

In React16, it is not essential to render just 'single root node'. We can render an array of nodes too. So I removed the wrapper <g> tag and it worked fine for me.

[yestoall]

i have the same problems in safari / chrome with react 16.0.1 nothing works after the error

[JonDum]

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

@yestoall Your app isn't working for some other reason. Catch all exceptions in debugger and see if you can isolate the issue.

[ravslabosz]

Would be great to have control of nametag of wrapper (not sure if its even possible in react) In my case would fix problem with animating clipPath of my SVG (the element is breaking syntax of svg clipping)

[paulinhapenedo]

Maybe it's a good fit for the new Fragments that React just released?

[rgb2hsl]

Same for me. Also, i've got no animation at all after the error.

[kresli]

@JonDum not true. Even main example doesn't work. Please see https://codesandbox.io/s/jlzlo15k59

[rgb2hsl]

@kresli Exactly the same behavior, as I have.

[Kelin2025]

Same shit

[Kelin2025]

I fixed it Not sure it's correct (because I removed something) But it works https://github.com/hyperfuse/react-anime/pull/39

[kresli]

@Kelin2025 I don't want to be a mood killer here, but you broke compatibility. If someone already passing a style to the Anime component, it would break expected behaviour. Maybe release it as minor change?

[geohuz]

Hey this is apparently a bug, even the example code in the project home doesn't show anything! if you inspect the final rendering page, you will see the root component is wrapped with <g>, which is the element for svg, don't know why it becomes the wrapper of html.

[sgnl]

Just installed and ran into this. Any ETA on an update? would love to start using this :> thanks!

[jitusd9]

I have the same problem with <span> tag.

[yestoall]

try pose. its a better option.

On Sun, 7 Oct 2018 at 18:22, Jitendra Dhurvey notifications@github.com wrote:

I have the same problem with tag.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hyperfuse/react-anime/issues/33#issuecomment-427665930, or mute the thread https://github.com/notifications/unsubscribe-auth/AAB0VITJDiblPED4tiYxVpen4_LJ8CIZks5uiiopgaJpZM4QRkj_ .

--

nacho

[karl-run]

I've had great experience with react-spring after I had to give up on react-anime.

[thilinaaba]

Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

plz help me this error how to solve

[tjwjdvkf]

import I18n from 'redux-i18n';

i18n -----> I18n

[zhangjie45]

The initials should be capitalized

[benbot]

This issue seems so have either been resolved, gone stale, or just isn't a problem anymore. I'm going to go ahead and close this, but if there are any more similar problems people run into, please open a new issue.

[ajbogh]

For those finding this issue coming from other projects:

This can be fixed by adding xmlns="http://www.w3.org/2000/svg" to any offending SVG element, including <g>, <use>, <text>, or <tspan> (doesn't break spec, but does pollute attribute list).

You could also run tests in something other than __DEV__ mode, or add the is attribute (breaks HTML spec, requires test selectors to be rewritten).

https://github.com/facebook/react/blob/993ca533b42756811731f6b7791ae06a35ee6b4d/packages/react-dom/src/client/ReactDOMComponent.js#L442

[PubuduWanigasekara]

I have the same problem with < ui > tag.

[mohdfurkan01]

!1.react-dom.development.js:67 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at chakraProvider 2.react-dom.development.js:67 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. at chakraProvider

What can I do?