解决 React 依赖问题、漏洞、警告、冲突和不同版本

use*_*206 2 npm reactjs

我在尝试着:

\n
    \n
  1. 修复我的 React 应用程序中出现的依赖问题
  2. \n
  3. 了解它们为何发生
  4. \n
  5. 了解如何最好地处理此类问题以正确解决它们,而不做任何不需要的事情(例如隐藏警告、降级、使用遗留依赖项等)
  6. \n
\n

我希望能够跑步,npm install并且让一切都完美地运行。

\n

为了更好地解释我的问题,运行npm install返回以下内容:

\n
npm WARN ERESOLVE overriding peer dependency\nnpm WARN While resolving: react-side-effect@1.2.0\nnpm WARN Found: react@18.2.0\nnpm WARN node_modules/react\nnpm WARN   react@"^18.2.0" from the root project\nnpm WARN   9 more (@fortawesome/react-fontawesome, ...)\nnpm WARN \nnpm WARN Could not resolve dependency:\nnpm WARN peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect@1.2.0\nnpm WARN node_modules/react-document-meta/node_modules/react-side-effect\nnpm WARN   react-side-effect@"^1.1.0" from react-document-meta@3.0.0-beta.2\nnpm WARN   node_modules/react-document-meta\nnpm WARN \nnpm WARN Conflicting peer dependency: react@16.14.0\nnpm WARN node_modules/react\nnpm WARN   peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect@1.2.0\nnpm WARN   node_modules/react-document-meta/node_modules/react-side-effect\nnpm WARN     react-side-effect@"^1.1.0" from react-document-meta@3.0.0-beta.2\nnpm WARN     node_modules/react-document-meta\n\nremoved 1 package, and audited 1573 packages in 5s\n\n223 packages are looking for funding\n  run `npm fund` for details\n\n9 vulnerabilities (3 moderate, 6 high)\n\nTo address all issues (including breaking changes), run:\n  npm audit fix --force\n\nRun `npm audit` for details.\n
Run Code Online (Sandbox Code Playgroud)\n

这建议运行审核命令,因此npm audit返回以下内容:

\n
# npm audit report\n\nnth-check  <2.0.1\nSeverity: high\nInefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr\nfix available via `npm audit fix --force`\nWill install react-scripts@2.1.3, which is a breaking change\nnode_modules/svgo/node_modules/nth-check\n  css-select  <=3.1.0\n  Depends on vulnerable versions of nth-check\n  node_modules/svgo/node_modules/css-select\n    svgo  1.0.0 - 1.3.2\n    Depends on vulnerable versions of css-select\n    node_modules/svgo\n      @svgr/plugin-svgo  <=5.5.0\n      Depends on vulnerable versions of svgo\n      node_modules/@svgr/plugin-svgo\n        @svgr/webpack  4.0.0 - 5.5.0\n        Depends on vulnerable versions of @svgr/plugin-svgo\n        node_modules/@svgr/webpack\n          react-scripts  >=2.1.4\n          Depends on vulnerable versions of @svgr/webpack\n          node_modules/react-scripts\n\nscss-tokenizer  *\nSeverity: moderate\nRegular expression denial of service in scss-tokenizer - https://github.com/advisories/GHSA-7mwh-4pqv-wmr8\nfix available via `npm audit fix --force`\nWill install node-sass@4.5.3, which is a breaking change\nnode_modules/scss-tokenizer\n  sass-graph  >=2.2.0\n  Depends on vulnerable versions of scss-tokenizer\n  node_modules/sass-graph\n    node-sass  >=4.6.0\n    Depends on vulnerable versions of sass-graph\n    node_modules/node-sass\n\n9 vulnerabilities (3 moderate, 6 high)\n\nTo address all issues (including breaking changes), run:\n  npm audit fix --force\n
Run Code Online (Sandbox Code Playgroud)\n

然后按照建议运行npm audit fix --force,它返回以下内容:

