Package causes "Multiple instances" three.js warning

[wuhhh]

I am seeing the WARNING: Multiple instances of Three.js being imported. message in console. I narrowed it down to this dependency. If I remove the component which uses it, the warning goes away. I am on 1.1.7.

Package.json deps :

"dependencies": {
    "@react-three/csg": "^1.1.7",
    "@react-three/drei": "^9.32.3",
    "@react-three/fiber": "^8.8.7",
    "lamina": "^1.1.23",
    "leva": "^0.9.34",
    "r3f-perf": "6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "three": "^0.145.0",
    "three-stdlib": "^2.20.3",
    "zustand": "4.0"
  },

[drcmda]

can you move to 2.x? i don't see the warning.

[wuhhh]

I tried it with the same result on 2.0.7.

I used some of the sample code from your docs:

<mesh>
	<meshNormalMaterial />
	<Geometry>
		<Base scale={[2, 0.5, 0.5]}>
			<boxGeometry />
		</Base>
		<Addition>
			<boxGeometry scale={[1, 0.5, 0.5]} />
		</Addition>
	</Geometry>
</mesh>

If I remove the above chunk, the error goes away.

[wuhhh]

I installed the house sandbox locally - same error here in Chrome incognito window, I don't see the warning in Firefox

[drcmda]

then it must be the base library three-bvh-csg, will investigate

edit: nope, loops good, three is marked a peerDependency

no idea from where it comes from tbh. this library's only dependency is bvh-csg.

[drcmda]

when i download the house demo by clicking the csb dl button, yarn it, yarn start, i don't see any warnings in chrome.

[wuhhh]

Then I think this issue is something to do with using npm - because I just tried with yarn and you're right, there's no such warning. I was on npm 8.3.1 so I just updated to 8.19.3 and the warning is still there.

[chrislicodes]

Any news on this @wuhhh? I also encounter the same problem now.

[levivoelz]

I have the same issue. Switching to yarn didn't help (yarn v3). Here's an output from yarn install:

➤ YN0000: ┌ Resolution step
➤ YN0002: │ @react-three/csg@npm:2.2.0 doesn't provide three (p9aa34), requested by three-bvh-csg
➤ YN0002: │ @react-three/csg@npm:2.2.0 doesn't provide three-mesh-bvh (pd06b0), requested by three-bvh-csg
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 468ms

Normally, I'd just ignore the peer dependency warning, but there are multiple instances of three being installed and bundled—specifically 0.141.0 which is what three-bvh-csg wants as a peer dependency and 0.152.0 which is a dependency in my project.

Now, switching back to npm (v9.5.1) I can see that [email protected] is installed in @react-three/csg/node_modules. I think this has to do with peerDependencies being installed by default for sub-packages. I think for three to not be installed here it needs to be set as a peerDependency in this package. I found this article about it: https://dev.to/arcanis/implicit-transitive-peer-dependencies-ed0

[levivoelz]

I was able to fix this by adding "three": ">=0.141.0" as a peer dependency to this package and by changing the peer dependency in three-bvh-csg from "three": "^0.141.0" to "three": ">=0.141.0". I can submit a PR if y'all want.