Solving: Uncaught TypeError

Questions
,
1

Hey Everyone,

A little new to Three.JS & was trying to work on a project as a hobby. I am trying to make a Pokemon Chess Game. I used pre-existing .SLL files for the chess asset pieces.

I keep having issues trying to get it to load properly though. I am constantly getting this error:

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

I have double checked to make sure all the files are in their right directory. I have everything hosted on GitHub if you guys want to take a peak:

Build Folder
Build Folder816×453 25.1 KB

Index Code
Index Code659×867 20.5 KB

Loaders Folder
Loaders Folder796×890 53.1 KB

Root Folder
Root Folder868×464 28.4 KB

Styles Folder
Styles Folder799×455 18.7 KB

& I’ll try to attach some screenshots here to help:

2

Maybe you should do yourself a favor and not host three.js files in your repository.

Since you are hosting your assets on GitHub then maybe try continue working with the attached standalone HTML file (do note that it is using tabs instead of spaces).

index.zip (1.8 KB)

3

three is a module, this is not how it works. read three.js docs and pick option 1 using vite. threejs journey has a free guided lesson for that First Three.js Project — Three.js Journey

to make it very short, don’t go into web dev without knowing tooling and packages. managing dependencies by hand, copying files around, we used to do that 20 years ago, but nothing works this way today. it has become so much easier.

4

Just make two changes and you are good to go:

image
image1309×771 72.2 KB

The STLLoader imports stuff from other files of Three.js and expects that there is import shortcut named three. You do not define it (if you used package manager like vite it will be defined automatically). To resolve the issue you have to define it manually. Here are the two changes:

Change 1

Define three with import map in the <head> section of your index.html file:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokemon Chess</title>
    <link rel="stylesheet" href="styles/style.css">
	
	<script type="importmap">
		{
			"imports": {
				"three": "https://unpkg.com/three@0.132.2/build/three.module.js",
				"three/addons/": "https://unpkg.com/three@0.132.2/examples/jsm/"
			}
		}
	</script>

</head>

Change 2

Use these maps in the import statements in your app.js file:

import * as THREE from 'three';
import { STLLoader } from 'three/addons/loaders/STLLoader.js';

That’s all.