Using threejs in two separate Blazor-imported modules throws "WARNING: multiple instance of Three.js being imported"

Hello,

We’re using three in different parts of a Blazor-application. Three is used in two different modules, which are imported separately in the app (see screenshot).

We’re disposing the module and other dependencies in three, but it seems three is not fully unloaded, because it throws the warning when we switch between these two modules (only on first load though).

Anyone got an idea on how to fully unload three or any other way to solve this?

Is this warning only related to the issue of possible conflicting versions ?

The warning is to notify you of either conflicting revisions, or possible overhead being loaded.
Personally I would prefer it if it only throws the warning when it detects different revisions being loaded, but that’s me.

The revision gets added to the window object by the way. So while unloading and purging Three, that revision will linger on. You can manually get rid of it by undefining window.__THREE__ if you really want that warning to be gone. Just make sure you’re really unloading the three instance before loading a new one :slight_smile:

It’s actually a potentially deeper issue to have multiple instances of threejs even if they are the same revision, just coming from different sources, since there is internal state stored in the THREEJS namespace… like caching for instance.

@oscarsjo are you using
importmaps
in your html to declare where to load threejs from?

You are correct, I was painting with too broad strokes.

Depending on your setup, implementation, and tree shaking it may cause unwanted effects. But it also might be fine; hence a warning over a hard error.

i am not sure sure what you mean by unloaded, you don’t unload modules. the webgl context is closed is all. if you get double loads, which points to conflicting namespaces as in three comes from two or more sources, your build system is at fault or a dependency that has three misconfigured (three in dependencies instead of peerDependencies in package.json), or you have a mistake in fetching three yourself via cdns where you load it from someplace and then from another, or a dependency does. i would consume three via npm and vite, that is a pretty good guarantee that everything will work fine.

1 Like

It seems the issue was that three js was bundled (so the double import would load it twice), using importmaps solved the issue.

Thanks for the help and feedback everybody!

1 Like