"Multiple instances of Three.js being imported." warning, when working with npm packages of three.js and AR.js in one project #504

FireDragonGameStudio · 2023-01-14T10:15:39Z

Do you want to request a feature or report a bug?
I want to report a bug, at least as far as I can tell.

What is the current behavior?
When importing three.js and AR.js for Marker Tracking (via npm packages, a warning that "Multiple instances of Three.js being imported." when starting the project. I use Vite as a bundler, if that information helps.

MyScript.js

import * as THREE from "three";
import * as THREEx from "@ar-js-org/ar.js/three.js/build/ar-threex";

I checked the three.js samples, they seem to import the three.js min library. May this be related?

I'll attach my package.json content too.
package.json

{
  "name": "three-js-first-try",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "dependencies": {
    "@ar-js-org/ar.js": "^3.4.3",
    "three": "^0.146.0"
  }
}

If the current behavior is a bug, please provide the steps to reproduce.
I just created a new project and added the npm packages via npm i three and npm i @ar-js-org/ar.js. When using Vite as bundler, starting the project with npx vite and the web dev tools console will show the warning.

Please mention other relevant information such as the browser version, Operating System and Device Name
Firefox, Chrome on their latest versions.

What is the expected behavior?
No warning.

If this is a feature request, what is motivation or use case for changing the behavior?
not a feature request

❗ ❗ Post Edit by @kalwalt

This warning may show if you are using divergent three.js versions, between the three version used by AR.js and that one used in your project, they should match!!
and import the classes from the module version import { ArToolkitProfile } from "@ar-js-org/ar.js/three.js/build/ar-threex.mjs";
This is working at least for ar.mjs and ar-threex.mjs dist files and related classes.

The text was updated successfully, but these errors were encountered:

nickw1 · 2023-01-14T13:10:36Z

Does the warning go away if you remove three from the dependencies?

I have a feeling the issue might be that AR.js already has a three.js dependency, and the built AR.js bundle already contains a copy of three.js so you are importing two separate copies of three.js, at different versions.

If that doesn't help, @kalwalt might know more as he developed the packaging system for AR.js.

FireDragonGameStudio · 2023-01-14T13:32:53Z

This was my first thought too, but when I remove three.js I can't no longer create scenes, renderer, etc... e.g.: scene = new THREEx.Scene(); doesn't work.

nickw1 · 2023-01-14T13:41:03Z

If you keep the three import, but remove it from the dependencies, does it work?

FireDragonGameStudio · 2023-01-14T14:49:39Z

Nope, unfortunately not :(

nickw1 · 2023-01-14T20:35:04Z

Is this just with markers, does it work with location-based?

FireDragonGameStudio · 2023-01-14T21:37:39Z

The warning appears with location only too.

kalwalt · 2023-01-15T09:02:56Z

I had this issue in the past, but i don' t remember now how i solved, but i will look into It when i can.

FireDragonGameStudio · 2023-01-15T09:04:20Z

Thank you, will be greatly appreciated!

nickw1 · 2023-01-15T11:30:29Z

Will try and have a look at location, but no guarantees I'll be able to solve it. I guess it's something to do with the packaging process.

kalwalt · 2023-01-16T14:50:59Z

I have a feeling the issue might be that AR.js already has a three.js dependency, and the built AR.js bundle already contains a copy of three.js so you are importing two separate copies of three.js, at different versions.

Three is included as an external package in webpack

AR.js/webpack.config.js

Lines 9 to 22 in be7c908

    
           const externals = { 
        
             aframe: { 
        
               commonjs: 'aframe', 
        
               commonjs2: 'aframe', 
        
               amd: 'aframe', 
        
               root: 'AFRAME' // indicates global variable 
        
             }, 
        
             three: { 
        
               commonjs: 'three', 
        
               commonjs2: 'three', 
        
               amd: 'three', 
        
               root: 'THREE' // indicates global variable 
        
             } 
        
           };

it should prevent to create another instance.

Maybe add three to devDependencies in package.json? I have to admit i never used vite bundler so "i'm walking in the dark".
@FireDragonGameStudio Can you share more infos on your vite setup or do you have a github repository to have a look or test?

kalwalt · 2023-01-16T14:59:08Z

Another thing: Can you try instead to import the whole THREE namespace with:
import * as THREE from "three";
only the classes that you need ? example:
import { Mesh } from "three";

FireDragonGameStudio · 2023-01-16T15:05:40Z

Thx for the swift response. I'm currently not at home, but I'll give it a shot as soon as I'm back. The repo for this is https://github.com/FireDragonGameStudio/ARIndoorNavigation-Threejs but the current state is not pushed yet. Will do that as soon as I'm home too and give you an update here :)

FireDragonGameStudio · 2023-01-16T20:54:35Z

Unfortunately none of the suggested solutions helped. Neither moving three to devDependencies, nor only importing the needed classes. Tried to remove three completely, so maybe the dependency is resolved, deleted node_modules + package-lock.json too, but no change after npm install. Is it generally possible to use the AR.js three version? Smth. like var scene = new THREEX.Scene();?

I already pushed the current state of the project without installed three npm package, so feel free to check it out and play around.

Will try to bundle with webpack tomorrow. I have a feeling that Vite is messing with me... Oo

kalwalt · 2023-01-16T22:28:01Z

Unfortunately none of the suggested solutions helped. Neither moving three to devDependencies, nor only importing the needed classes. Tried to remove three completely, so maybe the dependency is resolved, deleted node_modules + package-lock.json too, but no change after npm install. Is it generally possible to use the AR.js three version? Smth. like var scene = new THREEX.Scene();?

I already pushed the current state of the project without installed three npm package, so feel free to check it out and play around.

Will try to bundle with webpack tomorrow. I have a feeling that Vite is messing with me... Oo

I think it depends by the set up. I see that you specify in package.json https://github.com/FireDragonGameStudio/ARIndoorNavigation-Threejs/blob/a21badd7bbd2ef33512acf39ce849ec142a485ba/package.json#L5
"type": "module"
what happens if you disable it and add three in the dependencies?

FireDragonGameStudio · 2023-01-16T22:47:48Z

The warning unfortunately still appears :/

nickw1 · 2023-01-17T11:32:14Z

I thought I recognised this warning, but had not given it priority as it didn't stop anything working.

To investigate this, I've prepared an absolute basic location-based three.js example here:

https://github.com/nickw1/arjs-three-basic/

This uses npm to install AR.js and webpack to build.

My observations seem similar to @FireDragonGameStudio:

if I import THREE from three, I get the multiple instances warning.
if I don't import THREE, then hardly surprisingly, THREE is undefined.

@kalwalt does this help?

kalwalt · 2023-01-18T18:23:36Z

I thought I recognised this warning, but had not given it priority as it didn't stop anything working.

To investigate this, I've prepared an absolute basic location-based three.js example here:

https://github.com/nickw1/arjs-three-basic/

This uses npm to install AR.js and webpack to build.

My observations seem similar to @FireDragonGameStudio:

if I import THREE from three, I get the multiple instances warning.

if I don't import THREE, then hardly surprisingly, THREE is undefined.

@kalwalt does this help?

I can confirm this but i haven't a solution at the moment. Thank you @nickw1

Platform-Group · 2023-07-26T15:16:48Z

I'm getting the same issue but with aframe location-based. It's causing me to have multiple video streams I'm pretty sure. I'm in the process of moving over from a html file to vue and where my vue set-up gets this warning and also has a second video window, one from the video element and one from the canvas it seems? I believe it's due to both ar-js and aframe importing three.js.

@kalwalt did you ever find a solution?

juanRabaa · 2023-09-06T02:50:01Z

I think this is related to the way the build is bundling the files. I made a test modifying the UMD config of the threex-location-only to be built as a ESM instead. It does eliminate the multiple instances, but it removes the possibility of adding the file to a project any other way than by importing it as a module.

Meanwhile, there is a workaround in webpack that worked for me. Setting an alias in your config for three to be converted into node_modules/three. It should be similar for other bundlers as well.

This is an answer from this post https://discourse.threejs.org/t/threejs-custom-lib-usage-generate-warning-multiple-instances-of-three-js-being-imported/35292/3

module.exports = {
    // ...
    resolve: {
         // ...
        alias: {
            three: path.resolve('./node_modules/three')
        },
        // ...
    },
    // ...
};

Platform-Group · 2023-09-06T08:58:02Z

Thanks Juan, shame that I've already given up on Vue and gone back to barebones html, css and js now

nickw1 · 2024-09-12T20:13:05Z

I'm just wondering whether another source of problems is that three is included as a dependency in package.json for AR.js when super-three (a version of three.js) is already a dependency of A-Frame. Thus both three and super-three are being imported.

@kalwalt does this make sense?

kalwalt · 2024-12-16T19:17:28Z

Hi to all @FireDragonGameStudio @juanRabaa @Platform-Group in this thread, I merged PR #615 It should solve this issue (for THREEX at least) can you test the dev branch? I will make a new AR.js release in few days. Thanks to all!

FireDragonGameStudio · 2025-01-03T11:07:29Z

Hi and first of all sry for the late reply. Thank you for your time and hard work @kalwalt, but I unfortunately still have the issue with the multiple instances warning. It also appears with minimal setup, when setting up a project in vite for vanillajs, install the npm packages for three.js and ar.js, and import them in main.js.

Maybe I am missing smth here Oo Is it possible to use three.js functionality with ar-threex.js too, like creating scenes and stuff? Or is the npm version or ar.js not up-to-date, with the latest release?

kalwalt · 2025-01-03T14:29:25Z

You should import the ar-threex.mjs package not ar-threex.js. After have installed the package with npm try to import the needed classes in this way import { ArToolkitProfile } from "@ar-js-org/ar.js/three.js/build/ar-threex.mjs"

FireDragonGameStudio · 2025-01-03T18:10:50Z

Did exactly that, but unfortunately the warning still appears. Just added a few lines to actually show smth. Sry for being such a nuisance :/

Code:

import "./style.css";
import javascriptLogo from "./javascript.svg";
import viteLogo from "/vite.svg";

import { ArToolkitProfile } from "@ar-js-org/ar.js/three.js/build/ar-threex.mjs";
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

const hemiLight = new THREE.HemisphereLight(0x404040, 0xffffff, 0.5);
scene.add(hemiLight);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.z = -5;
scene.add(cube);

const rotationSpeed = 0.5;
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta();
  cube.rotation.x += rotationSpeed * delta;
  cube.rotation.y += rotationSpeed * delta;

  renderer.render(scene, camera);
}

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

