[Next.js] cannot use jsx unless the '--jsx' flag is provided 오류 해결

📜 오류 발생

 

기존의 JavaScript 기반의 Next.js 프로젝트에 Typescript를 적용하던중 아래와 같은 오류가 발생하였다.

cannot use jsx unless the '--jsx' flag is provided

 

 

 

문제를 해결하기 위해 검색하던 중 VS Code에서Typescript 버전을 변경하면 해결된다는 자료들을 발견하였다.

 

 

F1 -> Typescript: Select TypeScript Version... 클릭

 

 

Use Workspace Version 클릭

 

 

 

 

Workspace Version으로 변경후 문제는 해결되었는데 VS Code's Version과 어떤 차이가 있길래 문제가 발생했는지 찾아보았다.

https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions

TypeScript Compiling with Visual Studio Code

 

간단하게 요약하자면, 공식 문서에서 이야기하는 바는 아래와 같다. (초월 번역 했습니다)

 

VS Code는 자체적으로 최신 버전의 TypeScript가 기본으로 제공되는데, 이는 작업 파일을 컴파일하는 데 사용하는 TypeScript 버전과 별개이다. 일반적으로는 VS Code에서 기본으로 제공하는 TypeScript 버전을 사용할 수 있지만 문제가 생기면 작업 파일 버전으로 변경해야 할 수도 있다. (변경 방법은 위에 설명드린 내용과 같습니다)