Unable to use Three.Js with ts_devserver

[flolu]

🐞 bug report

Affected Rule

The issue is caused by the rule: ts_devserver

Description

I have an Angular application with Three.js installed.
Everything works fine until I try to import the OBJLoader2 from three/examples/jsm/loaders/OBJLoader2.

const module = await import('three/examples/jsm/loaders/OBJLoader2')
const loader = new module.OBJLoader2()

The code snippet above doesn't work with the ts_devserver. I get this error in the browser console:

GET http://localhost:4200/three/examples/jsm/loaders/OBJLoader2.js net::ERR_ABORTED 404 (Not Found)
Error: Script error for "three/examples/jsm/loaders/OBJLoader2"
    at makeError (ts_scripts.js?v=03400874:175)
    at HTMLScriptElement.onScriptError (ts_scripts.js?v=03400874:1745)

So the ts_devserver cannot find the imported script. But running the app in production works totally fine.

🔬 Minimal Reproduction

https://github.com/drakery3d/angular-bazel-three-starter/tree/ac0c89abf267af094a555c5e4867a46e2ee33a8f

🔥 Exception or Error

GET http://localhost:4200/three/examples/jsm/loaders/OBJLoader2.js net::ERR_ABORTED 404 (Not Found)
Error: Script error for "three/examples/jsm/loaders/OBJLoader2"
    at makeError (ts_scripts.js?v=03400874:175)
    at HTMLScriptElement.onScriptError (ts_scripts.js?v=03400874:1745)

[alexeagle]

This is because ts_devserver requires all inputs to be named AMD format, or for you to supply a shim that makes it loadable this way.

see more https://github.com/angular/angular-bazel-example/wiki/Running-a-devserver-under-Bazel (which is linked from the ts_devserver doc https://bazelbuild.github.io/rules_nodejs/TypeScript.html#ts_devserver)

[alexeagle]

(note I have #2239 out to make this a bit more obvious)

[flolu]

@rayman1104 figured out how to make it work with ts_devserver: https://stackoverflow.com/a/64310071/8586803

It basically goes like this:

wrapping the imported module into a npm_umd_bundle

load("@build_bazel_rules_nodejs//internal/npm_install:npm_umd_bundle.bzl", "npm_umd_bundle")

npm_umd_bundle(
    name = "objloader_umd",
    package_name = "objloader",
    entry_point = "@npm//:node_modules/three/examples/jsm/loaders/OBJLoader2.js",
    package = "@npm//three",
)

and adding it to the scripts of the ts_devserver

ts_devserver(
  ...,
  scripts = [
    ...,
    ":objloader_umd",
  ],
)

and lastly a shim that makes it importable from the three/examples/jsm/loaders/OBJLoader2:

// three/examples/jsm/loaders/OBJLoader2 -> objloader
(function (factory) {
  if (typeof module === 'object' && typeof module.exports === 'object') {
    var v = factory(require, exports);
    if (v !== undefined) module.exports = v;
  } else if (typeof define === 'function' && define.amd) {
    define('three/examples/jsm/loaders/OBJLoader2', ['exports', 'objloader'], factory);
  }
})(function (exports, objloader) {
  'use strict';
  Object.keys(objloader).forEach(function (key) {
    exports[key] = objloader[key];
  });
  Object.defineProperty(exports, '__esModule', {value: true});
});

This is the commit in which I fixed the problem: https://github.com/drakery3d/angular-bazel-three-starter/commit/62f740d63fc9a7c5fa3772f41367f5df088fdc38