Threejs Install. Put Import into its own js file

I am trying to upgrade my version of 3js.
To do that I am just reinstalling 3js.

I am going by the directions on the 3js website, here:

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=""></script>

<!-- Import -->
<script type="importmap">
    "imports": {
      "three": "<version>/build/three.module.js"

<!-- Implement -->
<script type="module">
  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.

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…

<script type="importmap" src=“./import_map.js”>
1 Like

that’s exactly how i’m running it.

And inside import_map.js there is:

    "imports": {
      "three": "<version>/build/three.module.js"

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.

There’s a bit of guess work here, assuming you’re adding the async module shims script before the import map…

I’m not certain if es-module-shims.js needs to read the importmap directly from the dom or not
Is your console throwing any warnings or errors?

1 Like

I updated the original question to include the error message.

Yes the shims reference is before it. I think I included it in the example above.

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…

    "imports": {
      "three": "<version>/build/three.module.js"

in to a .json file and change the src to…

<script type="importmap" src=“./import_map.json”>

This is untested my side, not sure it’ll work but worth a try

1 Like

I renamed the file extension to .json and changed the filename accordingly but get the same error.

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?

1 Like

I’m using Firefox and it doesn’t show the first line in the error message.

I have just given up and just place the import part brute force in the index.html for now.

Is there some way to post this as a feature request for threejs?
I’ve looked a bit and there doesn’t seem to be any place for that.

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.

1 Like

the current docs are a bit confusing, you won’t easily get to a working set up with that. like @forerunrun 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


Thanks. I was actually thinking how they needed an update.

Is it possible to participate in the documentation updating?

sure Documentation: Update "Installation" guide with clearer guidance on build tools and CDNs by donmccurdy · Pull Request #25468 · mrdoob/three.js · GitHub

1 Like