NPM Next / React包依赖冲突

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

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

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: use-ackee@3.0.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.0" from the root project
npm ERR!   5 more (next, react-dom, react-helmet, react-side-effect, styled-jsx)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from use-ackee@3.0.1
npm ERR! node_modules/use-ackee
npm ERR!   use-ackee@"^3.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.0" from use-ackee@3.0.1
npm ERR!   node_modules/use-ackee
npm ERR!     use-ackee@"^3.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

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

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "next": "^13.1.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "sass": "^1.58.0",
    "use-ackee": "^3.0.1",
    "web-vitals": "^2.1.4"
  },


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

8qgya5xd

8qgya5xd1#

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

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

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

$ 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

const { useMemo, useEffect } = require('react')
const ackeeTracker = require('ackee-tracker')

const isBrowser = typeof window !== 'undefined'

/**
 * Use Ackee in React.
 * Creates an instance once and a new record every time the pathname changes.
 * Safely no-ops during server-side rendering.
 * @param {?String} pathname - Current path.
 * @param {Object} environment - Object containing the URL of the Ackee server and the domain id.
 * @param {?Object} options - Ackee options.
 */
const useAckee = function(pathname, environment, options = {}) {
    const instance = useMemo(() => {
        if (isBrowser === false) return

        return ackeeTracker.create(environment.server, options)
    }, [ environment.server, options.detailed, options.ignoreLocalhost, options.ignoreOwnVisits ])

    useEffect(() => {
        if (instance == null) {
            console.warn('Skipped record creation because useAckee has been called in a non-browser environment')
            return
        }

        const hasPathname = (
            pathname != null &&
            pathname !== ''
        )

        if (hasPathname === false) {
            console.warn('Skipped record creation because useAckee has been called without pathname')
            return
        }

        const attributes = ackeeTracker.attributes(options.detailed)
        const url = new URL(pathname, location)

        return instance.record(environment.domainId, {
            ...attributes,
            siteLocation: url.href,
        }).stop
    }, [ instance, pathname, environment.domainId ])
}

module.exports = useAckee
module.exports.useAckee = useAckee


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

相关问题