three.js + typescript (@types/three) 설정시 에러 해결

three 라이브러리를 

Webpack 사용하는 javascript 프레임워크에 세팅할 때 발생한 에러이다.

 

평소대로

npm i three @types/three

해서 라이브러리를 설치하면

아래와 같은 에러와 함께 빌드가 안되는 걸 볼 수 있다 

TypeScript error TS1005: ';' expected

 

자동으로 버전이 맞춰지지 않아서 생기는 문제인데 이 때 

package.json 의 typescript 버전과 @types/three 의 버전을 맞춰주면 해결된다

 

예를 들어 typescript 버전이 

"typescript": "~4.2.3"

이면 아래 페이지에 접속해서 

 

https://www.npmjs.com/package/@types/three?activeTab=versions 

@types/three

 

ts4.2 를 Tag 로 가지고 있는 Version 으로

"@types/three": "0.148.0",

이렇게 맞춰주면 해결된다

 

타이핑해서 버전을 바꿔준 경우

1. 기존 node_modules 폴더 삭제,

2. package_lock.json 삭제 후

3. npm i 해서 라이브러리 재설치

하면 깔끔하게 나오는 걸 볼 수 있다.