\n
npm WARN using --force Recommended protections disabled.\nnpm WARN audit Updating node-sass to 4.5.3, which is a SemVer major change.\nnpm WARN audit Updating react-scripts to 2.1.3, which is a SemVer major change.\nnpm WARN ERESOLVE overriding peer dependency\nnpm WARN While resolving: react-side-effect@1.2.0\nnpm WARN Found: react@18.2.0\nnpm WARN node_modules/react\nnpm WARN   peer react@">=16.3" from @fortawesome/react-fontawesome@0.2.0\nnpm WARN   node_modules/@fortawesome/react-fontawesome\nnpm WARN     @fortawesome/react-fontawesome@"^0.2.0" from the root project\nnpm WARN   8 more (@testing-library/react, react-document-meta, ...)\nnpm WARN \nnpm WARN Could not resolve dependency:\nnpm WARN peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect@1.2.0\nnpm WARN node_modules/react-document-meta/node_modules/react-side-effect\nnpm WARN   react-side-effect@"^1.1.0" from react-document-meta@3.0.0-beta.2\nnpm WARN   node_modules/react-document-meta\nnpm WARN \nnpm WARN Conflicting peer dependency: react@16.14.0\nnpm WARN node_modules/react\nnpm WARN   peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect@1.2.0\nnpm WARN   node_modules/react-document-meta/node_modules/react-side-effect\nnpm WARN     react-side-effect@"^1.1.0" from react-document-meta@3.0.0-beta.2\nnpm WARN     node_modules/react-document-meta\nnpm WARN deprecated fsevents@1.2.4: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.\nnpm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated\nnpm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).\nnpm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.\nnpm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to \'ansi-colors\' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\\> for migration path(s).\nnpm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142\nnpm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated\nnpm WARN deprecated eslint-loader@2.1.1: This loader has been deprecated. Please use eslint-webpack-plugin\nnpm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).\nnpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated\nnpm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()\nnpm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated\nnpm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.\nnpm WARN deprecated sane@2.5.2: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added\nnpm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.\nnpm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.\nnpm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies\nnpm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.\nnpm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies\nnpm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.\nnpm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies\nnpm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.\nnpm WARN deprecated html-webpack-plugin@4.0.0-alpha.2: please switch to a stable version\nnpm WARN deprecated babel-eslint@9.0.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.\nnpm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).\nnpm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0\nnpm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.\nnpm WARN deprecated core-js@2.6.4: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.\nnpm ERR! code 1\nnpm ERR! path /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass\nnpm ERR! command failed\nnpm ERR! command sh -c /var/folders/xb/j8892d016d774vwslfyy7q500000gn/T/postinstall6573775593.sh\nnpm ERR! Building: /Users/nick/.nvm/versions/node/v18.3.0/bin/node /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=\nnpm ERR! gyp info it worked if it ends with ok\nnpm ERR! gyp verb cli [\nnpm ERR! gyp verb cli   \'/Users/nick/.nvm/versions/node/v18.3.0/bin/node\',\nnpm ERR! gyp verb cli   \'/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/bin/node-gyp.js\',\nnpm ERR! gyp verb cli   \'rebuild\',\nnpm ERR! gyp verb cli   \'--verbose\',\nnpm ERR! gyp verb cli   \'--libsass_ext=\',\nnpm ERR! gyp verb cli   \'--libsass_cflags=\',\nnpm ERR! gyp verb cli   \'--libsass_ldflags=\',\nnpm ERR! gyp verb cli   \'--libsass_library=\'\nnpm ERR! gyp verb cli ]\nnpm ERR! gyp info using node-gyp@3.8.0\nnpm ERR! gyp info using node@18.3.0 | darwin | x64\nnpm ERR! gyp verb command rebuild []\nnpm ERR! gyp verb command clean []\nnpm ERR! gyp verb clean removing "build" directory\nnpm ERR! gyp verb command configure []\nnpm ERR! gyp verb check python checking for Python executable "python2" in the PATH\nnpm ERR! gyp verb `which` succeeded python2 /Library/Frameworks/Python.framework/Versions/2.7/bin/python2\nnpm ERR! gyp verb check python version `/Library/Frameworks/Python.framework/Versions/2.7/bin/python2 -c "import sys; print "2.7.13\nnpm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j\nnpm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 18.3.0\nnpm ERR! gyp verb command install [ \'18.3.0\' ]\nnpm ERR! gyp verb install input version string "18.3.0"\nnpm ERR! gyp verb install installing version: 18.3.0\nnpm ERR! gyp verb install --ensure was passed, so won\'t reinstall if already installed\nnpm ERR! gyp verb install version is already installed, need to check "installVersion"\nnpm ERR! gyp verb got "installVersion" 9\nnpm ERR! gyp verb needs "installVersion" 9\nnpm ERR! gyp verb install version is good\nnpm ERR! gyp verb get node dir target node version installed: 18.3.0\nnpm ERR! gyp verb build dir attempting to create "build" dir: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build\nnpm ERR! gyp verb build dir "build" dir needed to be created? /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build\nnpm ERR! gyp verb build/config.gypi creating config file\nnpm ERR! gyp verb build/config.gypi writing out config file: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build/config.gypi\nnpm ERR! (node:41219) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.\nnpm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)\nnpm ERR! gyp verb config.gypi checking for gypi file: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/config.gypi\nnpm ERR! gyp verb common.gypi checking for gypi file: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/common.gypi\nnpm ERR! gyp verb gyp gyp format was not specified; forcing "make"\nnpm ERR! gyp info spawn /Library/Frameworks/Python.framework/Versions/2.7/bin/python2\nnpm ERR! gyp info spawn args [\nnpm ERR! gyp info spawn args   \'/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/gyp/gyp_main.py\',\nnpm ERR! gyp info spawn args   \'binding.gyp\',\nnpm ERR! gyp info spawn args   \'-f\',\nnpm ERR! gyp info spawn args   \'make\',\nnpm ERR! gyp info spawn args   \'-I\',\nnpm ERR! gyp info spawn args   \'/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build/config.gypi\',\nnpm ERR! gyp info spawn args   \'-I\',\nnpm ERR! gyp info spawn args   \'/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/addon.gypi\',\nnpm ERR! gyp info spawn args   \'-I\',\nnpm ERR! gyp info spawn args   \'/Users/nick/.node-gyp/18.3.0/include/node/common.gypi\',\nnpm ERR! gyp info spawn args   \'-Dlibrary=shared_library\',\nnpm ERR! gyp info spawn args   \'-Dvisibility=default\',\nnpm ERR! gyp info spawn args   \'-Dnode_root_dir=/Users/nick/.node-gyp/18.3.0\',\nnpm ERR! gyp info spawn args   \'-Dnode_gyp_dir=/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp\',\nnpm ERR! gyp info spawn args   \'-Dnode_lib_file=/Users/nick/.node-gyp/18.3.0/<(target_arch)/node.lib\',\nnpm ERR! gyp info spawn args   \'-Dmodule_root_dir=/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass\',\nnpm ERR! gyp info spawn args   \'-Dnode_engine=v8\',\nnpm ERR! gyp info spawn args   \'--depth=.\',\nnpm ERR! gyp info spawn args   \'--no-parallel\',\nnpm ERR! gyp info spawn args   \'--generator-output\',\nnpm ERR! gyp info spawn args   \'build\',\nnpm ERR! gyp info spawn args   \'-Goutput_dir=.\'\nnpm ERR! gyp info spawn args ]\nnpm ERR! No receipt for \'com.apple.pkg.CLTools_Executables\' found at \'/\'.\nnpm ERR! \nnpm ERR! No receipt for \'com.apple.pkg.DeveloperToolsCLILeo\' found at \'/\'.\nnpm ERR! \nnpm ERR! No receipt for \'com.apple.pkg.DeveloperToolsCLI\' found at \'/\'.\nnpm ERR! \nnpm ERR! gyp: No Xcode or CLT version detected!\nnpm ERR! gyp ERR! configure error \nnpm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1\nnpm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/lib/configure.js:345:16)\nnpm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:527:28)\nnpm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)\nnpm ERR! gyp ERR! System Darwin 21.5.0\nnpm ERR! gyp ERR! command "/Users/nick/.nvm/versions/node/v18.3.0/bin/node" "/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="\nnpm ERR! gyp ERR! cwd /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass\nnpm ERR! gyp ERR! node -v v18.3.0\nnpm ERR! gyp ERR! node-gyp -v v3.8.0\nnpm ERR! gyp ERR! not ok \nnpm ERR! Build failed with error code: 1\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     /Users/nick/.npm/_logs/2022-07-09T13_00_06_088Z-debug-0.log\n
Run Code Online (Sandbox Code Playgroud)\n

