how do I avoid importing three.js twice?

[anicolao]

Steps to reproduce the issue

Make a new project that depends on cubing.js and three.js Observe the warning:

three.module.js:49439 WARNING: Multiple instances of Three.js being imported.

which occurs as soon as you navigate to a page that contains a TwistyPlayer.

Observed behaviour

The library's dynamic loading of three.js means it is loaded twice

Expected behaviour

There'd be some way to not load the library a second time, since it is already loaded by my code.

Environment

MacOS Chrome

🖼 Screenshots

No response

Additional info

No response

[lgarron]

Make a new project that depends on cubing.js and three.js

Could you provide a more specific repro? With most bundlers, this shouldn't be happening. 🤔

[anicolao]

Execute the following script, for example by running sh -x /tmp/script after pasting this into /tmp/script:

npm init svelte@next threejs-issue
cd threejs-issue/
npm install
npm install cubing
npm install three
cat - <<\EOF | patch -R 'src/routes/+page.svelte'
3,24d2
< 	import { Quaternion } from 'three';
< 
< 	import { TwistyPlayer } from 'cubing/twisty';
< 	import { onMount } from 'svelte';
< 
< 	onMount(async () => {
< 		const twistyPlayer: TwistyPlayer = new TwistyPlayer();
< 		console.log("find content");
< 		let contentElem = document.querySelector('#twisty-content');
< 		console.log({ contentElem })
< 		if (contentElem) {
< 			twistyPlayer.background = 'none';
< 			twistyPlayer.visualization = 'PG3D';
< 			twistyPlayer.controlPanel = 'none';
< 			twistyPlayer.backView = 'top-right';
< 			twistyPlayer.hintFacelets = 'none';
< 			contentElem.appendChild(twistyPlayer);
< 		}
< 	});
< 
< 	const q = new Quaternion();
< 
42,43d19
< 		<p>Q: {typeof q}</p>
< 		<div id="twisty-content" />
EOF
npm run dev

On the npm init step you'll be presented with a UI to choose some options. Choose all defaults, except make sure to choose typescript with typescript syntax, not with js comments.

The last command will start a dev server. Click the link to open it. Open the javascript console and observe the error:

find content
+page.svelte? [sm]:12 Object
client.js?v=a0b8eee0:1575 WARNING: Multiple instances of Three.js being imported.

The problem only occurs when you use TwistyPlayer in this way. If you just use the twisty-player tag, it does not reproduce.

[anicolao]

The same project can be easily used to reproduce the issues with having read-only attributes as implemented by twisty player from bug https://github.com/cubing/cubing.js/issues/223

[lgarron]

Thanks, I'm able to reproduce the warning. Unfortunately, Svelte gives me a useless stack trace, so this will take some further digging.

[lgarron]

Thanks, I'm able to reproduce the warning.

I've lost my repro. @anicolao, would you mind uploading a repo with a repro? npm init svelte@next threejs-issue has various config options that I'm not sure I've selected perfectly.

[anicolao]

As I wrote initially, Choose all defaults, except make sure to choose typescript with typescript syntax, not with js comments. So you probably chose good options ... I didn't save the repo, and when I rerun the script the problem doesn't reproduce.

It does still reproduce for me on my full project, which you can get from https://github.com/anicolao/blueroux on the bluetooth branch as of the latest commit today. The minimal repro was a bit tricky to get working unfortunately so I would rather not invest the time in making it again ... in retrospect I should have found a way to pin the init to a specific version of svelte so that they couldn't change things that would cause it to magically fix itself.

Now that I think of that it is possible that if I run npm install it will fix my current code ... one sec ... no such luck.