Vite: Multiple instances of Three.js being imported

[busticated]

hey there 👋

i'm trying to track down why i'm seeing the Multiple instances of Three.js being imported. warning in my tests here. i've reviewed a number of seemingly related issues over in mrdoob/three.js - most notably this - but have not been able to get things fixed.

the issue appeared after we added and started using @react-three/test-renderer. it only happens in our tests.

when i look at my deps, i see:

>>npm ls --depth 0
my-app@0.1.0 /Users/me/code/my-app
├── @eslint/js@9.34.0
├── @react-three/drei@9.122.0
├── @react-three/fiber@8.18.0
├── @react-three/test-renderer@8.2.4
├── @stylistic/eslint-plugin@5.3.1
├── @testing-library/dom@10.4.1
├── @testing-library/jest-dom@6.8.0
├── @testing-library/react@16.3.0
├── @types/fs-extra@11.0.4
├── @types/node@22.18.0
├── @types/react-dom@18.3.7
├── @types/react@18.3.24
├── @types/three@0.168.0
├── @vitejs/plugin-react@4.7.0
├── @vitest/coverage-v8@3.2.4
├── @vitest/eslint-plugin@1.3.8
├── cross-env@7.0.3
├── date-fns@3.6.0
├── dotenv@16.6.1
├── eslint-plugin-react-hooks@5.2.0
├── eslint-plugin-react-refresh@0.4.20
├── eslint-plugin-react@7.37.5
├── eslint@9.34.0
├── execa@9.6.0
├── fs-extra@11.3.1
├── globals@15.15.0
├── jsdom@25.0.1
├── react-dom@18.3.1
├── react-error-boundary@4.1.2
├── react-router-dom@6.30.1
├── react@18.3.1
├── three@0.170.0
├── typescript-eslint@8.42.0
├── typescript@5.9.2
├── vite@6.3.5
└── vitest@3.2.4

scanning for three specifically:

>>npm ls three              
my-app@0.1.0 /Users/me/code/my-app
├─┬ @react-three/drei@9.122.0
│ ├─┬ @monogrid/gainmap-js@3.0.6
│ │ └── three@0.170.0 deduped
│ ├─┬ @react-spring/three@9.7.5
│ │ └── three@0.170.0 deduped
│ ├─┬ camera-controls@2.9.0
│ │ └── three@0.170.0 deduped
│ ├─┬ maath@0.10.8
│ │ └── three@0.170.0 deduped
│ ├─┬ meshline@3.3.1
│ │ └── three@0.170.0 deduped
│ ├─┬ stats-gl@2.4.2
│ │ └── three@0.170.0 deduped
│ ├─┬ three-mesh-bvh@0.7.8
│ │ └── three@0.170.0 deduped
│ ├─┬ three-stdlib@2.35.13
│ │ └── three@0.170.0 deduped
│ ├── three@0.170.0 deduped
│ └─┬ troika-three-text@0.52.0
│   ├── three@0.170.0 deduped
│   └─┬ troika-three-utils@0.52.0
│     └── three@0.170.0 deduped
├─┬ @react-three/fiber@8.18.0
│ └── three@0.170.0 deduped
├─┬ @react-three/test-renderer@8.2.4
│ └── three@0.170.0 deduped
└── three@0.170.0

my vite config is a bit complex but i did try adding:

  resolve: {
    alias: {
       'three/examples/jsm': 'three/examples/jsm',
       'three/addons': 'three/examples/jsm',
       'three/tsl': 'three/webgpu',
       'three': 'three/webgpu',
    }
  }

...but it didn't suppress the warning.

collecting my import statements - as i understand certain patterns here can trigger the warning - i see:

// three (Core Library)
import * as THREE from 'three';
import type * as THREE from 'three';
import { Color } from 'three';
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

// @react-three/fiber
import { Canvas, useThree } from '@react-three/fiber';
import { useThree, type ThreeEvent } from '@react-three/fiber';
import { useFrame, useThree } from '@react-three/fiber';
import { Canvas } from '@react-three/fiber';
import { useThree } from '@react-three/fiber';

// @react-three/drei
import { OrbitControls, PerspectiveCamera, OrthographicCamera } from '@react-three/drei';
import { Line } from '@react-three/drei';
import { OrbitControls } from '@react-three/drei';

// @react-three/test-renderer
import ReactThreeTestRenderer from '@react-three/test-renderer';

// three-stdlib
import type { OrbitControls } from 'three-stdlib';

all suggestions very much appreciated 🙏 👍

original report 👉 mrdoob/three.js#32142

[DennisSmolek]

Can you make a base sandbox/setup that does it? You have a lot of other libs that depend on three which also have others (like drei) I haven't been able to reproduce the issue