那些遇到过的问题

安装 Storybook 6.5.13 时出现冲突的对等依赖关系 React@17.0.2

Dat*_* Vu 7 dependencies npm reactjs npm-install storybook

这是我的 package.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/**"
        ]
    }
Run Code Online (Sandbox Code Playgroud)

当我运行 npm install 时，这是我得到的：

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.
Run Code Online (Sandbox Code Playgroud)

在这个阶段，它并不是真正的拦截器，我仍然可以运行我的应用程序和故事书，但我们也不能忽视它。我发现很奇怪的是，Storybook 网站说它与react@18.x 兼容，但它显示了与react@17.0.2 的对等依赖。

我尝试过以下方法：

  1. 将 npm 从 8.x 降级到 7.x，对等依赖冲突消失了，只是对已弃用的软件包发出一些警告，但这并不理想，因为这意味着我们必须继续使用旧版本的 npm。

  2. 将 React 降级到 17.0.2，但出现了更严重的依赖错误，并且继续前进，我们需要确保始终拥有最新的功能和修复，因此这也并不理想。

  3. 使用将 Storybook 升级到 7.0.0-alpha npx sb@next upgrade --prerelease，最初似乎没问题，因为我在安装过程中没有出现对等依赖冲突，只有一些已弃用的警告，但是当我运行 Storybook 时，我遇到了一大堆错误，故事书无法开始。所以，也不工作。

我需要指出，我并不热衷于使用 --force 或 --legacy-peer-deps。我们使用 TeamCity 进行 CI/CD，因此理想情况下，我们不必在每次运行作业时进行任何手动安装作为解决方法。

谢谢 ：）

小智 0

你用过这些线吗？

cd my-app
npx sb init
Run Code Online (Sandbox Code Playgroud)

My-app 应该是您的项目名称。

  • 是的，我用它来初始化故事书，但问题是，当有人提取更新的 package.json 并运行 npm install 时，或者当 CI/CD 管道运行时，您将收到冲突的对等依赖项警告，这就是我想要的解决。 (2认同)

归档时间：

查看次数：

2252 次

最近记录：

2 年，11 月 前
相关归档
如何正确使用react-router-dom中的useHistory()？ 40
为什么不应该使用componentWillMount？ 25
如何在AppBar标题材料中应用不同的颜色-ui 16
使用create-react-app创建新的React组件的最佳方法 13
NPM 模块画布是使用 NODE_MODULE_VERSION 88 针对不同的 Node.js 版本编译的 11
在后端使用 firebase + spring 登录 9
检测.NET Framework 3.5 SP1依赖性(cmp.3.5 w/o SP1) 5
Node.js 应用程序中出现“EACCES”错误 4
如何暂时禁用 apt 代理设置以安装软件包 2
循环类引用不好的做法？ 0
难疑归档
我遇到了合并冲突.我怎样才能中止合并？ 2391
Spring中的@ Component,@ Repository和@Service注释有什么区别？ 1969
ListView中的图像延迟加载 1881
JavaScript中的'new'关键字是什么？ 1684
如何确定Python变量的类型？ 1437
如何在Linux shell脚本中提示是/否/取消输入？ 1352
如何从GET参数中获取值？ 1255
如何在不使用存储库的情况下将Docker镜像从一个主机复制到另一个主机 1181
获取数据库中所有表的大小 1180
如何从Python字符串中修剪空格？ 1103