I am planning on hosting the 3js library on my own server.
And therefore I am going by the “Install from CDN or static hosting”.
As stated there I copy the following code to my site.
<!-- Shims -->
<script async src="https://email@example.com/dist/es-module-shims.js"></script>
<!-- Import -->
<!-- Implement -->
import * as THREE from 'three';
const scene = new THREE.Scene();
I replace the shims and import modules with the files I downloaded from the website.
At that this code works.
But now the first thing I want to do, is to move each of those parts, into its own script.
I create file “import_map.js” in the same directory and add src=“./import_map.js” to the importmap script element. Then I copy the Import code to that file and remove it from the index.html.
Now I get error:
Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.
It is like the code at import_map.js, never ran at all.
I can move Implement into its own file. But not Import.
How do I go about putting Import into its own js file?
I think it has something to do with shim’s async.
I sometimes get the error and sometimes not. It’s like the shim part is sometimes managing to get loaded before the implementation, and sometimes not.
Still not sure how to solve it though.
I’m worried if I have to have the code at index.html forever for I have a very big system and the only way to take it forward is to fanatically defend the readability of the system. Plus I have a very specific setup involved, and having the code itself at index.html would break all of that.
otherwise if you’re dynamically creating html pages, would you not be able to create a base html template that includes an inline importmap, append other required scripts to this template and save it out as new html documents from there?
this is a browser specific issue and not related to three.js, you can try to post a request to mozilla and / or follow progress of the importmap specification here. As you can see from the comments in this thread, it’s a long awaited unfinished feature to browsers across the board.
docs are currently being rewritten, with this you will be up and running under 10 seconds. here’s a preview: three.js docs