提问人:Стас Рябцев 提问时间:7/28/2019 最后编辑:Стас Рябцев 更新时间:6/28/2022 访问量:23505
伪类 “: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"
问:
我收到这个错误,虽然项目中没有一行带有:first-child,但为什么会出现?
......................................................................................................................................................................................................................................................
"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"
}
答:
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
评论
node_modules