# Solving: Uncaught TypeError

**URL:** <https://discourse.threejs.org/t/solving-uncaught-typeerror/71326>\
**Category:** Questions\
**Tags:** loaders, animation\
**Created:** [September 27, 2024, 5:09pm UTC](https://discourse.threejs.org/t/solving-uncaught-typeerror/71326 "2024-09-27T17:09:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DanMilheiro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danmilheiro/32/52172_2.png) [@DanMilheiro](https://discourse.threejs.org/u/DanMilheiro)\
**Post date:** [September 27, 2024, 5:09pm UTC](https://discourse.threejs.org/t/solving-uncaught-typeerror/71326/1 "2024-09-27T17:09:16Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/3/7350b7ad0c2bdf015568fa460c05ff39928e9fee.png)  
 ![Index Code](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/f/bf6e8cb833bf71bb1b310331a7bb604d9ee5c624.png)  
 ![Loaders Folder](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/e/fec9e99bdc9aeb06bfb9e2d19f7aeef3c0828cf5.png)  
 ![Root Folder](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/7/2742d32f829e5800a5ace1b86f11194a8030612a.png)  
 ![Styles Folder](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/9/69d3e8c59ca824ad6ac4961972f72a6ca57de0ca.png)

> **[GitHub - DanMilheiro/Pokemon-Chess: Attempting to recreate the traditional game of...](https://github.com/DanMilheiro/Pokemon-Chess)**
>
> Attempting to recreate the traditional game of Chess but with all Pokemon models for the Chess pieces.

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

---

<div class="post-metadata">

**Author:** ![GitHubDragonFly](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/githubdragonfly/32/20752_2.png) [@GitHubDragonFly](https://discourse.threejs.org/u/GitHubDragonFly)\
**Post date:** [September 28, 2024, 12:57am UTC](https://discourse.threejs.org/t/solving-uncaught-typeerror/71326/2 "2024-09-28T00:57:33Z")

</div>

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](https://discourse.threejs.org/uploads/short-url/271CB6mEuAchYVjIWIX7MBejkKv.zip) (1.8 KB)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 28, 2024, 6:22am UTC](https://discourse.threejs.org/t/solving-uncaught-typeerror/71326/3 "2024-09-28T06:22:49Z")

</div>

three is a module, this is not how it works. read [three.js docs](https://threejs.org/docs/index.html#manual/en/introduction/Installation) and pick option 1 using vite. threejs journey has a free guided lesson for that [First Three.js Project — Three.js Journey](https://threejs-journey.com/lessons/first-threejs-project)

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.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [September 28, 2024, 7:00am UTC](https://discourse.threejs.org/t/solving-uncaught-typeerror/71326/4 "2024-09-28T07:00:43Z")

</div>

> [@DanMilheiro](#):
>
> Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”.

Just make two changes and you are good to go:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/0/f01414c9767f801ff4d7a35b1199654a8b377d96.jpeg)

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:

```javascript
<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:

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

```

That’s all.