package.json:

{
  "name": "vite-three-ar",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^6.0.5"
  },
  "dependencies": {
    "@ar-js-org/ar.js": "^3.4.6",
    "three": "^0.172.0"
  }
}

Result:

kalwalt · 2025-01-03T22:29:57Z

What happens if you not import the whole THREE namespace but only the single classes (Scene, PerspectiveCamera and so on...) ? Sorry i have no time to test and gor helping in this period...

FireDragonGameStudio · 2025-01-04T18:48:14Z

No worries, it's not blocking., it's still just a warning. Unfortunately using the single classes doesn't help, the warning is still there.

kalwalt · 2025-01-07T16:38:23Z

@FireDragonGameStudio maybe the issue occur because some bundlers require a "module" field in the package.json file. I will try to add it in the Ar.js package.json file, but i'm not sure that it will solve the issue, because as main is

AR.js/package.json

Line 5 in 0670578

"main": "./aframe/build/aframe-ar.js",

module will be "module": "./aframe/build/aframe-ar.mjs" and not "module": "./three.js/build/ar-threex.mjs". The solution is to add modularity to the whole AR.js project, as discussed elsewhere, this is on my ticked list but i can't say when it will happens.

kalwalt · 2025-01-12T20:50:14Z

I could add the module version to AR.js-threejs. I will post here when it's ready. 🙂

