Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"

Questions
1

Greetings! I have tested the following code and encountered an error:

javascript

Copy code

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js';
import { FBXLoader } from 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/loaders/FBXLoader.js';

I received the following error:

Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”.

I have searched for this error, including in this community. However, I cannot follow the instructions provided because, due to company protocol, I cannot use the NPM installer. Thus, I have imported three.js directly from the URL. The other code file worked well with the import from the script:

html

Copy code

<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>

How can I properly import three.js using this method?

2
  1. Consider changing the company :skull:
  2. Being forbidden from using npm does not stop you from using vite / bundlers / installing modules so to speak. You just npm-install it once, then remove package.json and just commit node_modules together with the entire project (whether that’s a good idea or not - I’d leave for the company to decide :see_no_evil: ) That way you can use vite and threejs in a pleasant way.
  3. If you cannot use npm - I’d still avoid using CDNs. Download the .js file from the CDN and store it within the project files - CDNs are not a production-ready solution, as soon as a CDN goes down so will your project and you will be able to do absolutely nothing about that fact.
  4. But going all the way back - to use three in a non-modular way you cannot do this:
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js';
import { FBXLoader } from 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/loaders/FBXLoader.js';

Instead just do this in your HTML (use /js instead of /jsm in path; and you have to import everything from examples directory separately, imported addons will be usually appended to the global THREE scope; and you’re limited to older versions of three as new releases do not offer js builds anymore):

<script src="//cdn.jsdelivr.net/gh/mrdoob/three.js@r151/build/three.js"></script>
<script src="//cdn.jsdelivr.net/gh/mrdoob/three.js@r147/examples/js/loaders/FBXLoader.js"></script>

And then in js use it as:

new THREE.WebGLRenderer();
new THREE.FBXLoader();
1 Like
3

Hey, the following works in e.g. Chrome and Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>three.js bootstrap</title>

    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js"
        }
      }
    </script>

    <script type="module">
      import * as THREE from "three";
      import { FBXLoader } from 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/loaders/FBXLoader.js';
      console.log('THREE', THREE);
      console.log('FBXLoader', FBXLoader);
    </script>

  </head>
  <body>
    <h1>Using three.js without a JavaScript Bundler</h1>
  </body>
</html>
2 Likes
4

I got the best advice(1.) thank you