TypeScript설정
TypeScript JSX 플래그 에러 — Cannot use JSX unless the '--jsx' flag is provided
Cannot use JSX unless the '--jsx' flag is provided
한 줄 해결: tsconfig에 jsx 설정이 없거나 파일 확장자가 .tsx가 아니어서 발생하며, jsx 옵션 지정과 .tsx 확장자로 해결합니다.
이런 증상일 때
React JSX가 든 TS 파일에서 이 에러가 뜹니다. 새 프로젝트나 tsconfig가 빠진 환경에서 자주 납니다.
원인
- tsconfig의 compilerOptions에 jsx 설정 누락
- JSX가 든 파일을 .ts로 둠(.tsx여야 함)
- tsconfig 자체가 없거나 컴파일 범위에서 제외됨
해결 방법
1
jsx 옵션 설정
tsconfig에 jsx 옵션을 추가합니다. React 17+ 자동 런타임은 react-jsx를 씁니다.
// tsconfig.json
"compilerOptions": { "jsx": "react-jsx" }2
확장자를 .tsx로
JSX가 든 파일은 반드시 .tsx 확장자를 씁니다.
git mv Component.ts Component.tsx💡 예방: 프로젝트 시작 시 프레임워크 템플릿(create-next-app 등)이 만든 tsconfig를 기준으로 두고, JSX 파일은 .tsx로 통일하세요.
TypeScriptJSXtsconfig--jsx.tsx