Error resolving dependency for React on npm install

[benjamin-mogensen]

Description

I am getting below error when I do an npm install. I can add --force and it will install dependencies. But I am interested in getting this fixed instead of risking something not working using the --force option.

I am not sure how to read the error and how to find out where the conflict actually arises. It would be great if someone can help explain this, and if it is a GraphQL iVoyage issue, or if I need to raise my issue elsewhere.

Error:

% npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: graphql-voyager@2.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.5
npm ERR!   node_modules/@emotion/react
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.5
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/lab@5.0.0-alpha.114
npm ERR!       node_modules/@mui/lab
npm ERR!         @mui/lab@"5.0.0-alpha.114" from graphql-voyager@2.0.0
npm ERR!         node_modules/graphql-voyager
npm ERR!       4 more (@mui/material, @mui/styled-engine, @mui/system, graphql-voyager)
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/lab@5.0.0-alpha.114
npm ERR!     node_modules/@mui/lab
npm ERR!       @mui/lab@"5.0.0-alpha.114" from graphql-voyager@2.0.0
npm ERR!       node_modules/graphql-voyager
npm ERR!         dev graphql-voyager@"^2.0.0" from the root project
npm ERR!     4 more (@mui/material, @mui/styled-engine, @mui/system, graphql-voyager)
npm ERR!   peer react@">=16.8.0" from @emotion/styled@11.10.5
npm ERR!   node_modules/@emotion/styled
npm ERR!     peerOptional @emotion/styled@"^11.3.0" from @mui/lab@5.0.0-alpha.114
npm ERR!     node_modules/@mui/lab
npm ERR!       @mui/lab@"5.0.0-alpha.114" from graphql-voyager@2.0.0
npm ERR!       node_modules/graphql-voyager
npm ERR!         dev graphql-voyager@"^2.0.0" from the root project
npm ERR!     peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.11.2
npm ERR!     node_modules/@mui/material
npm ERR!       peer @mui/material@"^5.0.0" from @mui/icons-material@5.11.0
npm ERR!       node_modules/@mui/icons-material
npm ERR!         @mui/icons-material@"5.11.0" from graphql-voyager@2.0.0
npm ERR!         node_modules/graphql-voyager
npm ERR!       2 more (@mui/lab, graphql-voyager)
npm ERR!     3 more (@mui/styled-engine, @mui/system, graphql-voyager)
npm ERR!   15 more (@emotion/use-insertion-effect-with-fallbacks, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@">=18.0.0" from graphql-voyager@2.0.0
npm ERR! node_modules/graphql-voyager
npm ERR!   dev graphql-voyager@"^2.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@">=18.0.0" from graphql-voyager@2.0.0
npm ERR!   node_modules/graphql-voyager
npm ERR!     dev graphql-voyager@"^2.0.0" 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! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/benjaminmogensen/.npm/_logs/2023-11-05T05_52_04_137Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/benjaminmogensen/.npm/_logs/2023-11-05T05_52_04_137Z-debug-0.log

Dependencies:

"dependencies": {
  "@stoplight/spectral-core": "^1.18.3",
  "@stoplight/spectral-parsers": "^1.0.3",
  "@stoplight/spectral-ruleset-bundler": "^1.5.2",
  "@stoplight/spectral-rulesets": "^1.18.0",
  "@stoplight/spectral-runtime": "^1.1.2",
  "ajv": "^8.12.0",
  "ajv-formats": "^2.1.1",
  "ajv-keywords": "^5.1.0",
  "avsc": "^5.7.7",
  "better-ajv-errors": "^1.2.0",
  "camelcase": "^8.0.0",
  "connect": "^3.7.0",
  "deep-rename-keys": "^0.2.1",
  "electron-about-window": "^1.15.2",
  "fast-deep-equal": "^3.1.3",
  "find-duplicated-property-keys": "^1.2.9",
  "fs-extra": "^11.1.1",
  "fuse.js": "^7.0.0",
  "graphql": "^16.8.1",
  "jquery": "^3.7.1",
  "js-yaml": "^4.1.0",
  "json-schema-faker": "^0.5.3",
  "json-schema-merge-allof": "^0.8.1",
  "json-schema-ref-parser": "^9.0.9",
  "json-stable-stringify": "^1.0.2",
  "json-stringify-safe": "^5.0.1",
  "jsonpath-plus": "^7.2.0",
  "lodash": "^4.17.21",
  "mark.js": "^8.11.1",
  "md5-file": "^5.0.0",
  "mousetrap": "^1.6.5",
  "mousetrap-global-bind": "^1.1.0",
  "natural": "^6.8.0",
  "serve-static": "^1.15.0",
  "uuid": "^9.0.1",
  "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
  "yargs": "^17.7.2"
},
"devDependencies": {
  "@playwright/test": "^1.39.0",
  "chai": "^4.3.10",
  "chai-as-promised": "^7.1.1",
  "electron": "^27.0.2",
  "electron-builder": "^24.6.4",
  "graphql-voyager": "^2.0.0",
  "jshint": "^2.13.6",
  "mocha": "^10.2.0",
  "playwright": "^1.39.0",
  "rapidoc": "^9.3.4",
  "redoc": "^2.1.3",
  "standard": "^17.1.0",
  "stylelint": "^15.11.0",
  "stylelint-config-standard": "^34.0.0",
  "swagger-ui-dist": "^5.9.1"
}

Thanks in advance.