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

[ringodotnl]

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]

I have also got this error since upgrading.

[magicspon]

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

[javidhsueh]

same here with React
Version: [email protected]

[Nightbr]

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]

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]

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

[lPaths]

"@storybook/react" "^5.1.7"

The error still there

[HiHiPoBang]

"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]

@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]

the upstream bug:
https://github.com/emotion-js/emotion/issues/1105

[kon-rad]

same here - react 16.6.3

[gabrielmoncea]

Same here!

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

[VladimirHumeniuk]

Any updates about this? 🤔

[ashnamuh]

I have a same issue on

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

[rajkeshwar]

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]

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]

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]

& > :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]

@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:

1. & > :first-child:not(style) The first child unless it is a style tag
2. & > 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]

IIRC the css to change is here: https://github.com/storybookjs/storybook/blob/81e399648ba65006130768bac6890517ca5b3091/lib/components/src/tabs/tabs.tsx#L76

[gmotzespina]

I got the same error while doing the following,

npx -p @angular/cli ng new my-app --style css
cd my-app

# Add Storybook:
npx -p @storybook/cli sb init

# Run the test runner (Karma) in a terminal (we will add Jest along the way):
yarn test

# Start the component explorer on port 6006:
yarn run storybook

# Run the frontend app proper on port 4200:
yarn start

Error

