Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: three.js r169 / webpack 5
Symptom
Checklist
  1. Run `npm ls three` to enumerate every copy in the dependency tree
  2. Compare `THREE.REVISION` in the browser (169 versus 150) to prove two live instances
  3. Run `npm dedupe` and check whether the ranges collapse to one version
  4. Check whether the plugin actually requires its pinned older version
  5. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

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).