Project: 🚩codefolio - toast ui Editor(codeSyntaxHighlightPlugin) 적용 중 에러 노트

🎯목적 :

Next 개발 환경 devDependencies 이해하고 기록 남기기

 

🤢 오류 해결 :

• 모듈 설치 후 생기는 타입 에러, import not found

---

1. Vercel Deployment Status Building Error

 

우리 프로젝트는 vercel을 사용하여 deploy를 한다.

첫 init을 한 후, vercel 에 깃허브가 연동이 되면

 

친절하게도 vercel은 자동으로 commit에 대한 변동을 인식하고

해당 내용으로 build를 해서 done 이 되는지의 여부를 알려준다.

 

하지만 오늘 커밋에서 building 에러가 났는데,

import를 하는 컴포넌트는 2개 였으나 1개의 컴포넌트에만 에러가 나서

왜 그런지 이해가 안되었다..

 

서칭 후 typescript 빌딩이 되지 않는 문제였고

 

Type error: Could not find a declaration file for module 'prismjs'. '/vercel/path0/node_modules/prismjs/prism.js' implicitly has an 'any' type.

위 같은 에러를 만들었다

 

---

+ 오류 : 첫번째 시도 방법

 

위 에러에 나와있는 방법대로 시도를 했다.

우리는 패키지 매니저로 yarn을 사용하기 때문에

 

yarn add @type/prismjs

명령어를 입력해 package.json 에 추가된 것을 확인 했으나

 

'AS-IS'

모듈 'prismjs'에 대한 선언 파일을 찾을 수 없습니다.

라는 메세지와 함께 인식하지 못했다..

 

---

+ 오류 : 두번째 시도 방법

tsconfig.json 파일에

경로 설정을 해주면 문제가 해결될까?

 

라는 생각에

{
  "compilerOptions": {
    "typeRoots" : ["./@types", "./node_modules/@types"]
  },
}

파일에 위 구문을 추가했다.

 

하지만 아무런 일도 일어나지 않았고,

문제 인식을 했다..

 

---

+ 오류 : 세번째 시도 방법

문제는 package.json 이였다.

 

next는 dev 환경에서 실행되며,

typescript는 컴파일 전의 상태이기 때문에

 

"dependencies": {
    "prismjs": "^1.29.0"
  },

dependencies 에 있는 패키지를

 

"devDependencies": {
    "@types/prismjs": "^1.26.0"
    }

devDependencies 로 이동해주어야 인식할 수 있는 상태가 된다.

 

'AS-IS'

 

'TO-BE'

 

---

 

 최종 정리 

1. next는 dev 환경에서 개발 하고 있다는 것을 항상 인지하자.
2. devDependencies에 속한 라이브러리는 다운로드 대상에 포함되지 않고 개발환경, 빌드시 사용된다.