我可以通过运行以下命令来消除大多数错误:npm install --legacy-peer-deps- 一个不需要的命令 - 它仍然返回一些漏洞警告:

\n
removed 57 packages, and audited 1516 packages in 7s\n\n223 packages are looking for funding\n  run `npm fund` for details\n\n9 vulnerabilities (3 moderate, 6 high)\n\nTo address all issues (including breaking changes), run:\n  npm audit fix --force\n\nRun `npm audit` for details.\n
Run Code Online (Sandbox Code Playgroud)\n

所以我对如何正确解决这些问题有点困惑。

\n

这是我的 package.json 文件:

\n
{\n    "name": "client",\n    "version": "0.1.0",\n    "private": true,\n    "dependencies": {\n        "@fortawesome/fontawesome-svg-core": "^6.1.1",\n        "@fortawesome/free-solid-svg-icons": "^6.1.1",\n        "@fortawesome/react-fontawesome": "^0.2.0",\n        "@hookform/resolvers": "^2.9.5",\n        "@testing-library/jest-dom": "^5.16.4",\n        "@testing-library/react": "^13.3.0",\n        "@testing-library/user-event": "^14.2.1",\n        "@types/jest": "^28.1.4",\n        "@types/node": "^18.0.3",\n        "@types/react": "^18.0.15",\n        "@types/react-dom": "^18.0.6",\n        "node-sass": "^7.0.1",\n        "react": "^18.2.0",\n        "react-document-meta": "^3.0.0-beta.2",\n        "react-dom": "^18.2.0",\n        "react-hook-form": "^7.33.1",\n        "react-modal": "^3.15.1",\n        "react-router-dom": "^6.3.0",\n        "react-scripts": "^5.0.1",\n        "typescript": "^4.7.4",\n        "web-vitals": "^2.1.4",\n        "yup": "^0.32.11"\n    },\n    "scripts": {\n        "start": "react-scripts start",\n        "build": "react-scripts build",\n        "test": "react-scripts test",\n        "eject": "react-scripts eject",\n        "format": "prettier --write ."\n    },\n    "prettier": {\n        "printWidth": 120,\n        "useTabs": false,\n        "tabWidth": 4,\n        "semi": true,\n        "singleQuote": true,\n        "quoteProps": "as-needed",\n        "jsxSingleQuote": true,\n        "trailingComma": "es5",\n        "bracketSpacing": true,\n        "arrowParens": "always"\n    },\n    "eslintConfig": {\n        "extends": [\n            "react-app",\n            "react-app/jest"\n        ]\n    },\n    "browserslist": {\n        "production": [\n            ">0.2%",\n            "not dead",\n            "not op_mini all"\n        ],\n        "development": [\n            "last 1 chrome version",\n            "last 1 firefox version",\n            "last 1 safari version"\n        ]\n    },\n    "devDependencies": {\n        "@types/react-document-meta": "^3.0.2",\n        "@types/react-modal": "^3.13.1",\n        "jest-watch-typeahead": "^1.1.0",\n        "msw": "^0.43.1",\n        "prettier": "2.7.1"\n    }\n}\n
Run Code Online (Sandbox Code Playgroud)\n

