New Scala.js facade for Three.js -> "Cannot find module "THREE"" - three.js

Question

As https://github.com/antonkulaga/threejs-facade is heavily outdated I tried an approach like: https://github.com/Katrix-/threejs-facade and would like to create a facade for the new three.js library.
I am by no means a JS expert, nor am I a Scala.js expert, so odds are I am doing something really dumb.
After another question I am using this sbt-scalajs-bundler and sbt-web-scalajs-bundler
My build.sbt looks like this:
lazy val client = (project in file("modules/client"))
.enablePlugins(ScalaJSBundlerPlugin, ScalaJSWeb) // ScalaJSBundlerPlugin automatically enables ScalaJSPlugin
.settings(generalSettings: _*)
.settings(
name := "client"
//, scalaJSModuleKind := ModuleKind.CommonJSModule // ScalaJSBundlerPlugin implicitly sets moduleKind to CommonJSModule enables ScalaJSPlugin
,jsDependencies += ProvidedJS / "three.min.js"
)
lazy val server = (project in file("modules/server"))
.enablePlugins(PlayScala, WebScalaJSBundlerPlugin)
.settings(generalSettings: _*)
.settings(
name := "server"
,scalaJSProjects := Seq(client)
,pipelineStages in Assets := Seq(scalaJSPipeline)
//,pipelineStages := Seq(digest, gzip)
,compile in Compile := ((compile in Compile) dependsOn scalaJSPipeline).value
)
three.min.js is in the resources-folder of my client project.
One part of the Facade is e.g.
#js.native
#JSImport("THREE", "Scene")
class Scene extends Object3D {
and I want to use it like this: val scene = new Scene. On scala.js side this actually compiles just fine, but when I run it I get:
Error: Cannot find module "THREE"
in the browser and I wonder why. It's called like this in three.min.js after all.
Now I tried providing and serving the three.min.js file from the server side as well, because I thought that maybe it was just missing at runtime, but no, that does not seem to be the cause.
So now I wonder what am I doing wrong here?
Just to clarify: Rest of transpiled js works just fine, if I do not export any usage of the Facade!

Answer 1

As explained in this part of Scala.js documentation, #JSImport is interpreted by the compiler as a JavaScript module import.
When you use the CommonJSModule module kind (which is the case when you enable the ScalaJSBundlerPlugin), this import is translated into the following CommonJS import:
var Scene = require("THREE").Scene;
This annotation only tells how your Scala code will be interfaced with the JS world, but it tells nothing about how to resolve the dependency that provides the THREE module.
With scalajs-bundler you can define how to resolve JS dependencies from the NPM registry by adding the following setting to your client project:
npmDependencies += "three" -> "0.84.0"
(And note that you can’t use jsDependencies to resolve these modules with #JSImport)
Also, note that the correct CommonJS import to use three.js is "three" instead of "THREE", so your #JSImport annotation should look like the following:
#JSImport("three", "Scene")
Alternatively, if you don’t want to resolve your dependencies from the NPM registry, you can supply your CommonJS module as a resource file. Just put it under the src/main/resources/Scene.js and refer to it in the #JSImport as follows:
#JSImport("./Scene", "Scene")
You can see a working example here.