search

0beqz / screen-space-reflections

Implements Screen Space Reflections in three.js
https://screen-space-reflections.vercel.app/
MIT License
550 stars 44 forks source link

ERESOLVE unable to resolve dependency tree #8

Closed sommerper closed 2 years ago

sommerper commented 2 years ago

Hi!

When I try to install the package I get the following error:

npm i screen-space-reflections -S                                                                                                                                                    ─╯
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: front-end@0.0.1
npm ERR! Found: three@0.142.0
npm ERR! node_modules/three
npm ERR!   three@"^0.142.0" from the root project
npm ERR!   peer three@">= 0.107.0 < 0.143.0" from postprocessing@6.28.3
npm ERR!   node_modules/postprocessing
npm ERR!     peer postprocessing@"^6.28.0" from screen-space-reflections@2.0.1
npm ERR!     node_modules/screen-space-reflections
npm ERR!       screen-space-reflections@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer three@"^0.141.0" from screen-space-reflections@2.0.1
npm ERR! node_modules/screen-space-reflections
npm ERR!   screen-space-reflections@"*" 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! See /home/xxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/xxx/.npm/_logs/2022-07-17T18_19_51_727Z-debug-0.log

My project package.json looks like this:

{
  "name": "front-end",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "package": "svelte-kit package",
    "preview": "vite preview",
    "prepare": "svelte-kit sync",
    "test": "playwright test",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
    "format": "prettier --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@playwright/test": "^1.22.2",
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "@types/cookie": "^0.5.1",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.16.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "postcss": "^8.4.14",
    "postcss-cssnext": "^3.1.1",
    "postcss-load-config": "^3.1.1",
    "postcss-nested": "^5.0.6",
    "prettier": "^2.6.2",
    "prettier-plugin-svelte": "^2.7.0",
    "svelte": "^3.46.0",
    "svelte-check": "^2.7.1",
    "svelte-preprocess": "^4.10.6",
    "tslib": "^2.3.1",
    "typescript": "^4.7.4",
    "vite": "^2.9.13"
  },
  "type": "module",
  "dependencies": {
    "@babylonjs/core": "^5.14.1",
    "@babylonjs/materials": "^5.14.1",
    "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
    "@three-ts/orbit-controls": "^1.4.7",
    "@types/three": "^0.141.0",
    "babylonjs": "^5.13.3",
    "babylonjs-loaders": "^5.13.3",
    "cookie": "^0.4.1",
    "gsap": "^3.10.4",
    "three": "^0.142.0",
    "three-gltf-loader": "^1.111.0",
    "three-orbitcontrols": "^2.110.3",
    "three-orbitcontrols-ts": "^0.1.2"
  }
}

Am I doing something wrong?

I'd really like to try this out - it just looks too good!

Thanks

0beqz commented 2 years ago

The issue was that the effect required exactly three@0.141.0 as a peer dependency. I changed it so that it now needs at least version 0.141.0 of three.js. Higher versions will work too now.

Can you check if the issue is gone in the latest release (2.0.4)?

sommerper commented 2 years ago

Thanks for a quick response! Much appreciated!

It installed correctly so that's great. But when I try to add the ssrPass the scene turns completely red. But maybe that's a completely different issue?

Before: image

After: image

// Importing like this
import { defaultSSROptions, SSREffect } from "screen-space-reflections";

// Applying the pass like this
const ssrEffect = new SSREffect(scene, camera, defaultSSROptions);
const ssrPass: POSTPROCESSING.EffectPass = new POSTPROCESSING.EffectPass(camera, ssrEffect);
composer.addPass(ssrPass);

VSCode does warn me about

Argument of type 'EffectPass' is not assignable to parameter of type 'Pass'.
Property 'clear' is missing in type 'EffectPass' but required in type 'Pass'.ts(2345)

Thanks again!

sommerper commented 2 years ago

I'll close the ticket since the original issue was resolved. Thanks!

0beqz commented 2 years ago

Ah great, I'm curious what exactly caused the issue with the red screen?

8ow commented 2 years ago

Hi!

When I try to install the package I get the following error:

npm i screen-space-reflections -S                                                                                                                                                    ─╯
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: front-end@0.0.1
npm ERR! Found: three@0.142.0
npm ERR! node_modules/three
npm ERR!   three@"^0.142.0" from the root project
npm ERR!   peer three@">= 0.107.0 < 0.143.0" from postprocessing@6.28.3
npm ERR!   node_modules/postprocessing
npm ERR!     peer postprocessing@"^6.28.0" from screen-space-reflections@2.0.1
npm ERR!     node_modules/screen-space-reflections
npm ERR!       screen-space-reflections@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer three@"^0.141.0" from screen-space-reflections@2.0.1
npm ERR! node_modules/screen-space-reflections
npm ERR!   screen-space-reflections@"*" 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! See /home/xxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/xxx/.npm/_logs/2022-07-17T18_19_51_727Z-debug-0.log

My project package.json looks like this:

{
  "name": "front-end",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "package": "svelte-kit package",
    "preview": "vite preview",
    "prepare": "svelte-kit sync",
    "test": "playwright test",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
    "format": "prettier --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@playwright/test": "^1.22.2",
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "@types/cookie": "^0.5.1",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.16.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "postcss": "^8.4.14",
    "postcss-cssnext": "^3.1.1",
    "postcss-load-config": "^3.1.1",
    "postcss-nested": "^5.0.6",
    "prettier": "^2.6.2",
    "prettier-plugin-svelte": "^2.7.0",
    "svelte": "^3.46.0",
    "svelte-check": "^2.7.1",
    "svelte-preprocess": "^4.10.6",
    "tslib": "^2.3.1",
    "typescript": "^4.7.4",
    "vite": "^2.9.13"
  },
  "type": "module",
  "dependencies": {
    "@babylonjs/core": "^5.14.1",
    "@babylonjs/materials": "^5.14.1",
    "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
    "@three-ts/orbit-controls": "^1.4.7",
    "@types/three": "^0.141.0",
    "babylonjs": "^5.13.3",
    "babylonjs-loaders": "^5.13.3",
    "cookie": "^0.4.1",
    "gsap": "^3.10.4",
    "three": "^0.142.0",
    "three-gltf-loader": "^1.111.0",
    "three-orbitcontrols": "^2.110.3",
    "three-orbitcontrols-ts": "^0.1.2"
  }
}

Am I doing something wrong?

I'd really like to try this out - it just looks too good!

Thanks

sommerper Please contact me HQ#0001 (discord) or @Valorado (telegram)