Atlaslog / Field Notes / Build & deployment
Field note · Build & deployment
Three copies of three.js on the page break all raycast picking
Quick answer
Models render, but clicking never hits anything and drag controls stop working. The console warns that multiple instances of Three.js are being imported: a plugin and a GIS widget each bundle their own copy, so `instanceof` checks across instances fail.
Symptom
- `WARNING: Multiple instances of Three.js being imported.` appears on load
- `Uncaught TypeError: Cannot read properties of undefined (reading 'isVector3') at Raycaster.intersectObject (Raycaster.js:312)` follows the warning
- `npm ls three` lists `three@0.169.0`, `three@0.150.1` under some-plugin and `three@0.160.0` under gis-widget
Checklist
- Run `npm ls three` to enumerate every copy in the dependency tree
- Compare `THREE.REVISION` in the browser (169 versus 150) to prove two live instances
- Run `npm dedupe` and check whether the ranges collapse to one version
- Check whether the plugin actually requires its pinned older version
- Add a build-level alias or dedupe entry for `three`
Fix
Hoist to one version with `npm dedupe` or `overrides: { "three": "0.169.0" }`; when a plugin breaks, force every import to one copy through webpack `resolve.alias.three` or Vite `resolve.dedupe: ['three']`, and list three under `peerDependencies` in internal component libraries.
Code
WARNING: Multiple instances of Three.js being imported.
Uncaught TypeError: Cannot read properties of undefined (reading 'isVector3')
at Raycaster.intersectObject (Raycaster.js:312)npm ls three
# ├── three@0.169.0
# ├─┬ some-plugin@2.3.1
# │ └── three@0.150.1
# └─┬ gis-widget@1.4.0
# └── three@0.160.0
Watch out
- Treating the warning as noise and debugging business logic first, while the type errors originate from the duplicate copy
- Pinning a separate three version per plugin with `resolutions`, which preserves multiple instances instead of removing them
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Three copies of three.js on the page break all raycast picking. https://www.jingweizhi.com/en/cookbook/duplicate-library-instance.html (accessed 2026-11-03).