Uncaught TypeError: Failed to resolve module specifier "three"

Questions
1

question
question2427×1060 321 KB

Hi, I’m brand new to three.js and javascript and I can’t figure out why I’am getting this error…

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

Thanks!

1 Like
2

Try it with:

1 Like
3

I got it thank you!

4

Hello! I’m having the same problem and this is my code: It looks exactly like those from the threejs examples, please help! =(

import './styles.css'
import { setupCounter } from './counter.js'
import * as THREE from '../node_modules/three/build/three.module';
import { GLTFLoader } from '../node_modules/three/addons/loaders/GLTFLoader.js';
import { OrbitControls} from '../node_modules/three/examples/jsm/controls/OrbitControls.js';
import { Light } from 'three';
5

this is not how you use modules, i also don’t think that examples do this. this is how you import three

import * as THREE from 'three'

this is how you import GLTFLoader

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'

node_modules is a local dev environment, you don’t ship that, it’s not part of your project, you don’t refer to it in your code, you don’t fetch or import from it ever.

npm and node_modules need a bundler, it will know what to do with “three” and resolve it. the bundle it creates only contains the code you actually need, nothing else. you can try vite, which is the easiest and fastest to set up. without bundling web dev is hell, the quicker you make that step the better.

1 Like
6

Thank you! I’m alredy using Vite on my project, how to I make it “bundle”? I tried doing npm build and creating a “dist” file but It completly breaks my website and the javascript keeps not working

7

just npm run dev. But for that to work you first have to fix your paths. As I said you cannot text into node modules that’s not how it works.