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

[qur786]

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.

[yuzhanglong]

have you fixed it?

[veekeys]

We are not really doing the server-side rendering. Would it be possible to just suppress it not to flood the console?

[gregorybolkenstijn]

Getting this on both 6.5.0 and 6.5.3.

[tmeasday]

I thought this was a pretty simple problem of someone adding a :first-child without the escape hatch or it could be easily be converted to a :first-of-type, but it seems not. From my debugging the problem comes from (at least) this (existing) line:

storybook/lib/components/src/spaced/Spaced.tsx

Line 30 in 2111919

[`& > *:first-child${ignoreSsrWarning}`]: {

A couple of things to notice:

• We have the comment it there that should disable the warning
• This line has to be a first-child because you can have arbitrary children of a Spaced.

From debugging into the code it really seems like the issue is caused by the escape hatch comment from this PR not working any more. I don't know enough about the internals of emotion to speculate, but the TLDR is that the comment "element" ends up in a different position (the first child of the parent element) to where the code looks for it (the last child of the sibling).

[shilman]

@Andarist is this something you can help with? ☝️

[Andarist]

Based on the linked code I've prepared a minimal repro case and created an Emotion issue: emotion-js/emotion#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

[matthew-dean]

@Andarist The provided link did not fix this issue, unless I'm misunderstanding what "wrap your app" means in Storybook terms.

[ksielyov]

Same with NextJS without emotion

"@storybook/addon-actions": "^6.5.5", "@storybook/addon-essentials": "^6.5.5", "@storybook/addon-interactions": "^6.5.5", "@storybook/addon-links": "^6.5.5", "@storybook/builder-webpack5": "^6.5.5", "@storybook/manager-webpack5": "^6.5.5", "@storybook/react": "^6.5.5", "@storybook/testing-library": "^0.0.11",

[Andarist]

Can somebody share a full repro case of the problem? I'd like to understand the exact context in which you are experiencing this

[tianenpang]

@Andarist I created a repro of this issue without Emotion in github.com/tianenpang/storybookjs-18103 and used :first-child in styled L13-L16 . (repo deleted)

[natBizitza]

Can somebody share a full repro case of the problem? I'd like to understand the exact context in which you are experiencing this

I get this error after creating my first story and deleting default stories.

My package.json:

"dependencies": {
    ...
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "framer-motion": "^4.1.17",
    "react": "^17.0.2",
    "react-scripts": "^4.0.3",
    ...
},

"devDependencies": {
    "@chakra-ui/storybook-addon": "^3.0.2",
    "@storybook/addon-actions": "^6.5.3",
    "@storybook/addon-essentials": "^6.5.3",
    "@storybook/addon-interactions": "^6.5.3",
    "@storybook/addon-links": "^6.5.3",
    "@storybook/addon-storyshots": "^6.5.4",
    "@storybook/builder-webpack4": "^6.5.3",
    "@storybook/manager-webpack4": "^6.5.3",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/react": "^6.5.3",
    "@storybook/testing-library": "0.0.11",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "typescript": "^4.1.0",
    "node-sass": "4.13.1", } 
...

[Andarist]

@tianenpang thank you for the repro - I've created a fix here: #18361

[Andarist]

@shilman I will try to prioritize investigating this in Emotion itself but it can take a moment.

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.8-alpha.0 containing PR #18361 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.8 containing PR #18361 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[hudochenkov]

@shilman @Andarist Unfortunately, 6.5.9 still has this issue when opening any component Docs page.

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[hudochenkov]

@Andarist to reproduce run locally:

npx sb repro --template react_typescript
cd react_typescript
yarn storybook

Open “Button” component and then “Docs” tab:

Created repository https://github.com/hudochenkov/storybook-console-error-18103 (difference from steps above is in repo I used React 17 and npm). But error is the same in both cases.

[tmeasday]

@Andarist perhaps we need add the same wrapper on the preview side?

[hudochenkov]

Shall I create a new ticket or this ticket will be re-opened since issue is not fixed and reproducible with standard Storybook templates?

[tmeasday]

Thanks @hudochenkov!

[hudochenkov]

@tmeasday sorry, I'm confused. Shall I create a new ticket or not? :)

[tmeasday]

Go for it!