伪类 “:first-child” 在执行服务器端渲染时可能不安全。尝试将其更改为“:first-of-type”

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

提问人:Стас Рябцев 提问时间:7/28/2019 最后编辑:Стас Рябцев 更新时间:6/28/2022 访问量:23505

问:

我收到这个错误,虽然项目中没有一行带有:first-child,但为什么会出现?enter image description here

......................................................................................................................................................................................................................................................

 "dependencies": {
    "@storybook/addon-a11y": "^5.1.9",
    "@trendmicro/react-popover": "^0.4.0",
    "@types/classnames": "^2.2.9",
    "@types/jest": "24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "16.8.18",
    "@types/react-dom": "16.8.4",
    "@types/react-modal": "^3.8.2",
    "@types/storybook__addon-a11y": "^5.0.0",
    "@types/storybook__addon-actions": "^3.4.3",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-knobs": "^5.0.0",
    "@types/storybook__react": "4.0.1",
    "@types/styled-components": "4.1.15",
    "classnames": "^2.2.6",
    "grommet": "^2.7.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-modal": "^3.9.1",
    "react-scripts": "3.0.1",
    "react-toastify": "^5.3.2",
    "styled-components": "^4.2.0",
    "typescript": "^3.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook",
    "build-storybook": "build-storybook -c .storybook -o .out",
    "lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose",
    "tslint-check": "tslint-config-prettier-check ./tslint.json",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "{src,test}/**/*.{ts,tsx}": [
      "prettier --write",
      "git add"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "5.1.9",
    "@storybook/addon-info": "^5.1.9",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/addon-links": "5.1.9",
    "@storybook/addon-storysource": "^5.1.9",
    "@storybook/addons": "5.1.9",
    "@storybook/core-events": "latest",
    "@storybook/react": "5.1.9",
    "@storybook/theming": "latest",
    "husky": "^3.0.0",
    "lint-staged": "^9.1.0",
    "react-docgen-typescript-loader": "3.1.0",
    "react-docgen-typescript-webpack-plugin": "1.1.0",
    "storybook-addon-styled-component-theme": "^1.2.3",
    "ts-loader": "^6.0.4",
    "tslint": "^5.18.0",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^4.0.0"
  }
CSS ReactJS 服务器端 渲染 Storybook

评论

0赞 Aprillion 7/28/2019
它可能来自其中一个依赖项,请尝试在里面搜索node_modules
0赞 Стас Рябцев 7/28/2019
但是如果我需要这个模块,我无法摆脱这个错误?
0赞 keul 7/28/2019
我很确定这只会在开发模式下记录。你可以忽略它
0赞 Стас Рябцев 7/28/2019
我需要从控制台中删除所有错误,我只是不能忽略=(
3赞 Chris Haines 10/27/2020
警告来自 @emotion,它是 Storybook 的依赖项。如果你不做 SSR,你可以安全地忽略它,但我同意这很烦人。

答:

26赞 Jannis Hell 2/10/2021 #1

这来自@emotion通过故事书 - 因为情感(通过JavaScript创建CSS)有时会在开始时注入一个元素 - 这将使它成为第一个子元素并破坏你的CSS。 如今,大多数浏览器都支持它,并且可以在许多情况下交替使用。<style>first-of-type

现在,既然你说你实际上没有第一个子伪选择器的行,那么很可能是故事书本身使用了“不安全”的 CSS 规则。

0赞 Philzen 6/28/2022 #2

这似乎是故事书的一个众所周知的问题

尝试升级到 - 该问题应从该版本开始修复。>= 6.5.8

评论

3赞 Sjoerd Van Den Berg 7/19/2022
我在 storybook 6.5.9 上并遇到此错误。似乎他们已经重新引入了它:github.com/storybookjs/storybook/issues/18656