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

qur786 · 2022-04-29T14:56:03Z

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.

The text was updated successfully, but these errors were encountered:

yuzhanglong · 2022-05-04T12:57:31Z

have you fixed it?

veekeys · 2022-05-17T10:30:15Z

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

gregorybolkenstijn · 2022-05-20T12:50:32Z

Getting this on both 6.5.0 and 6.5.3.

tmeasday · 2022-05-24T05:08:51Z

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 · 2022-05-24T07:55:26Z

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

Andarist · 2022-05-24T11:27:52Z

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 · 2022-05-27T13:11:49Z

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

ksielyov · 2022-05-28T18:02:59Z

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 · 2022-05-28T18:14:09Z

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 · 2022-05-30T00:41:42Z

@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 · 2022-05-30T07:23:51Z

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 · 2022-05-30T14:01:37Z

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

Andarist · 2022-06-07T07:14:23Z

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

shilman · 2022-06-07T07:19:32Z

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 · 2022-06-08T18:14:36Z

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 · 2022-06-23T11:13:58Z

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

Andarist · 2022-06-23T11:49:29Z

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 · 2022-06-23T13:24:58Z

@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 · 2022-06-23T23:32:31Z

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

hudochenkov · 2022-07-05T13:18:04Z

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 · 2022-07-06T00:19:38Z

Thanks @hudochenkov!

hudochenkov · 2022-07-06T12:37:50Z

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

tmeasday · 2022-07-07T01:15:54Z

Go for it!

qur786 added bug needs triage labels Apr 29, 2022

shilman added this to the 6.5 stabilization milestone May 20, 2022

shilman assigned tmeasday May 23, 2022

shilman added ui linear and removed needs triage labels May 23, 2022

veekeys mentioned this issue May 23, 2022

feat: Add support of react 18 iTwin/iTwinUI-react#656

Merged

frankieyan mentioned this issue May 23, 2022

chore: Upgrade React@v17 TypeScript@v4.6 Storybook@v6.5 Doist/reactist#661

Merged

12 tasks

jeripeierSBB mentioned this issue May 24, 2022

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. #6998

Closed

Andarist mentioned this issue May 24, 2022

Ignore flag for :first-child is not always detected correctly emotion-js/emotion#2763

Open

shilman mentioned this issue May 26, 2022

:first-child in server-side rendering #18332

Closed

Andarist mentioned this issue May 30, 2022

Turn off Emotion's warnings about potentially unsafe pseudo-selectors in SSR #18361

Merged

3 tasks

tmeasday closed this as completed in #18361 May 31, 2022

shilman reopened this Jun 7, 2022

shilman mentioned this issue Jun 7, 2022

Emotion :first-child console errors: ArgsTable component #18232

Closed

shilman closed this as completed Jun 7, 2022

mnigh mentioned this issue Jun 16, 2022

Storybook - first-child is potentially unsafe. GCTC-NTGC/gc-digital-talent#3062

Closed

hudochenkov mentioned this issue Jul 7, 2022

Console error about server-side rendering on a Docs page #18656

Closed

This was referenced Oct 4, 2022

Feature/1028 workleap/sg-orbit#1029

Closed

🚀 CSS First child is unsafe in SSR workleap/sg-orbit#1028

Closed

hyesungoh mentioned this issue Oct 9, 2022

프로젝트 디테일 SSG 적용 depromeet/www.depromeet.com#168

Merged

tmeasday mentioned this issue Feb 22, 2023

Remove emotion first-child warnings in docs #20730

Closed

nikitaorliak-cengage mentioned this issue Sep 13, 2024

ButtonGroup: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type" cengage/react-magma#905

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

qur786 commented Apr 29, 2022

yuzhanglong commented May 4, 2022

veekeys commented May 17, 2022

gregorybolkenstijn commented May 20, 2022

tmeasday commented May 24, 2022

shilman commented May 24, 2022

Andarist commented May 24, 2022

matthew-dean commented May 27, 2022 •

edited

Loading

ksielyov commented May 28, 2022 •

edited

Loading

Andarist commented May 28, 2022

tianenpang commented May 30, 2022 •

edited

Loading

natBizitza commented May 30, 2022

Andarist commented May 30, 2022

Andarist commented Jun 7, 2022

shilman commented Jun 7, 2022

shilman commented Jun 8, 2022

hudochenkov commented Jun 23, 2022

Andarist commented Jun 23, 2022

hudochenkov commented Jun 23, 2022

tmeasday commented Jun 23, 2022

hudochenkov commented Jul 5, 2022

tmeasday commented Jul 6, 2022

hudochenkov commented Jul 6, 2022

tmeasday commented Jul 7, 2022

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

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

Comments

qur786 commented Apr 29, 2022

yuzhanglong commented May 4, 2022

veekeys commented May 17, 2022

gregorybolkenstijn commented May 20, 2022

tmeasday commented May 24, 2022

shilman commented May 24, 2022

Andarist commented May 24, 2022

matthew-dean commented May 27, 2022 • edited Loading

ksielyov commented May 28, 2022 • edited Loading

Andarist commented May 28, 2022

tianenpang commented May 30, 2022 • edited Loading

natBizitza commented May 30, 2022

Andarist commented May 30, 2022

Andarist commented Jun 7, 2022

shilman commented Jun 7, 2022

shilman commented Jun 8, 2022

hudochenkov commented Jun 23, 2022

Andarist commented Jun 23, 2022

hudochenkov commented Jun 23, 2022

tmeasday commented Jun 23, 2022

hudochenkov commented Jul 5, 2022

tmeasday commented Jul 6, 2022

hudochenkov commented Jul 6, 2022

tmeasday commented Jul 7, 2022

matthew-dean commented May 27, 2022 •

edited

Loading

ksielyov commented May 28, 2022 •

edited

Loading

tianenpang commented May 30, 2022 •

edited

Loading