I'm working on a simple Three.js example in StackBlitz, loading this library off of a content delivery network.
If I place the import statement inside a script tag embedded in the HTML document, it's able to resolve the package and everything works as desired:
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.126.0/build/three.module.js';
// TODO: some code using Three.js...
</script>
</body>
</html>
But the boilerplate for setting up a 3D scene can get a bit verbose, so I'd like to offload some of it to my own module file.
If I make a script.js file like so:
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.126.0/build/three.module.js';
function foo() {}
export { foo }
...and then reference it from a script tag like so:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js" type="module"></script>
</head>
<body>
</body>
</html>
...or like so:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="module">
import foo from '/script.js';
</script>
</body>
</html>
Then I get the following error message:
Error in 0.126.0/build/three.module.js". Relative references must start with either "/", "./", or "../".
Failed to resolve module specifier "et/npm/three@0.126.0/build/three.module.js". Relative references must start with either "/", "./", or "../".
Note that the module specifier it quotes is missing the first 22 characters of the URL. So it seems like StackBlitz is somehow extracting just part of the path and trying to load from that incomplete address.
Is there something I can do to avoid this behaviour, or load my module in a way that's more compatible with how StackBlitz handles modules?