这是我的包.json
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@fontsource/roboto": "^4.5.8",
"@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.10",
"@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.2.0",
"@types/node": "^18.11.4",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"async-mutex": "^0.4.0",
"boring-avatars": "^1.7.0",
"crypto-js": "^4.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.38.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"typescript": "^4.8.4",
"web-vitals": "^3.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"eslint": "eslint "src/**/*.{tsx,jsx,ts,js}"",
"eslint:fix": "npm run eslint -- --fix",
"eslint:teamcity": "npm run eslint -- --format teamcity",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"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": "^6.5.13",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-interactions": "^6.5.13",
"@storybook/addon-links": "^6.5.13",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/node-logger": "^6.5.13",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.13",
"@storybook/testing-library": "^0.0.13",
"@types/crypto-js": "^4.1.1",
"@typescript-eslint/eslint-plugin": "^5.40.1",
"@typescript-eslint/parser": "^5.40.1",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^8.26.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-formatter-teamcity": "^1.0.0",
"eslint-plugin-prettier": "^4.2.1",
"jest-teamcity": "^1.11.0",
"prettier": "^2.7.1",
"prop-types": "^15.8.1",
"webpack": "^5.74.0"
},
"jest": {
"coverageReporters": [
"json-summary",
"lcov",
"text",
"teamcity"
],
"collectCoverageFrom": [
"src/**/*.{ts,tsx,js,jsx}",
"!src/index.{jsx,tsx}",
"!src/**/interfaces/**",
"!src/serviceWorker.ts",
"!src/react-app-env.d.ts",
"!src/mocks/browserWorker.ts",
"!src/mocks/**"
]
}
当我运行npm安装时，我得到的是：
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-inspector@5.1.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN react@"^18.2.0" from the root project
npm WARN 53 more (@design-systems/utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.13
npm WARN node_modules/@storybook/addon-actions
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.13
npm WARN node_modules/@storybook/addon-actions
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/react@1.6.22
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN react@"^18.2.0" from the root project
npm WARN 53 more (@design-systems/utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN node_modules/@storybook/addon-docs/node_modules/@mdx-js/react
npm WARN @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.13
npm WARN node_modules/@storybook/addon-docs
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN node_modules/@storybook/addon-docs/node_modules/@mdx-js/react
npm WARN @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.13
npm WARN node_modules/@storybook/addon-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN react@"^18.2.0" from the root project
npm WARN 53 more (@design-systems/utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.13
npm WARN node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.13
npm WARN node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN react-dom@"^18.2.0" from the root project
npm WARN 36 more (@design-systems/utils, @mui/base, @mui/material, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.13
npm WARN node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.13
npm WARN node_modules/@storybook/react
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
在这个阶段，它并不是一个真正的拦截器，我仍然可以运行我的应用程序和故事书，但我们也不能忽视它。我觉得奇怪的是，故事书网站说它与react@18.x但它显示出与react@17.0.2.
我试过以下几种：
将npm从8.x降级到7.x，对等依赖冲突消失了，只是对不推荐使用的包发出了一些警告，但这并不理想，因为这意味着我们将不得不继续使用旧版本的npm。
降级对17.0.2做出了反应，但出现了更严重的依赖性错误，接下来我们需要确保始终具有最新的功能和修复程序，因此这也不理想。
使用
npx sb@next upgrade --prerelease将故事书升级到7.0.0阿尔法，最初看起来还可以，因为我在安装过程中没有对等依赖关系冲突，只是一些不推荐使用的警告，但我一运行故事书就遇到了一大堆错误，故事书就无法启动。所以，也不起作用。
我需要指出的是，我并不热衷于使用--force或--legacy peer deps。我们使用TeamCity进行CI/CD，因此理想情况下，我们不必每次运行作业时都进行任何手动安装作为解决方法。
谢谢：(
你用过这些行吗？
cd my-app
npx sb init
我的应用程序应该是你的项目名称。