Threejs not loading in time

I have a website running Threejs.

It 80% of the time, loads correctly.
But 20% of the time, it gives error where it appears like Threejs didn’t manage to load in time before the following statement:

import * as THREE from 'three';

Then it gives the following error:

Uncaught TypeError: The specifier “three” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

The code that I am running, is the following:

<!DOCTYPE html lang=en style="height:100%;"><head><meta charset="UTF-8"/></head>

<script async src="../../modules/js/external/threejs/shims/index.js"></script>
<script type="importmap">{"imports":{
    "three": "../../modules/js/external/threejs/index/2/build/three.module.js",
    "three/addons/":"../../modules/js/external/threejs/index/2/examples/jsm/"
    }}  
</script>

<script type="module" src="../../modules/js/external/threejs/api/index.js"></script>
<script type="module" src="init/external.js"></script>

In the second to last line, …threejs/api/index.js,
the import statement is failing, around 20% of the time.

I have a suspicion I should change something about how I Load the shims, or the mapimport. To make sure the threejs/api/index.js, doesn’t load until Threejs has fully finished loading.

Does anybody know, how I can do that?

You can try to get the error when loading the following url:

OpenAge 3d

On my computer, occationally, there’s just an error which gets solved just by refresh.
I guess something is loading into the cache, leading to the computer managing to load threejs in time in the next attempt.

Maybe sometime one of script cant load intime firstly and then queque corrupted

I don’t understand what you’re saying.

Delete “async” and refresh pahe several time to check error

I already tried that, then I just get the error all the time.

I think Mugen87 can help

see my answer to the same issue here…

2 Likes