Threejs custom lib usage generate `WARNING: Multiple instances of Three.js being imported.`

Questions
1

Hello,

I’ve created a three.js lib volograms-js - npm but when using it, it in another project, it generates WARNING: Multiple instances of Three.js being imported.

I belive this is something related with webpack, I only found example based on rollup (GitHub - marcofugaro/three-projected-material: 📽 Three.js Material which lets you do Texture Projection on a 3d Model). Could someone share an example based with webpack? or let me know what’s wrong?

I tried

I know that there are differents build/config to distinct, the final build of the demo and the “build”/config used by another project. Currently no already built code to be used by another project is published.

[edit] I’m not even sure, if the example I gave (three-projected-material) is not loading twice Three.js as it uses three 0.124 which doesn’t display that warning.
On vologram-js if I replace "peerDependencies": {"three": "^0.136.0"} with "peerDependencies": {"three": "^0.124.0"} the warning is not displayed

Thanks!

2

you don’t need to configure anything in webpack. but you should put three into peer not dependencies. externals would be worse. give peer the lowest possible three variant that your library can work with.

  "peerDependencies": {
    "three": ">=0.137"
  },

npm install will now already warn if that range isn’t fulfilled.

if three is still being referenced with varying versions your can try aliasing three to node_modules which would work, but since three has breaking changes every minor version i don’t know if that’s a good idea.

the libraries we push … we are very strict. move up to three latest or we don’t support you. i dislike doing it but three forces us because there’s no sem ver and no guarantee that updates won’t break.

3

I solve this problem by using alias.

Three.js-TypeScript-Boilerplate/webpack.common.js at master · Sean-Bradley/Three.js-TypeScript-Boilerplate (github.com)

6 Likes
4

@drcmda I tried but it does change anythink

@drcmda @seanwasere your are right, thanks, using the alias in webpack.config.js solve it. Although I would expect to be naturally handled

(By the way, to easily check yourself if there are mutiple code declaration, search for const REVISION = in generated file)

5

yes you are right, it must be naturally handled. if it’s not some lib i between has a messed up package description. version mismatch is quite common, most people have no idea how many lodashs or babel-runtimes they ship. :sweat_smile:

1 Like