After further investigation, I realized that my previous answer was not entirely accurate as it resulted in the following error:
TypeError: Cannot read property 'Objloader2' of undefined
. This mistake went unnoticed initially because I was focused on the Network tab in the dev console. Despite this error, the file is still returning a 200 status code from the server, which is noteworthy.
The issue stems from the fact that ts_devserver expects only UMD inputs while our script is different. To address this, I attempted to wrap it using 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 then added it to ts_devserver as a script:
ts_devserver(
...,
scripts = [
...,
":objloader_umd",
],
)
This modification allows us to now import elements from the newly created module objloader!
await import('objloader')
Essentially, this could be the solution. However, for added convenience, let's take one more step.
Given that we already have rxjs_shims.js for deep imports with rxjs, let's include another similar script:
// 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});
});
In essence, what this does is create an alias for the import path from
three/examples/jsm/loaders/OBJLoader2
to
objloader, particularly for the dev server environment.
With this approach, there is no longer a need to differentiate between development and production builds since imports can remain consistent without altering the TS source code!