Can't resolve all parameters for AppComponent: (?, ?, [object Object]).
Error: Can't resolve all parameters for AppComponent: (?, ?, [object Object]).
    at syntaxError (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:9483:17)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:28502:35)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:28394:26)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:28013:24)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:28598:28)
    at http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:28257:163
    at Array.map (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:28257:128)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:34297:51)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (http://localhost:6006/vendors~main.3bd8b3ded11253e53459.bundle.js:34278:36)

[BerQin]

在执行以下操作时，我遇到了同样的错误，

npx -p @angular/cli ng new my-app --style css
cd my-app

# Add Storybook:
npx -p @storybook/cli sb init

# Run the test runner (Karma) in a terminal (we will add Jest along the way):
yarn test

# Start the component explorer on port 6006:
yarn run storybook

# Run the frontend app proper on port 4200:
yarn start

错误

可以'牛逼解析AppComponent所有参数：（？，[目标对象]）。
错误：“牛逼解决所有的参数为 AppComponent：（ ？ ，？ ，[目标对象]）。
    at syntaxError（http：// localhost：6006 / vendors~main.3bd8b3ded11253e53459.bundle.js：9483：17）
    at CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata（http） ：// localhost：6006 / vendors~main.3bd8b3ded11253e53459.bundle.js：28502：35）
    at CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata（http：// localhost） ：6006 /厂商〜main.3bd8b3ded11253e53459.bundle.js：28394：26）
    在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata（HTTP：//本地主机：6006 /厂商〜main.3bd8b3ded11253e53459.bundle.js：28013：24）
    在CompileMetadataResolver.push ../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata（http：// localhost：6006 / vendors~main.3bd8b3ded11253e53459.bundle.js：28598：28）
    位于http：// localhost：6006 /vendors~main.3bd8b3ded11253e53459.bundle.js:28257:163 
    在Array.map（< anonymous >）
    在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata（HTTP：//本地主机：6006 /厂商〜main.3bd8b3ded11253e53459.bundle.js：28257：128）
    在JitCompiler.push ../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules（http：// localhost：6006 / vendors~main.3bd8b3ded11253e53459.bundle.js：34297：51）
    at JitCompiler.push ../ node_modules /@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents(http://hosthost：6006 / vendors~main.3bd8b3ded11253e53459.bundle.js：34278：36）

I met the same mistake,How to solve

[RDUBPhoto]

Getting the exact same errors as mentioned:

"@angular-devkit/build-angular": "~0.802.0",
"@angular/cli": "~8.2.0",  
"@angular/compiler-cli": "~8.2.0",  
"@angular/language-service": "~8.2.0",  
"@babel/core": "^7.5.5",  
"@storybook/addon-actions": "^5.1.10",  
"@storybook/addon-info": "^5.1.10",  
"@storybook/addon-links": "^5.1.10",  
"@storybook/addon-notes": "^5.1.10",  
"@storybook/addons": "^5.1.10",  
"@storybook/angular": "^5.1.10", 

vendors~main.5d83abd61dceb2c27289.bundle.js:617 The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". (anonymous) @ vendors~main.5d83abd61dceb2c27289.bundle.js:617

Has anyone found a solution yet?

[brandonkal]

For those who want a quick and dirty fix, save this snippet as preview-head.html and manager-head.html in your storybook directory.

<script>
  // Clean console hack for Storybook by @brandonkal
  // emotion leaves some pesky console warnings in Storybook.
  // Let's hide those as we are not using emotion.
  // define a new console
  let change = (function(oldCons) {
    function shouldIgnore(text) {
      let all = text.join(' ')
      return (
        all.includes('":first-child" is potentially unsafe') ||
        all.includes('Please update the following components: Draggable')
      )
    }
    window.console.log = (...text) => {
      if (shouldIgnore) return
      return oldCons.log(...text)
    }
    window.console.info = (...text) => {
      if (shouldIgnore) return
      return oldCons.info(...text)
    }
    window.console.warn = (...text) => {
      if (shouldIgnore) return
      return oldCons.warn(...text)
    }
    window.console.error = (...text) => {
      if (shouldIgnore) return
      return oldCons.error(...text)
    }
  })(window.console)
</script>

[ghost]

In "5.1.11" still reproducible

[pelotom]

For those who want a quick and dirty fix, save this snippet as preview-head.html and manager-head.html in your storybook directory.

Buyer beware, this code has at least 3 problems:

1. if (shouldIgnore) will always succeed, so you're effectively silencing all logs. Should be if (shouldIgnore(...text))
2. If you fix the previous bug you'll now have a stack overflow when logging happens because oldCons is just a reference to window.console
3. This will not work in older browsers because it uses String.includes, arrow functions and array spreads.

This is my fixed up version:

['log', 'info', 'warn', 'error'].forEach(function (methodName) {
  var oldMethod = window.console[methodName];
  window.console[methodName] = function () {
    var all = Array.from(arguments).join(' ');
    if (
      all.indexOf('":first-child" is potentially unsafe') >= 0 ||
      all.indexOf('Please update the following components: Draggable') >= 0
    ) return;
    oldMethod.apply(window.console, arguments);
  };
});

Also I believe this should only be necessary in manager-head.html, not preview-head.html.

[brandonkal]

Oh yes. Good catch on point 1. Thank you.
Interestingly, logs were still getting through. You'd have to go pretty far back to find a browser that doesn't support String.includes or ES6.

[pelotom]

You'd have to go pretty far back to find a browser that doesn't support String.includes or ES6.

IE11 support is still a requirement for many of us.

[brandonkal]

IE11 support is still a requirement for many of us.

I pity the developer that develops his components with a 6 year old browser. 😃

IE likely won't die for another 8 years which is a shame. But I understand it is the current lowest denominator target.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.41 containing PR #7861 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

[Yaowenjie]

@shilman the version including the fix is still pre-release, and is still not included in the latest release version (v5.3.13). Do you know when it will come into the new formal release?

[shilman]

@Yaowenjie 5.2 was released months ago. Did #7861 not fix the problem? Or did it regress at some point between 5.2.0-beta.41 and 5.3.13?

[Yaowenjie]

@shilman Thanks for reply! I didn't check 5.2, but with 5.3.13, the warning is still there.

[dgellow]

Using "@storybook/react": "^5.3.17", I can confirm I still get the error.

[datdotatprotocol]

The error still exists when using "@storybook/react": "^5.3.18" and "@storybook/addon-docs": "^5.3.18".
The error is shown when using CSF Stories with MDX Docs.

Detailed steps:

• Import Props from addon-docs.

• Put <Props of={Component} /> into the code.

• Hovering on Component item and the error is shown.

_Notice:_ Without <Props of={Component} />, the error will not appear.

[charleshimmer]

I get this error on "@storybook/react": "^5.3.18" as well.

[vnues]

Any updates about this? 🤔

[jmadelaine]

The problem is that Emotion's SSR sometimes injects a style element as the first child, therefore the :first-child selector refers to the style element instead of the element we intend.

You can get around this by applying style to all children, and then unsetting that style by applying style to all children _except_ the first child that isn't a style element:

.parent > * {
  /* 1. Styling all children with the style we want for the first element */
}

.parent > *:not(style) + * {
  /* 2. Unset style applied to all children. */
  /* This effects all children except the first child (that isn't a style element) */
}

This will leave only the first (non-style element) child with the style from step 1.

In my case, I wanted to add margin-top to all children except the first child, so I only had to do step 2:

/* All children except the first child (not including style elements) get a margin-top */
.parent > *:not(style) + * {
  margin-top: 16px
}

Obviously this doesn't work if there are style elements found part way through the child array, but that's something I've never seen before.