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 “…/”.
Do you know what am I doing wrong?
thanks
Do you know what am I doing wrong?
thanks
Try it with:
import * as THREE from "../node_modules/three/build/three.module.js
2 Likes
@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
Tried like “everything”.
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.
1 Like
@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.
2 Likes
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.
2 Likes
When I go to the npm page: three - npm
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 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?
1 Like
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
Choix, I understand you, I am having the exact same issue.
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.
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.
For anyone struggling with this the easiest solution is to avoid using NPM and load three from a CDN like unpkg.com:
// 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';
2 Likes
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?
Please read the following GitHub issue for more information:
1 Like
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
1 Like
I found the solution by looking at three.js examples
Add the following script in the body
And switch your import statements to unpkg.com
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?
Heres an example 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.
Hope this helps!
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.
Hi everyone !
I’m have a same bug but I’dont use CDN or node module. I using download code from github
how to fix it
use an import map that tells the browser where it can find your self-hosted three
Using Import Maps - Three.js Tutorials (sbcode.net)
1 Like