kalwalt · 2025-01-13T11:31:16Z

For anyone interested: working on this PR AR-js-org/AR.js-threejs#22

kalwalt · 2025-01-13T19:41:53Z

I succesfully merged the PR and i think solved the issue , at least in AR.js-threejs, You can test in the AR.js-threejs example-vite or i have created a testing repository on my profile ar.js-threejs-test. i noticed that i got the Three.js multiple instances warning if the three.js versions diverge ( the one installed in AR.js-threejs and that one in the vite project) they should be the same: 0.164.0 in any package.json files. Maybe you can test @FireDragonGameStudio? Thank you!

kalwalt · 2025-01-13T19:46:33Z

Did exactly that, but unfortunately the warning still appears. Just added a few lines to actually show smth. Sry for being such a nuisance :/

Code:

import "./style.css";
import javascriptLogo from "./javascript.svg";
import viteLogo from "/vite.svg";

import { ArToolkitProfile } from "@ar-js-org/ar.js/three.js/build/ar-threex.mjs";
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

const hemiLight = new THREE.HemisphereLight(0x404040, 0xffffff, 0.5);
scene.add(hemiLight);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.z = -5;
scene.add(cube);

const rotationSpeed = 0.5;
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta();
  cube.rotation.x += rotationSpeed * delta;
  cube.rotation.y += rotationSpeed * delta;

  renderer.render(scene, camera);
}

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

package.json:

