question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Multiple instances of Three.js being imported" from CDN

See original GitHub issue

Describe 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

  1. Visit the codesandbox
  2. 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:closed
  • Created 3 years ago
  • Comments:8

github_iconTop GitHub Comments

2reactions
hmanscommented, Feb 11, 2021

I’m unsure about this issue. It seems to me the mentioned problem is a general JavaScript thing. Or is there a concrete suggestion for a change in three.js?

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.

2reactions
donmccurdycommented, Jan 28, 2021

Hmm, the warning is correct. From the network tab, with cache enabled:

Screen Shot 2021-01-28 at 12 00 46 PM

Note that unpkg redirects unpkg.com/three to unpkg.com/three@0.125.1. It seems like even though the two references to three.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:

import * as THREE from "https://unpkg.com/three@0.125.1/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/three@0.125.1/examples/jsm/controls/OrbitControls.js";
/* Warning NOT triggered */

Seems like we need to ensure the documentation uses version-pinned URLs, then?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found