npm install fails with upstream dependency conflict (workaround: npm install --force)

[rewbs]

npm install currently fails due to incompatibilities in transitive dependencies. This is harmless at the moment and can be worked around with npm install --force. However, that command is somewhat dangerous so it would be better to not rely on it.

The problems are that:

• react-scripts@5.0.1does note declare compatibility with versions of typescript above 4 (I'm currently on 5.0.4). Tracked here: (react-scripts) Support for TypeScript 5.x facebook/create-react-app#13080 . Unfortunately, it seems react-scripts might be abandoned so the solution might be to move to vite.
• @xzdarcy/react-timeline-editor@0.1.9 uses react-virtualized@9.22.3, which does not declare compatibility with versions of react and react-dom above 16.14.0 (I'm currently on 18.2.0). Unfortunately it seems react-virtualized is deprecated and unlikely to get updates, so we'd need react-timeline-editor to switch to react-window. I have raised this here: Peer dependency conflict with react > 16 (workaround: npm install --force) xzdarcy/react-timeline-editor#33

The error output is:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.0.4
npm ERR! node_modules/typescript
npm ERR!   typescript@"^5.0.4" from the root project
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.2
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   2 more (ts-jest, tsutils)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.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.

Once again, the workaround is simply npm install --force.

[rewbs]

Turns out adding the following is enough to mute the error for react-scripts, and @xzdarcy/react-timeline-editor@0.1.9 only flags a warning:

  "overrides": {
    "react-scripts": {
      "typescript": "^5"
    }

So we can now run without --force with the only downside being a warning. The importance of this issue is therefore much lower.

[conorluddy]

Just to add a tip - you can also use the $ approach like this to make it match the version of the package from your main deps 👍🏼

"overrides": {
    "react-scripts": {
      "typescript": "$typescript"
    }
}