[Three.js] Uncaught TypeError: Failed to resolve module specifier "three"... 에러

Three.js 에서 Uncaught TypeError: Failed to resolve module specifier "three"... 에러 해결법

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

 

출처

: https://stackoverflow.com/questions/68160473/failed-to-resolve-module-specifier-thre

: https://stackoverflow.com/questions/65697410/not-using-node-js-uncaught-typeerror-failed-to-resolve-module-specifier-thre

 

Three.js의 RectAreaLightUniformsLib과 같은 ES6 모듈을 사용하려고 하면 위와 같은 에러가 발생할 때가 있다.
Three.js를 npm 모듈로 설치하지 않고 공식 사이트에서 배포하는 파일을 다운로드해서 사용하고 있다면 아래와 같이 수정해준다.

 

1. index.html 파일에 importmap을 추가 (경로를 잘 확인하기)

<!-- index.html -->
<script type="importmap">
    {
        "imports": {
            "three": "../three/build/three.module.js",
            "three/examples/jsm/controls/OrbitControls":"../three/examples/jsm/controls/OrbitControls.js",
        }
    }
</script>
<script type="module" src="main.js" defer></script>

 

2. 스크립트의 import 문을 to-be 와 같이 수정

// main.js

// as-is
import * as THREE from '../three/build/three.module.js'
import { OrbitControls } from '../three/examples/jsm/controls/OrbitControls.js';

// to-be
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

 

 

※ importmap 의 지원 범위 : https://caniuse.com/import-maps