[트러블슈팅] TS17004: Cannot use JSX unless the '--jsx' flag is provided.

이미지 출처 https://drublic.de/blog/from-js-to-typescript

🚨 발생 문제

TS17004: Cannot use JSX unless the '--jsx' flag is provided.

TS6142: Module './App' was resolved to 'C:/Users/user/Desktop/jiwon/redux-for-beginners/src/App.tsx', but '--jsx' is not set.

 

문제 상황

• 예전에 만들어 둔 자바스크립트 React app을 아래 블로그를 참고하여 타입스크립트로 마이그레이션을 완료한 뒤, yarn start하여 리액트 앱을 실행했는데 위와 같은 에러 메시지 발생

마이그레이션 방법 참고 블로그 - How to Migrate a React App to TypeScript

 

 

---

🤔 문제 원인

tsconfig.json에서 jsx 설정을 해주지 않아서 발생

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    
    // 바로 이 부분이 주석처리가 되어있어 활성화되지 않아 있었음
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    
    // ...

 

 

---

💊 해결 방법

tsconfig.json에서 jsx 관련 설정 코드 활성화

기존 jsx 코드를 preserve(보존)할 것인지 여부를 설정하는 코드를 주석 해제하여 활성화 해주었다.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "jsx": "preserve",                                /* Specify what JSX code is generated. */
    
    // ...

 

 

---

타입스크립트 공부를 시작하고 yarn create react-app my-app --template typescript 로 타입스크립트 리액트 앱을 새로 생성만 해봤었다. 그래서 자바스크립트로 이미 만들어져 있던 앱을 타입스크립트로 마이그레이션 해본 적이 없어서 연습 겸 시도했다가 마주한 에러였는데, tsconfig.json 설정 파일에 답이 있다는 것을 배운 트러블슈팅 경험이었다.