NPM Next / React包依赖冲突

mfuanj7w  于 2023-08-06  发布在  React
关注(0)|答案(1)|浏览(137)

我知道这与React / React-DOM package dependency conflict有关,但我在那里找到的解决方案并没有真正帮助我。
在安装/更新依赖项或将我的Next.js应用部署到Vercel时,我会遇到以下一些错误:

  1. npm ERR! code ERESOLVE
  2. npm ERR! ERESOLVE could not resolve
  3. npm ERR!
  4. npm ERR! While resolving: use-ackee@3.0.1
  5. npm ERR! Found: react@18.2.0
  6. npm ERR! node_modules/react
  7. npm ERR! react@"^18.2.0" from the root project
  8. npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
  9. npm ERR! node_modules/@testing-library/react
  10. npm ERR! @testing-library/react@"^13.4.0" from the root project
  11. npm ERR! 5 more (next, react-dom, react-helmet, react-side-effect, styled-jsx)
  12. npm ERR!
  13. npm ERR! Could not resolve dependency:
  14. npm ERR! peer react@"^17.0.0" from use-ackee@3.0.1
  15. npm ERR! node_modules/use-ackee
  16. npm ERR! use-ackee@"^3.0.1" from the root project
  17. npm ERR!
  18. npm ERR! Conflicting peer dependency: react@17.0.2
  19. npm ERR! node_modules/react
  20. npm ERR! peer react@"^17.0.0" from use-ackee@3.0.1
  21. npm ERR! node_modules/use-ackee
  22. npm ERR! use-ackee@"^3.0.1" from the root project
  23. npm ERR!
  24. npm ERR! Fix the upstream dependency conflict, or retry
  25. npm ERR! this command with --force, or --legacy-peer-deps
  26. npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
  27. npm ERR!

字符串
我的package.json看起来像这样:

  1. "dependencies": {
  2. "@testing-library/jest-dom": "^5.16.5",
  3. "@testing-library/react": "^13.4.0",
  4. "@testing-library/user-event": "^13.5.0",
  5. "next": "^13.1.6",
  6. "react": "^18.2.0",
  7. "react-dom": "^18.2.0",
  8. "react-helmet": "^6.1.0",
  9. "sass": "^1.58.0",
  10. "use-ackee": "^3.0.1",
  11. "web-vitals": "^2.1.4"
  12. },


我完全知道我可以只使用--force--legacy-peer-deps,一切都很好,但这似乎并不真正稳定。
我到底在处理什么问题?我能做些什么来解决这些冲突?

8qgya5xd

8qgya5xd1#

让我们检查use-ackee@3.0.1包的对等依赖关系。

  1. $ npm view use-ackee@3.0.1 peerDependencies
  2. { react: '^17.0.0' }

字符串
正如您所看到的,use-ackee包需要react包作为其与^17.0.0版本的对等依赖项。但是在您的项目中,安装的react版本是^18.2.0。所以我才警告你。
因此,一个安全的解决方案是将react包降级为^17.0.0

  1. $ npm i react@^17.0.0 react-dom@^17.0.0 -S


通常,请小心运行npm install <package>--force,或--legacy-peer-deps选项,它会导致潜在的破坏。相反,我们应该修复依赖包之间的版本兼容性问题。
这里还提到#legacy-peer-deps
不建议使用legacy-peer-deps,因为它不会强制执行元依赖可能依赖的peerDependencies契约。
但如果您事先确认运行时代码兼容,则可以使用--force--legacy-peer-deps选项。让我们看看use-ackee@3.0.1包的source code

  1. const { useMemo, useEffect } = require('react')
  2. const ackeeTracker = require('ackee-tracker')
  3. const isBrowser = typeof window !== 'undefined'
  4. /**
  5. * Use Ackee in React.
  6. * Creates an instance once and a new record every time the pathname changes.
  7. * Safely no-ops during server-side rendering.
  8. * @param {?String} pathname - Current path.
  9. * @param {Object} environment - Object containing the URL of the Ackee server and the domain id.
  10. * @param {?Object} options - Ackee options.
  11. */
  12. const useAckee = function(pathname, environment, options = {}) {
  13. const instance = useMemo(() => {
  14. if (isBrowser === false) return
  15. return ackeeTracker.create(environment.server, options)
  16. }, [ environment.server, options.detailed, options.ignoreLocalhost, options.ignoreOwnVisits ])
  17. useEffect(() => {
  18. if (instance == null) {
  19. console.warn('Skipped record creation because useAckee has been called in a non-browser environment')
  20. return
  21. }
  22. const hasPathname = (
  23. pathname != null &&
  24. pathname !== ''
  25. )
  26. if (hasPathname === false) {
  27. console.warn('Skipped record creation because useAckee has been called without pathname')
  28. return
  29. }
  30. const attributes = ackeeTracker.attributes(options.detailed)
  31. const url = new URL(pathname, location)
  32. return instance.record(environment.domainId, {
  33. ...attributes,
  34. siteLocation: url.href,
  35. }).stop
  36. }, [ instance, pathname, environment.domainId ])
  37. }
  38. module.exports = useAckee
  39. module.exports.useAckee = useAckee


它只使用react包中的useMemouseEffect钩子。这些钩子的行为在React 18.x中没有改变。这就是为什么您可以忽略对等依赖性并在项目中使用安装的版本(React 18.x)。

展开查看全部

相关问题