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

ringodotnl · 2019-06-06T13:42:40Z

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

To Reproduce
Run the angular demo in this repo and check the console.

Expected behavior
No error log

System:

OS: [Windows10,]
Device: [Desktop]
Browser: [Chrome]
Framework: [angular]
Addons: [all]
Version: [5.1.1 and 5.2.0-alpha.21]

NickSofology · 2019-06-06T14:35:49Z

I have also got this error since upgrading.

magicspon · 2019-06-10T10:49:37Z

I'm also seeing this... except with React.

javidhsueh · 2019-06-10T19:03:30Z

same here with React
Version: SB@v5.1.3

Nightbr · 2019-06-11T13:49:50Z

Same here after upgrading:

    "@storybook/addon-actions": "^5.1.3",
    "@storybook/addon-backgrounds": "^5.1.3",
    "@storybook/addon-knobs": "^5.1.3",
    "@storybook/addon-notes": "^5.1.3",
    "@storybook/html": "^5.1.3",
    "@storybook/theming": "^5.1.3",

B3Kay · 2019-06-12T09:21:28Z

Im also seeing this error with React:

"react": "^16.4.0",
"react-dom": "^16.4.0"

 "@storybook/addon-links": "^5.0.11",
 "@storybook/addon-notes": "^5.0.11",
 "@storybook/addon-storyshots": "^5.0.11",
 "@storybook/addon-storyshots-puppeteer": "^5.0.11",
 "@storybook/addon-storysource": "^5.0.11",
 "@storybook/addons": "^5.0.11",

nmorris2 · 2019-06-12T15:32:51Z

Also seeing the same error with Storybook and Vue after upgrading to 5.1.3.

6thpath · 2019-06-14T00:45:47Z

"@storybook/react" "^5.1.7"

The error still there

HiHiPoBang · 2019-06-14T06:10:20Z

"vue": "^2.6.10"

"@storybook/addon-actions": "^5.1.7",
"@storybook/addon-links": "^5.1.7",
"@storybook/addons": "^5.1.7",
"@storybook/vue": "^5.1.7"

The error is still there after upgrading (v5.1.3 -> v5.1.7)
repo: https://github.com/HiHiPoBang/storybook-demo

shilman · 2019-06-14T06:27:02Z

@HiHiPoBang we'll comment here when the issue is fixed. Or feel free to issue a PR to fix it if you're in a rush! 👍

gms1 · 2019-06-15T03:28:37Z

the upstream bug:
emotion-js/emotion#1105

kon-rad · 2019-06-17T22:48:39Z

same here - react 16.6.3

gabimoncha · 2019-07-02T11:51:06Z

Same here!

 "@storybook/addon-actions": "^5.1.9",
 "@storybook/react": "^5.1.9",

VladimirHumeniuk · 2019-07-05T13:00:13Z

Any updates about this? 🤔

ashnamuh · 2019-07-08T07:20:08Z

I have a same issue on

    "@storybook/addon-actions": "^5.1.9",
    "@storybook/vue": "^5.1.9",

rajkeshwar · 2019-07-10T07:25:00Z

I have same issue on

    "@storybook/addon-actions": "^5.1.9",
    "@storybook/addon-links": "^5.1.9",
    "@storybook/addons": "^5.1.9",
    "@storybook/react": "^5.1.9",

Travilioni · 2019-07-11T12:24:21Z

Only deactivating these addons, resolves issue.
unfortunately we need them.
"@storybook/addon-a11y": "5.1.9", "@storybook/addon-actions": "5.1.9", "@storybook/addon-knobs": "5.1.9",

omrilotan · 2019-07-16T08:42:42Z

The reason for this error has to do with <style> elements being added inline in the DOM when doing SSR.
It seems to me that the recommendation is a good one. Using :first-of-type will resolve this.

Other, more generic alternative may be:

