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.

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

See original GitHub issue

Describe the bug When running the storybook, I am getting this warning in my browser console he pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

To Reproduce I had installed and setup storybook in my react app with sb command line tool and after that I upgraded all the addons related dependency to its latest Beta version. Running the storybook is showing the above warning in the console.

System “@storybook/addon-actions”: “^6.5.0-beta.1”, “@storybook/addon-essentials”: “^6.5.0-beta.1”, “@storybook/addon-interactions”: “^6.5.0-beta.1”, “@storybook/addon-links”: “^6.5.0-beta.1”, “@storybook/builder-webpack5”: “^6.5.0-beta.1”, “@storybook/manager-webpack5”: “^6.5.0-beta.1”, “@storybook/react”: “^6.5.0-beta.1”, “@storybook/testing-library”: “^0.0.11”,

Additional context Add any other context about the problem here.

Issue Analytics

State:
Created a year ago
Reactions:28
Comments:23 (12 by maintainers)

Top GitHub Comments

4reactions

Andaristcommented, May 24, 2022

Based on the linked code I’ve prepared a minimal repro case and created an Emotion issue: https://github.com/emotion-js/emotion/issues/2763

Emotion 11 has upgraded Sylis to v4 (parser) and it changed how it keeps comments in the generated AST (which can happen with a lot of AST parsers as comments have no clear semantic meaning and attaching them to correct nodes is purely driven by heuristics). That is likely what has changed and why this isn’t working for you anymore.

I will take a look into this to see if I can fix this in Emotion itself but it might take me some time to get to it. If this problem happens in the fully client-rendered Storybook then as a future-proof workaround you can disable this warning altogether. Just wrap your app with CacheProvider and set .compat = true on the configured cache. An example of that can be found here: https://github.com/storybookjs/frontpage/blob/4a1d08c8bb70eaa77a823ac67423e40ce0970dfc/gatsby-browser.js#L24

4reactions

gregorybolkenstijncommented, May 20, 2022

Getting this on both 6.5.0 and 6.5.3.

Top Results From Across the Web

The pseudo class ":first-child" is potentially unsafe when doing ...

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type" · Ask Question.

Frontend Handbook | React / Common SSR errors - Infinum

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

The Pseudo Class ":First-Child" Is Potentially Unsafe When ...

Describe the bug At the console: The pseudo class :firstchild is potentially unsafe when doing serverside rendering. Try changing it to :firstoftype. CSS...

Bootstrap: The pseudo class “: first child” is potentially ...

Bootstrap: The pseudo class “: first child” is potentially insecure when processed on the server side. Try changing it to “: first type”....

The pseudo class ":first-child" is potentially unsafe when doing ...

[Solved]-The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"-Reactjs.