{
  "name": "vite-three-ar",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^6.0.5"
  },
  "dependencies": {
    "@ar-js-org/ar.js": "^3.4.6",
    "three": "^0.172.0"
  }
}

Result:

@FireDragonGameStudio in regards of my previous comment can you test again this code with "three": "^0.164.0" instead?

FireDragonGameStudio · 2025-01-13T20:05:39Z

OMG, changing the three.js version did the trick! The warning disappeared @kalwalt 🙀

FireDragonGameStudio · 2025-01-13T20:08:23Z

You're a genius, I would've never thought of that as the warnings cause!

kalwalt · 2025-01-13T22:56:37Z

You're a genius, I would've never thought of that as the warnings cause!

I have never thought of that too, I will add a Post Edit on the top of this topic as a reminder for other people 😄

kalwalt self-assigned this Jan 16, 2023

kalwalt added bug Something isn't working question Further information is requested dependencies Pull requests that update a dependency file labels Jan 16, 2023

Platform-Group mentioned this issue Jul 28, 2023

[bug report] Stretched camera feed #498

Open

juanRabaa mentioned this issue Sep 6, 2023

Build modification aimed to fix multiple instances of three #563

Closed

nickw1 mentioned this issue Sep 12, 2024

Supporting A-Frame 1.6.0 and newer versions of three #611

Closed

kalwalt mentioned this issue Oct 28, 2024

Upgrade three.js and aframe #615

Merged

kalwalt mentioned this issue Jan 13, 2025

Feature upgrading threejs to new module structure AR-js-org/AR.js-threejs#22

Merged

FireDragonGameStudio closed this as completed Jan 14, 2025

"Multiple instances of Three.js being imported." warning, when working with npm packages of three.js and AR.js in one project #504

"Multiple instances of Three.js being imported." warning, when working with npm packages of three.js and AR.js in one project #504

Comments

FireDragonGameStudio commented Jan 14, 2023 • edited by kalwalt Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❗ ❗ Post Edit by @kalwalt

nickw1 commented Jan 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

FireDragonGameStudio commented Jan 14, 2023

Uh oh!

nickw1 commented Jan 14, 2023

Uh oh!

FireDragonGameStudio commented Jan 14, 2023

Uh oh!

nickw1 commented Jan 14, 2023

Uh oh!

FireDragonGameStudio commented Jan 14, 2023

Uh oh!

kalwalt commented Jan 15, 2023

Uh oh!

FireDragonGameStudio commented Jan 15, 2023

Uh oh!

nickw1 commented Jan 15, 2023

Uh oh!

kalwalt commented Jan 16, 2023

Uh oh!

kalwalt commented Jan 16, 2023

Uh oh!

FireDragonGameStudio commented Jan 16, 2023

Uh oh!

FireDragonGameStudio commented Jan 16, 2023

Uh oh!

kalwalt commented Jan 16, 2023

Uh oh!

FireDragonGameStudio commented Jan 16, 2023

Uh oh!

nickw1 commented Jan 17, 2023

Uh oh!

kalwalt commented Jan 18, 2023

Uh oh!

Platform-Group commented Jul 26, 2023

Uh oh!

juanRabaa commented Sep 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Platform-Group commented Sep 6, 2023

Uh oh!

nickw1 commented Sep 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kalwalt commented Dec 16, 2024

Uh oh!

FireDragonGameStudio commented Jan 3, 2025

Uh oh!

kalwalt commented Jan 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

FireDragonGameStudio commented Jan 3, 2025

Uh oh!

kalwalt commented Jan 3, 2025

Uh oh!

FireDragonGameStudio commented Jan 4, 2025

Uh oh!

kalwalt commented Jan 7, 2025

Uh oh!

kalwalt commented Jan 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kalwalt commented Jan 13, 2025

Uh oh!

kalwalt commented Jan 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kalwalt commented Jan 13, 2025

Uh oh!

FireDragonGameStudio commented Jan 13, 2025

Uh oh!

FireDragonGameStudio commented Jan 13, 2025

Uh oh!

FireDragonGameStudio commented Jan 14, 2023 •

edited by kalwalt

Loading

nickw1 commented Jan 14, 2023 •

edited

Loading

juanRabaa commented Sep 6, 2023 •

edited

Loading

nickw1 commented Sep 12, 2024 •

edited

Loading

kalwalt commented Jan 3, 2025 •

edited

Loading

kalwalt commented Jan 12, 2025 •

edited

Loading

kalwalt commented Jan 13, 2025 •

edited

Loading