& > :first-child:not(style), & > style:first-child + * {

leetercola · 2019-07-18T15:14:33Z

& > :first-child:not(style), & > style:first-child + * {

@omrilotan
Can you explain how this is any better and would stop the warning as it still uses first-child?

omrilotan · 2019-07-18T15:20:01Z

@leetercola :
& > :first-child:not(style), & > style:first-child + * {
Can you explain how this is any better and would stop the warning as it still uses first-child?

Of course. This selector is made up of two parts:

& > :first-child:not(style) The first child unless it is a style tag
& > style:first-child + * The adjacent sibling immediate following a first element which is a style tag

Thus covering both options.

<parent>
	<style/>
	<child/> <!-- this one -->
	<other-child/>
</parent>

<parent>
	<child/> <!-- this one -->
	<other-child/>
</parent>

Haroenv · 2019-07-23T11:51:48Z

IIRC the css to change is here:

storybook/lib/components/src/tabs/tabs.tsx

Line 76 in 81e3996

'& > *:first-child': {

lsebastiankellner · 2022-05-23T23:10:02Z

Same here after upgrading to 6.5.4 :(

jeripeierSBB · 2022-05-24T06:56:22Z

See #18103

vdh · 2022-05-25T06:11:13Z

For anyone else wanting to hack this annoyance away with a yarn patch, I found it hiding away inside @storybook/theming.

antsukanova · 2022-05-30T13:51:39Z

Same here at 6.5.6 as well

rv7918 · 2022-06-03T23:08:50Z

6.5.6 also.

fivaz · 2022-06-04T22:36:50Z

the same with storybook/react 6.5.5

lukePeavey · 2022-06-05T03:03:02Z

@vdh could you explain what you mean by this?

For anyone else wanting to hack this annoyance away with a yarn patch, I found it hiding away inside @storybook/theming

euaaaio · 2022-06-05T11:37:04Z

The same

xxxKOTxxx · 2022-06-06T16:44:59Z

6.5.7 - same problem
Anybody cares?

calidan-x · 2022-06-08T01:29:16Z

6.5.7 - same problem

vdh · 2022-06-10T00:23:16Z

@lukePeavey

@vdh could you explain what you mean by this?

For anyone else wanting to hack this annoyance away with a yarn patch, I found it hiding away inside @storybook/theming

createUnsafeSelectorsAlarm inside @storybook/theming is what is generating this log spam. It can be patched away via Yarn (yarn patch @storybook/theming) and this patch:

diff --git a/dist/cjs/index.js b/dist/cjs/index.js
index 1b8b61eac2d191f1a8e1421a57d2738b37d06937..9137b52c3b624ccc3ac980799785da12f1c93ff9 100644
--- a/dist/cjs/index.js
+++ b/dist/cjs/index.js
@@ -1396,15 +1396,6 @@ var createCache = function createCache(options) {
 
   var omnipresentPlugins = [compat, removeLabel];
 
-  if (process.env.NODE_ENV !== 'production') {
-    omnipresentPlugins.push(createUnsafeSelectorsAlarm({
-      get compat() {
-        return cache.compat;
-      }
-
-    }), incorrectImportAlarm);
-  }
-
   if (isBrowser$6) {
     var currentSheet;
     var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {
diff --git a/dist/esm/index.js b/dist/esm/index.js
index e7b796a97d657ea711285724a54b40d4c4e06ccf..f65669abd258db602d3d9e32e9b70d7f9002ebda 100644
--- a/dist/esm/index.js
+++ b/dist/esm/index.js
@@ -1445,15 +1445,6 @@ var createCache = function createCache(options) {
 
   var omnipresentPlugins = [compat, removeLabel];
 
-  if (process.env.NODE_ENV !== 'production') {
-    omnipresentPlugins.push(createUnsafeSelectorsAlarm({
-      get compat() {
-        return cache.compat;
-      }
-
-    }), incorrectImportAlarm);
-  }
-
   if (isBrowser$6) {
     var currentSheet;
     var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {
diff --git a/dist/modern/index.js b/dist/modern/index.js
index 4006f0846b2711d82fef0cad026814307192ba98..f6b2b560e3a708a18830bd2c9139b7f4a622cf33 100644
--- a/dist/modern/index.js
+++ b/dist/modern/index.js
@@ -1366,15 +1366,6 @@ var createCache = function createCache(options) {
 
   var omnipresentPlugins = [compat, removeLabel];
 
-  if (process.env.NODE_ENV !== 'production') {
-    omnipresentPlugins.push(createUnsafeSelectorsAlarm({
-      get compat() {
-        return cache.compat;
-      }
-
-    }), incorrectImportAlarm);
-  }
-
   if (isBrowser$6) {
     var currentSheet;
     var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {

shilman · 2022-06-10T03:04:07Z

Please try upgrading to the latest release https://github.com/storybookjs/storybook/releases/tag/v6.5.8

npx storybook upgrade

Does that fix it?

xxxKOTxxx · 2022-06-10T05:04:32Z

Does that fix it?

For me - yes!
Thank You!

rv7918 · 2022-06-10T10:26:05Z

The console error has gone after upgrading to 6.5.8 for me. also.

BiancaArtola · 2022-06-10T12:50:47Z

That works for me! Thanks

shilman · 2022-06-10T12:59:38Z

Huge props to @Andarist 🙌

lukePeavey · 2022-06-11T05:42:35Z

@vdh thank you for the explanation!

Upgrading to v6.5.8 resolved the issue for me.

Fixes several annoying console errors in storybook. storybookjs/storybook#6998

katsenkatorz · 2022-06-14T09:46:38Z

Upgrading to v6.5.9 it's work for me thanks @shilman

antsukanova · 2022-07-12T11:31:58Z

Upgrading to v6.5.9 doesn't work for me

still, there is a message in the browser console

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

charleshimmer · 2022-07-20T19:52:47Z

Upgrading to v6.5.9 does not work for me as well.

antsukanova · 2022-08-05T12:55:25Z

Upgrading to v6.5.10 doesn't work for me

scrptd95 · 2022-12-16T14:44:17Z

Also comes up in v6.5.14. Any solutions for the issue ?

ScorpAL · 2022-12-21T17:46:01Z

Also comes up in v6.5.15

RobineSavert · 2023-01-13T14:54:36Z

Any updates on this? We have the same error...

krakadet · 2023-03-16T05:58:50Z

The same error at storybook 7

idMolotov · 2023-04-11T04:28:42Z

Also appears in v6.5.16

shilman added bug ui labels Jun 6, 2019

shilman added this to the 5.1.x milestone Jun 6, 2019

shilman added good first issue help wanted labels Jun 6, 2019

yasharzolmajdi mentioned this issue Jun 7, 2019

6998: fix for the pseudo class ":first-child" is potentially unsafe #7000

Closed

Bopchy mentioned this issue Jul 10, 2019

Psammead storybook prop types warnings bbc/psammead#754

Closed

adamdoyle mentioned this issue Jul 11, 2019

Fresh Angular + Storybook alpha.38 installation throws warnings #7355

Closed

andrew-nowak mentioned this issue Jul 25, 2019

Multiple console errors when viewing components in Storybook bbc/simorgh#2711

Closed

horacioh mentioned this issue Aug 1, 2019

CSS-in-JS Attempt v2 henrybuilt/react-sticky-table#73

Merged

jcfilben mentioned this issue Jun 7, 2022

Upgrade dependencies post v2.24.0 release grommet/grommet#6166

Merged

4 tasks

dierat mentioned this issue Jun 10, 2022

chore: upgrade storybook to v6.5.8 chanzuckerberg/edu-design-system#1124

Merged

lukePeavey added a commit to lukePeavey/SplitType that referenced this issue Jun 11, 2022

chore: upgrade storybook packages

552a227

Fixes several annoying console errors in storybook. storybookjs/storybook#6998

mnigh mentioned this issue Jun 16, 2022

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

Closed

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

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

Comments

ringodotnl commented Jun 6, 2019 • edited

NickSofology commented Jun 6, 2019

magicspon commented Jun 10, 2019

javidhsueh commented Jun 10, 2019

Nightbr commented Jun 11, 2019

B3Kay commented Jun 12, 2019

nmorris2 commented Jun 12, 2019

6thpath commented Jun 14, 2019

HiHiPoBang commented Jun 14, 2019

shilman commented Jun 14, 2019

gms1 commented Jun 15, 2019

kon-rad commented Jun 17, 2019

gabimoncha commented Jul 2, 2019

VladimirHumeniuk commented Jul 5, 2019

ashnamuh commented Jul 8, 2019

rajkeshwar commented Jul 10, 2019

Travilioni commented Jul 11, 2019

omrilotan commented Jul 16, 2019 • edited

leetercola commented Jul 18, 2019

omrilotan commented Jul 18, 2019 • edited

Haroenv commented Jul 23, 2019

lsebastiankellner commented May 23, 2022

jeripeierSBB commented May 24, 2022

vdh commented May 25, 2022

antsukanova commented May 30, 2022

rv7918 commented Jun 3, 2022

fivaz commented Jun 4, 2022

lukePeavey commented Jun 5, 2022

euaaaio commented Jun 5, 2022 • edited

xxxKOTxxx commented Jun 6, 2022

calidan-x commented Jun 8, 2022

vdh commented Jun 10, 2022 • edited

shilman commented Jun 10, 2022

xxxKOTxxx commented Jun 10, 2022 • edited

rv7918 commented Jun 10, 2022

BiancaArtola commented Jun 10, 2022 • edited

shilman commented Jun 10, 2022

lukePeavey commented Jun 11, 2022

katsenkatorz commented Jun 14, 2022

antsukanova commented Jul 12, 2022

charleshimmer commented Jul 20, 2022

antsukanova commented Aug 5, 2022

scrptd95 commented Dec 16, 2022

ScorpAL commented Dec 21, 2022 • edited

RobineSavert commented Jan 13, 2023

krakadet commented Mar 16, 2023

idMolotov commented Apr 11, 2023

ringodotnl commented Jun 6, 2019 •

edited

omrilotan commented Jul 16, 2019 •

edited

omrilotan commented Jul 18, 2019 •

edited

euaaaio commented Jun 5, 2022 •

edited

vdh commented Jun 10, 2022 •

edited

xxxKOTxxx commented Jun 10, 2022 •

edited

BiancaArtola commented Jun 10, 2022 •

edited

ScorpAL commented Dec 21, 2022 •

edited