three.js에서 index.html:1 라인 오류 발생시

1. 문제사항

• 관련 오류 해결 중 다음과 같은 오류가 발생하였다.

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

index.html:1

---

2. 문제 원인

• three.js는 ESM(EcmaScript Module)을 사용한다.
• 공식 github issue
  examples/jsm (여러가지 모듈이 이 곳에 속해있다.
  ex) GLTFLoader.js))의 ES6 모듈은 bare specifier three를 사용하여 import한다.
  이 변화로 인하여 jsdelivr.com이나 unpkg.com에서 사용하는 모듈들과의 작업이 깨졌다.(못쓴다.)
  -> 현재 기본적으로 사용하는 reset-css등이 프로젝트에 존재한다.

---

3. 해결 방안

• skypack.dev를 사용하는 등으로 ESM과 CJS모듈을 혼용하지 말 것.
  특히, three.js는 ESM을 사용하므로, CJS를 사용하는 node.js를 사용할 경우 문제가 생긴다는 점을 염두할 것.
  skypack.dev에서는 설치, 빌드 툴 없이 npm 패키지를 사용할 수 있다고 광고한다.

---

4. 비고

• 해당 사이트에서 styled-reset등을 사용하여 작동시킬 수 있다.
  reset-css는 오래된 것인지 404오류 (서버 찾을 수 없음)가 발생하여 사용할 수 없다.

---

5. 문제파악을 위한 시행 착오

• 없음

---

6. 문제 해결을 위한 시행 착오

• node_module에 있는 것들을 직접 가져와본다.
  관련 문답

  • 시도 : import as THREE from 'three';를
    import as THREE from "../node_modules/three/build/three.module.js로 변경하였다.
  • 결과 : 127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader". Relative references must start with either "/", "./", or "../". 오류 발생.
    -> 이는 GLTFLoader가 'three'를 사용하기 때문에 발생한다.

• skypack.dev의 것을 가져와본다.

  • 시도 : reset-css를 jsdelivr.com에서 link하였지만, 이제는 skypack.dev에서 link한다.
  • 결과 : 해결되지 않음.
    오히려 다음과 같은 오류만 더 발생했다.

  Refused to apply style from 'http://127.0.0.1:5500/path/to/reset-css/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
  
  index.html : 1

  -> 이는 관련된 reset-css스크립트를 head로 이동시키는 것으로 해결하였다.