# Error: Relative references must start with either "/", "./", or "../"

**URL:** <https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573>\
**Category:** Questions\
**Tags:** modules\
**Created:** [March 17, 2020, 12:48pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573 "2020-03-17T12:48:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sleaper](https://avatars.discourse-cdn.com/v4/letter/s/13edae/32.png) [@sleaper](https://discourse.threejs.org/u/sleaper)\
**Post date:** [March 17, 2020, 12:48pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/1 "2020-03-17T12:48:24Z")

</div>

Hi guys,  
I am just begginer and I have this error code:

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

 ![WhatsApp Image 2020-03-17 at 12.33.29](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d38d9f4f2b3d9c906f9eec6bb1ebda4489bfb60d.jpeg)  
Do you know what am I doing wrong?  
thanks

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 17, 2020, 12:58pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/2 "2020-03-17T12:58:50Z")

</div>

Try it with:

```auto
import * as THREE from "../node_modules/three/build/three.module.js

```

---

<div class="post-metadata">

**Author:** ![CHOIX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/choix/32/294_2.png) [@CHOIX](https://discourse.threejs.org/u/CHOIX)\
**Post date:** [January 19, 2021, 9:23pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/3 "2021-01-19T21:23:45Z")

</div>

@Mugen87 There is no “build” folder in the node\_modules/three

Why this does not just work, like its written EVERYWHERE in the docs?  
[https://threejs.org/docs/#manual/en/introduction/Installation](https://threejs.org/docs/#manual/en/introduction/Installation)

Tried like “everything”.

Can someone tell me how to use Three.js with npm?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 19, 2021, 9:40pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/4 "2021-01-19T21:40:20Z")

</div>

> [@CHOIX](#):
>
> Can someone tell me how to use Three.js with npm?

When using the `npm` package, it’s best to work with a bundler like rollup. Use this as a project setup: [GitHub - Mugen87/three-jsm: Minimal three.js project setup using ES6 modules and rollup.](https://github.com/Mugen87/three-jsm)

---

<div class="post-metadata">

**Author:** ![CHOIX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/choix/32/294_2.png) [@CHOIX](https://discourse.threejs.org/u/CHOIX)\
**Post date:** [January 19, 2021, 9:46pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/5 "2021-01-19T21:46:21Z")

</div>

@Mugen87 Thank you for your repo, but how am I supposed to know that, when nowhere in no official documentation anything about that is written? And when I use your base, then it might already be outdated maybe? Why there is no clear instruction on the official documenations how to use THREE npm package? it is so frustrating… back then I would just use a cdn and it worked.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [January 19, 2021, 9:56pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/6 "2021-01-19T21:56:49Z")

</div>

The documentation does not explain how to do relative imports out of the `node_modules` folder because we pretty strongly do NOT advise taking this approach. It is messy and error prone.

A build tool like Parcel, Webpack, or Snowpack is the best option, and will automatically resolve the folder structures correctly. Or you can still use a CDN as before, that’s fine too.

---

<div class="post-metadata">

**Author:** ![CHOIX](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/choix/32/294_2.png) [@CHOIX](https://discourse.threejs.org/u/CHOIX)\
**Post date:** [January 19, 2021, 10:04pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/7 "2021-01-19T22:04:47Z")

</div>

When I go to the npm page: [three - npm](https://www.npmjs.com/package/three)

There is an example how to use the library:

`import * as THREE from './js/three.module.js';`

So I assume the three.module.js is included in the library, after doing: $ npm install three - but its not.

and also when I consult the docs for using EffectComposer: [three.js docs](https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing) they also write I can do $ npm install three and then just use:

`import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';`

But ok, so it means now: after $npm install three, I need to setup a build tool like webpack to build a es6 module from the library and my entry .js code?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [January 19, 2021, 10:41pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/8 "2021-01-19T22:41:24Z")

</div>

> [@CHOIX](#):
>
> After $npm install three, I need to setup a build tool like webpack to build a es6 module from the library and my entry .js code?

If you are using any libraries from npm to build an application, it’s necessary to use some sort of bundler — like Webpack — to build your application and all of its dependencies. This requirement applies to many packages on npm. Using a CDN is also OK, if you’re more comfortable with that.

I’ve suggested an update to the readme to clarify the example you brought up, thanks! [Docs: Update import instructions in readme. by donmccurdy · Pull Request #21113 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/pull/21113)

---

<div class="post-metadata">

**Author:** ![brsastre](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brsastre/32/17200_2.png) [@brsastre](https://discourse.threejs.org/u/brsastre)\
**Post date:** [March 21, 2021, 2:06am UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/9 "2021-03-21T02:06:58Z")

</div>

Choix, I understand you, I am having the exact same issue.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [March 21, 2021, 7:59am UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/10 "2021-03-21T07:59:11Z")

</div>

The problem you are seeing is the difference between using **Module Specifiers** in your code, and your browser expecting **Relative URL References** when it sees an import statement.

Read more about it here, and also in the context of threejs.

[Relative references must start with either “/”, “./”, or “…/” | by Sean Bradley | Threejs Tutorials | Jan, 2021 | Medium](https://medium.com/threejs/module-specifiers-versus-relative-import-references-fd747980ba6f)

In the article, I outline the various strategies you have to mange these features.

But, one important thing to note, is that **Relative URL References** are never going away. So you will always have the option to use **Module Specifiers** in your code, or **Relative URL References**.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [March 21, 2021, 11:38am UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/11 "2021-03-21T11:38:14Z")

</div>

For anyone struggling with this the easiest solution is to avoid using NPM and load three from a CDN like [unpkg.com](http://unpkg.com):

```javascript
// Find the latest version by visiting https://unpkg.com/three, currently it's 0.126.1

import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';

import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';

```

---

<div class="post-metadata">

**Author:** ![neo](https://avatars.discourse-cdn.com/v4/letter/n/9fc348/32.png) [@neo](https://discourse.threejs.org/u/neo)\
**Post date:** [May 12, 2021, 11:32am UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/12 "2021-05-12T11:32:30Z")

</div>

In my code when I use the following imports, I get the same error. When I change the versions to 127 or earlier it works. Has something changed in version 128?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/d/3de9aa1100509cfac09cc2e38d63427ec9eefa79.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 12, 2021, 1:35pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/13 "2021-05-12T13:35:33Z")

</div>

Please read the following GitHub issue for more information:

> <https://github.com/mrdoob/three.js/issues/21707>
>
> With version 128, the following code:
> 
> \`\`\`
> \<script type="module"\>
> import \* a…s THREE from 'https://unpkg.com/three@0.128.0/build/three.module.js';
> import { OrbitControls } from 'https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js';
> \</script\>
> \`\`\`
> causes the following error:
> 
> \`\`\`
> Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
> \`\`\`
> 
> It worked fine in 127 though.

---

<div class="post-metadata">

**Author:** ![neo](https://avatars.discourse-cdn.com/v4/letter/n/9fc348/32.png) [@neo](https://discourse.threejs.org/u/neo)\
**Post date:** [May 12, 2021, 2:55pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/14 "2021-05-12T14:55:27Z")

</div>

Thank you @Mugen87

---

<div class="post-metadata">

**Author:** ![neo](https://avatars.discourse-cdn.com/v4/letter/n/9fc348/32.png) [@neo](https://discourse.threejs.org/u/neo)\
**Post date:** [April 16, 2022, 9:47pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/16 "2022-04-16T21:47:49Z")

</div>

Today I tried to update my URL version to the latest 139.2. It breaks from version 137 and up.  
I am getting the same error as before. I googled but I was unable to find a solution. Please let me know what change or which CDN I should switch to.

sample code: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/neo_/q7ntu0m1/4/)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/103d048f267c28c2e3328d296b62f81a71338d44.png)

---

<div class="post-metadata">

**Author:** ![neo](https://avatars.discourse-cdn.com/v4/letter/n/9fc348/32.png) [@neo](https://discourse.threejs.org/u/neo)\
**Post date:** [April 17, 2022, 3:48pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/18 "2022-04-17T15:48:02Z")

</div>

I found the solution by looking at [three.js examples](https://threejs.org/examples/#webgl_clipping)

Add the following script in the body

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/0/70997e8ce1d754bf7416e0d2070fab370eadb1ed.png)

And switch your import statements to [unpkg.com](http://unpkg.com)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/caf5fe8e95dbd3fd4188870676b23e1fffcdc235.png)

Including es-module.shims.js is necessary for some browsers like Firefox. However, I still get an error message in Firefox console (but the project runs).

So this works in my local website. I was unable to make this work in Codepen or jsfiddle websites. Is it because of their platform? If not, can anyone provide a sample code that works in those websites?

---

<div class="post-metadata">

**Author:** ![harry-whorlow](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harry-whorlow/32/25734_2.png) [@harry-whorlow](https://discourse.threejs.org/u/harry-whorlow)\
**Post date:** [April 22, 2022, 7:54am UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/19 "2022-04-22T07:54:25Z")

</div>

Heres an [example](https://www.youtube.com/watch?v=5IG4UmULyoA) of whats going wrong and how to fix it, from my favourite coding YouTuber Fireship. This issue will show up anytime when you use an NPM library in a live environment.

It’s not for THREE but the concept is the same, this goes for any NPM library when you want to run it on a web browser.

For a new developer this goes unchecked, because your probably running “npm run dev” then going to the specified localhost:\*\*\*\*\*\* this wont work for a live site (i.e. live server or any published site)… it needs to be bundled so you can use it when published, as specified in the video linked.

If your going to use webpack for the bundling remember to place the index.js (or whatever your calling it) into a /src directory located in the root directory, otherwise you need to configure a webpack.config.js file.

 ![pre-bundle](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/0/c085d07a8dfa04b9ab24e44bef3ff37c3b38ec4d.jpeg)

 ![post-bundle](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/6/a66d3711e4a3f2dc11af6bc68ddf9cd8442d7279.jpeg)  
  
  
Hope this helps!

---

<div class="post-metadata">

**Author:** ![Shane\_Brumback](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shane_brumback/32/65134_2.png) [@Shane\_Brumback](https://discourse.threejs.org/u/Shane_Brumback)\
**Post date:** [May 26, 2022, 11:58am UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/20 "2022-05-26T11:58:58Z")

</div>

Here’s a great example as well using Three.js and webpack. I was able to integrate one of my more complicated Three.js apps but still having a few issues with DOM elements but it works! Although I do seem to spend more time trying to tweak it just to work rather than working on the 3D visualization. I don’t see much advantage to npm other than the code bundling ability.

> **[GitHub - designcourse/threejs-webpack-starter](https://github.com/designcourse/threejs-webpack-starter)**
>
> Contribute to designcourse/threejs-webpack-starter development by creating an account on GitHub.

[![](https://img.youtube.com/vi/pUgWfqWZWmM/maxresdefault.jpg "Getting Started with THREE.JS in 2021!") ](https://www.youtube.com/watch?v=pUgWfqWZWmM)

---

<div class="post-metadata">

**Author:** ![TrungCTR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trungctr/32/45838_2.png) [@TrungCTR](https://discourse.threejs.org/u/TrungCTR)\
**Post date:** [March 17, 2024, 4:11pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/22 "2024-03-17T16:11:49Z")

</div>

Hi everyone !  
I’m have a same bug but I’dont use CDN or node module. I using download code from github

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/8/5880c5967c9a8bd424aefc6a3820390d300bd5be.png)  
how to fix it ☹

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [March 17, 2024, 10:07pm UTC](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573/23 "2024-03-17T22:07:17Z")

</div>

use an import map that tells the browser where it can find your self-hosted `three`  
[Using Import Maps - Three.js Tutorials (sbcode.net)](https://sbcode.net/threejs/importmap/)

[Next page](https://discourse.threejs.org/t/error-relative-references-must-start-with-either-or/13573.md?page=2)