Incompatible dependencies within shadergradient and with other packages

[AthenaKam]

When I install shadergradient this is the error message I get

npm warn ERESOLVE overriding peer dependency
npm verbose attempt to log crashed ERESOLVE overriding peer dependency {
npm verbose   code: 'ERESOLVE',
npm verbose   edge: {
npm verbose     type: 'peer',
npm verbose     name: 'three',
npm verbose     spec: '>= 0.159.0',
npm verbose     error: 'INVALID',
npm verbose     from: {
npm verbose       name: '@monogrid/gainmap-js',
npm verbose       version: '3.0.5',
npm verbose       location: 'node_modules/@react-three/drei/node_modules/@monogrid/gainmap-js',
npm verbose       isWorkspace: false,
npm verbose       dependents: [Array]
npm verbose     }
npm verbose   },
npm verbose   dep: {
npm verbose     name: 'three',
npm verbose     version: '0.167.1',
npm verbose     whileInstalling: {
npm verbose       name: '@react-three/drei',
npm verbose       version: '9.109.5',
npm verbose       path: '/Users/athena.kam/Documents/atr/aaam-bot-client/node_modules/@react-three/drei'
npm verbose     },
npm verbose     location: 'node_modules/three',
npm verbose     isWorkspace: false,
npm verbose     dependents: [ [Object] ]
npm verbose   },
npm verbose   force: false,
npm verbose   isMine: false,
npm verbose   strictPeerDeps: false,
npm verbose   current: {
npm verbose     name: 'three',
npm verbose     version: '0.154.0',
npm verbose     location: 'node_modules/three',
npm verbose     isWorkspace: false,
npm verbose     dependents: [ [Object] ]
npm verbose   },
npm verbose   peerConflict: {
npm verbose     name: 'three',
npm verbose     version: '0.154.0',
npm verbose     location: 'node_modules/three',
npm verbose     isWorkspace: false,
npm verbose     dependents: [ [Object] ]
npm verbose   }
npm verbose } TypeError: Cannot read properties of undefined (reading 'extraneous')
npm verbose     at printNode (/opt/homebrew/lib/node_modules/npm/lib/utils/explain-dep.js:24:13)
npm verbose     at explainNode (/opt/homebrew/lib/node_modules/npm/lib/utils/explain-dep.js:4:3)
npm verbose     at explain (/opt/homebrew/lib/node_modules/npm/lib/utils/explain-eresolve.js:39:16)
npm verbose     at #tryWriteLog (/opt/homebrew/lib/node_modules/npm/lib/utils/display.js:394:41)
npm verbose     at /opt/homebrew/lib/node_modules/npm/lib/utils/display.js:286:28
npm verbose     at process.<anonymous> (/opt/homebrew/lib/node_modules/npm/lib/utils/display.js:148:10)
npm verbose     at process.emit (node:events:532:35)
npm verbose     at Object.warn (/opt/homebrew/lib/node_modules/npm/node_modules/proc-log/lib/index.js:62:22)
npm verbose     at PlaceDep.warnPeerConflict (/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:496:9)
npm verbose     at new PlaceDep (/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:165:14)

and when I install framer-motion I get this:

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @monogrid/gainmap-js@3.0.5
npm warn Found: three@0.154.0
npm warn node_modules/three
npm warn   peer three@">=0.126" from @react-spring/three@9.7.4
npm warn   node_modules/@react-spring/three
npm warn     peer @react-spring/three@"*" from shadergradient@1.2.14
npm warn     node_modules/shadergradient
npm warn   11 more (@react-three/drei, @react-spring/three, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer three@">= 0.159.0" from @monogrid/gainmap-js@3.0.5
npm warn node_modules/@react-three/drei/node_modules/@monogrid/gainmap-js
npm warn   @monogrid/gainmap-js@"^3.0.5" from @react-three/drei@9.109.5
npm warn   node_modules/@react-three/drei
npm warn
npm warn Conflicting peer dependency: three@0.167.1
npm warn node_modules/three
npm warn   peer three@">= 0.159.0" from @monogrid/gainmap-js@3.0.5
npm warn   node_modules/@react-three/drei/node_modules/@monogrid/gainmap-js
npm warn     @monogrid/gainmap-js@"^3.0.5" from @react-three/drei@9.109.5
npm warn     node_modules/@react-three/drei

This affects my VSCode IntelliSense and results in VSCode not giving me suggests props (mega annoying for devs). Does anyone have a fix for this? Thanks!

[minorole]

I fixed similar problem with:

1. package.json set related dependency to latest
2. then remove the existing installed files like package lock etc
3. run npm cache clean --force && npm install

[AthenaKam]

I fixed similar problem with:

1. package.json set related dependency to latest
2. then remove the existing installed files like package lock etc
3. run npm cache clean --force && npm install

The related dependency isn't something you install directly installed by me, it is installed as part of shadergradient itself as a sub dependency. When i try to install the latest version of three i get the following error:

npm warn While resolving: aaam-bot-client@0.5.1
npm warn Found: three@0.154.0
npm warn node_modules/three
npm warn   peer three@">=0.126" from @react-spring/three@9.7.4
npm warn   node_modules/@react-spring/three
npm warn     peer @react-spring/three@"*" from shadergradient@1.2.14
npm warn     node_modules/shadergradient
npm warn   12 more (@react-three/drei, @react-spring/three, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer three@"0.154.0" from shadergradient@1.2.14
npm warn node_modules/shadergradient
npm warn   shadergradient@"^1.2.14" from the root project```

[ARbayung]

I have the same problem. When im developing locally an running on VS everything seems to work fine, but when I try to deploy the project in vercel the packages conflict and fails deployment.

[AbduHany]

Did anyone find a solution to this?