Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TagIcon] 'first-child' console error when using TagIcon

See original GitHub issue

Describe the bug When rendering a TagIcon, I get the following console error in the browser:

The pseudo class “:first-child” is potentially unsafe when doing server-side rendering. Try changing it to “:first-of-type”.

Screen Shot 2020-04-19 at 5 01 41 PM

Expected Behavior Expected behavior is to not get a console error.

To Reproduce

Add the following to any app:

<Tag size="md" variantColor="teal">
  <TagIcon icon="add" size="12px" /> // console error goes away if this is removed
  <TagLabel>Follow</TagLabel>
</Tag>

Open console in browser and see error

Suggested solution(s) Would updating emotion version for charka help?

Desktop (please complete the following information):

OS: iOS
Browser: Chrome
Version: v80

Additional context There is some discussion about this error on emotion github: https://github.com/emotion-js/emotion/issues/1178

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:10 (3 by maintainers)

Top GitHub Comments

6reactions

segunadebayocommented, Jul 8, 2020

Hey guys,

We’ve fixed this by deprecating the TagIcon and adding the TagLeftIcon and TagRightIcon components.

We’ll release an update shortly.

1reaction

KevinGomezDevcommented, May 24, 2020

Not totally sure if it’s the best approach but storybook suffered from the same issue some time ago. https://github.com/storybookjs/storybook/issues/6998 https://github.com/storybookjs/storybook/pull/7861/files It’s as simple as disabling the flag here: https://github.com/chakra-ui/chakra-ui/blob/master/packages/chakra-ui/src/Tag/index.js#L85 @segunadebayo @with-heart I can create a PR if you agree

Top Results From Across the Web

RedTitan User Guides EscapeE - convert PCL files

use of information contained in this document or from the use of programs ... the Console notebook for viewing document properties, PCL and...

Oracle Hyperion Smart View for Office, Fusion Edition, User's ...

This software is developed for general use in a variety of information management applications. ... disable the smart tag icon or that instance....

Untitled

Ufx1604 release date, Women's magellan clothing, Castore 42 suspension by ... Izaak celnikier malarz, Decompressive colonoscopy cpt, Tag icon vector, ...

LCMAP_Processing.html · main · lcmap / 2_LCMAP_Process · GitLab

Mozilla scrollbar styling */ /* use standard opaque scrollbars for most nodes ... .bp3-button .bp3-icon:first-child:last-child, .bp3-button .bp3-spinner + ...

Untitled

... window.console&&console.log&&console.log("Error: "+n+" Script: "+t+" ... ;top:-12px}.tag-icon-wrapper{position:absolute;right:0;top:0;background:#fafafa ...