WARNING: Multiple instances of Three.js being imported.

[vincentfretin]

Latest builds with three-pathfinding 0.14.0 or 1.1.0 produces WARNING: Multiple instances of Three.js being imported. Probably need to update the build stack to define three as AFRAME.THREE external. I know how to do that with webpack.

[vincentfretin]

There is also #252 to switch the build to microbundle but I don't know how to define externals with that I don't have experience with it.

With webpack I'm using this:

  externals: {                                                                  
    // Stubs out `import ... from 'three'` so it returns `import ... from window.THREE` effectively using THREE global variable that is defined by AFRAME.
    three: "THREE",                                                             
  },

[vincentfretin]

There is an example actually here for microbundle :) https://github.com/donmccurdy/three-pathfinding/blob/a63301b523f85b8f578474c092460710bfed1146/package.json#L25

[vincentfretin]

I think I will go with webpack here because the tests are using karma. I'll update the test stack like I already did with networked-aframe and aframe. Also add CI with GitHub Actions.

[6uliver]

We solved the problem in our project by aliasing three to super-three with pnpm alias feature (https://pnpm.io/aliases). We are using CRA, Webpack with TypeScript.

By the way the root cause of the problem IMHO is that aframe is using a forked version of three (super-three (I think it's a terrible solution)) as you may know: https://github.com/aframevr/aframe/issues/4898, https://github.com/aframevr/aframe/issues/4806 but aframe-extras is not using a forked version of three-pathfinding (something like super-three-pathfinding which is using super-three instead of three (just to have more mess))

I hope this informations will help you!

[vincentfretin]

Thanks for sharing your experience. The alias tip is indeed correct if you have aframe and aframe-extras as a npm dependency (because the main entry point points to index.js) and you want the three import to point to the super-three dependency.

If you use a build of aframe and aframe-extras via a CDN, you just want for libs (third party components) to create a umd build without three code, so using an external to point to the THREE global variable like I said in https://github.com/n5ro/aframe-extras/issues/389#issuecomment-1336369777

[diarmidmackenzie]

@vincentfretin - I think this is the only thing blocking us releasing a 7.0.0 release now.

How soon do you think you might be able to look at this?

[vincentfretin]

I was swamped the last two weeks, I'm starting to catch up with what I put aside. I'm hoping to have some time next week to work on all the webpack config in all repos. I also really need motivation to look into it. ;-) There is actually another issue that is blocking #380 we should revert startAt option or fix the issue.

[vincentfretin]

I released 7.0.0 with the warning. I figured I'd release it in this state and release another version when I'll figure out how to update to webpack to replace this scripts/dist.js script.

[ericwood73]

We solved the problem in our project by aliasing three to super-three with pnpm alias feature (https://pnpm.io/aliases). We are using CRA, Webpack with TypeScript.

By the way the root cause of the problem IMHO is that aframe is using a forked version of three (super-three (I think it's a terrible solution)) as you may know: aframevr/aframe#4898, aframevr/aframe#4806 but aframe-extras is not using a forked version of three-pathfinding (something like super-three-pathfinding which is using super-three instead of three (just to have more mess))

I hope this informations will help you!

I tried doing this but it looks like maybe webpack can't resolve the aliased module. Can you elaborate more on how you got this to work?

[vincentfretin]

With aframe 1.6.0/master, I made this much easier, the dependency is now called three, not super-three anymore, see my comment https://github.com/aframevr/aframe/pull/5522#issuecomment-2122573248 how I use npm and webpack to have aframe with a specific version of three and aframe-extras. So if you want to use latest version today, it would be in package.json

{
  "overrides": {
    "three": "npm:super-three@0.169.0",
  },
  "dependencies": {
    "aframe": "aframevr/aframe#4449ed5",
    "aframe-extras": "^7.5.1",
    "three": "npm:super-three@0.169.0"
  }
}

[6uliver]

With aframe 1.6.0/master, I made this much easier, the dependency is now called three, not super-three anymore, see my comment aframevr/aframe#5522 (comment) how I use npm and webpack to have aframe with a specific version of three and aframe-extras. So if you want to use latest version today, it would be in package.json

{
  "overrides": {
    "three": "npm:super-three@0.169.0",
  },
  "dependencies": {
    "aframe": "aframevr/aframe#4449ed5",
    "aframe-extras": "^7.5.1",
    "three": "npm:super-three@0.169.0"
  }
}

@ericwood73 Yeah, we had a similar solution.

[gmarty]

Anybody managed to fix this with Parcel?

Unlike webpack, the overrides in package.json does not work.

[vincentfretin]

The overrides in package.json is a npm feature to be sure you end up with a single node_modules/three that is super-three if any dependencies has a three dependency. This has nothing to do with webpack or any bundler. For pnpm that's a different syntax https://pnpm.io/package_json#pnpmoverrides I'm not familiar with Parcel.