被提示9 vulnerabilities让我担心有些事情不对劲。根据我的理解(这可能是不正确的),我假设某些软件包需要比当前版本更旧的 React 版本(可能是 18 或其他版本),这让我假设降级可能会修复它们,但结果是其中大概是我\xe2\x80\x99将永远无法更新我的反应版本,这会很糟糕。降级也感觉不对。

\n

这可能是相关的:即使没有使用 componentWillMount,我也在 JS 控制台中收到此警告,这让我相信过时的库正在使用它。

\n

有谁知道为什么这些错误不断发生,以及如何实际修复或至少正确处理它们,而不必降级或执行任何\xe2\x80\x99s 不需要的事情?我应该担心这些问题吗?之后出现问题是否很常见npm install

\n

请注意,正如本文react-scripts所建议的那样,进入devDependencies不会执行任何操作。

\n

Rok*_*dys 6

这是您应该如何阅读依赖问题:

// 此行表明“对等”依赖项存在问题,该依赖项是您的依赖项的依赖项。“覆盖”意味着您显式指定了高于对等依赖项的依赖项版本

npm WARN ERESOLVE overriding peer dependency
Run Code Online (Sandbox Code Playgroud)

//这是有问题的依赖项

npm WARN While resolving: react-side-effect@1.2.0
Run Code Online (Sandbox Code Playgroud)

// 这是在您的项目中找到的内容

npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   9 more (@fortawesome/react-fontawesome, ...)
npm WARN 
Run Code Online (Sandbox Code Playgroud)

// 这是你失败的依赖想要反应的版本不超过16,你明确指定了版本18,这是发生冲突的地方

npm WARN Could not resolve dependency:
npm WARN peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react- 
side-effect@1.2.0
Run Code Online (Sandbox Code Playgroud)

//这些是您的依赖项使用的需要上述版本的模块

npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN   react-side-effect@"^1.1.0" from react-document-meta@3.0.0-beta.2
npm WARN   node_modules/react-document-meta
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from         
react-side-effect@1.2.0
npm WARN   node_modules/react-document-meta/node_modules/react-side-effect
npm WARN     react-side-effect@"^1.1.0" from react-document-meta@3.0.0- 
beta.2
Run Code Online (Sandbox Code Playgroud)

// 这是文件中导致问题的命名依赖项

npm WARN     node_modules/react-document-meta
Run Code Online (Sandbox Code Playgroud)

现在我们知道react 18 不能与react-document-meta 一起使用

  • 我们应该降级到所需的版本并再次重复该过程

或者

  • 提升依赖版本并希望新版本有修复

如果我们查看 npm 注册表的依赖关系,我们可以看到该模块上次发布不是在 4 年前,因此不可能从此提升版本。[查看github项目页面,人们有类似的问题](https://github.com/kodyl/react-document-meta/issues/48)并建议转向react-helmet。

在你的情况下,我们可以将 React 18 恢复到最新的 16 并继续使用它或过渡到使用其他东西,因为没有选择,除非你想分叉依赖项并自己处理它。

更远:

  • npm Audit 描述了您正在使用的节点包的已知问题,您可以查看一下已部署的依赖项是否对您的工作有重大问题,然后您应该尝试解决它们,否则您可以忽略。有时无法解除依赖关系,您将不得不更改为使用其他东西,因为它不再被维护。

  • npm 修复将尝试自动更新这些易受攻击的依赖项,但在您的情况下会失败,因为您的版本不匹配会阻止其继续。

  • 您应该考虑指定 npm 版本并自动允许次要版本或更高版本https://docs.npmjs.com/about-semantic-versioning

  • 您可以运行npm outdated检查代码中是否有过时的节点版本,然后 npm update 尝试更新版本

  • 如果您手动修改 package.json 而不执行 npm add 或 npm update 则没有依赖项检查,这可能会导致像您这样的问题,我建议始终使用npm add <name>,npm uninstall <name>npm update <name>避免出现问题

最后这是一个固定的 package.json (在我的机器上工作,但可能无法按代码方式工作),我建议升级所有内容并转向react-helmet

    {
        "name": "client",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
            "@fortawesome/fontawesome-svg-core": "^6.1.1",
            "@fortawesome/free-solid-svg-icons": "^6.1.1",
            "@fortawesome/react-fontawesome": "^0.2.0",
            "@hookform/resolvers": "^2.9.5",
            "@testing-library/jest-dom": "^5.16.4",
            "@testing-library/react": "^11",
            "@testing-library/user-event": "^14.2.1",
            "@types/jest": "^28.1.4",
            "@types/node": "^18.0.3",
            "@types/react": "^16",
            "@types/react-dom": "^16.0.0",
            "node-sass": "^7.0.1",
            "react": "^16.0.0",
            "react-document-meta": "^3.0.0-beta.5",
            "react-dom": "^16.0.0",
            "react-hook-form": "^7.33.1",
            "react-modal": "^3.15.1",
            "react-router-dom": "^6.3.0",
            "react-scripts": "^5.0.1",
            "typescript": "^4.7.4",
            "web-vitals": "^2.1.4",
            "yup": "^0.32.11"
        },
        "scripts": {
            "start": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject",
            "format": "prettier --write ."
        },
        "prettier": {
            "printWidth": 120,
            "useTabs": false,
            "tabWidth": 4,
            "semi": true,
            "singleQuote": true,
            "quoteProps": "as-needed",
            "jsxSingleQuote": true,
            "trailingComma": "es5",
            "bracketSpacing": true,
            "arrowParens": "always"
        },
        "eslintConfig": {
            "extends": [
                "react-app",
                "react-app/jest"
            ]
        },
        "browserslist": {
            "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
            ],
            "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
            ]
        },
        "devDependencies": {
            "@types/react-document-meta": "^3.0.2",
            "@types/react-modal": "^3.13.1",
            "jest-watch-typeahead": "^1.1.0",
            "msw": "^0.43.1",
            "prettier": "2.7.1"
        }
    }
Run Code Online (Sandbox Code Playgroud)

  • 我发现最好的方法是查看漏洞本身,看看它们是否会影响您。没有错误或警告总是好的,但有时它还不够大,以至于必须进行更改。但是,在运行审核修复时,如果添加 —fix 标志,则可能会破坏某些内容,因此我宁愿进行正常修复并尝试手动调查和解决问题 (2认同)