"Multiple instances of Three.js being imported" from CDN
See original GitHub issueDescribe the bug
Three r125 now checks if multiple different instances of the library are being imported. Weirdly, though, this is already triggered simply by following the “Installation” section of the documentation:
<script type="module">
import * as THREE from "https://unpkg.com/three/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/three/examples/jsm/controls/OrbitControls.js";
/* Warning triggered */
</script>
Here’s a Codesandbox with the issue: https://codesandbox.io/s/three-multiple-instances-warning-nkfc9
I’ve tried a bunch of other ESM CDNs (skypack and jspm, specifically), with the same results.
To Reproduce
- Visit the codesandbox
- Check the console output
Code
See above.
Live example
Expected behavior
There should not be a warning that multiple instances are being imported if they’re being imported via JS modules from CDNs.
Platform:
- Three.js version: [r125]
Issue Analytics
- State:
- Created 3 years ago
- Comments:8
Top Results From Across the Web
WARNING: Multiple instances of Three.js being imported. (?)
1 ) the CDN will redirect both URLs and ultimately include two copies of the library again. I'd strongly recommend pinning to a...
Read more >WARNING: Multiple instances of Three.js being imported
I'm getting the following warning when trying to use @react-three/fiber and @react-three/drei in the same project.
Read more >How to Include three.js in Your Projects
The first step in building a three.js app is importing the three.js files. ... ways to do this: download the files, use the...
Read more >Warning: Multiple Instances Of Three.Js Being ... - ADocLib
Three.js r126 CDN links including JS files with their minified versions. NPM or Yarn and Github installation guide for Three.js r126 or Download...
Read more >Why Does Three.js Need Import Maps? - Medium
For example, this example below doesn't use import maps, but it still works. It imports the Three.js core directly from a CDN link....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The bug is that this happens when following the official instructions on the website. As @donmccurdy already pointed out, it could be argued that this is a bug with the documentation, not the library itself.
Hmm, the warning is correct. From the network tab, with cache enabled:
Note that unpkg redirects
unpkg.com/three
tounpkg.com/three@0.125.1
. It seems like even though the two references tothree.module.js
resolve to the same file, the browser is importing it twice. This does not happen if we use the versioned CDN URL instead, avoiding the redirect:Seems like we need to ensure the documentation uses version-pinned URLs, then?