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://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<!-- Import -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js"
}
}
</script>
<!-- Implement -->
<script type="module">
import * as THREE from 'three';
const scene = new THREE.Scene();
</script>`
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?
Note:
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.
That’s an interesting question and not seen it done that way before, do you have a code snippet of what you’re currently trying now? Are you for example setting the script type tag? eg…
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.
OK I think the problem might be that you’re assigning a .js file type to the src, the importmap is of course in json format, this is quite a guess here but you could try to save the contents…
by the looks of it, in chrome at least, when trying to import an external .json src…
I get the following error…
which is self describing… import maps are a relitively new and incomplete addition to browser specifications so i guess it may be a while before external import maps are supported.
there may be some “hackarounds” in terms of your use case such as this github comment.
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.
the current docs are a bit confusing, you won’t easily get to a working set up with that. like @Lawrence3DPK said, these are incomplete browser specs, not standards. it is questionable how feasible it even is to deal with this by hand, import maps especially get increasingly more difficult if you deal with 3rd party dependencies with sub-dependencies. not even to mention that 90% of npm is still common js, you would not be able to participate in the javascript eco system.
docs are currently being rewritten, with this you will be up and running under 10 seconds. here’s a preview: three.js docs
