[Next.js] Cannot find namespace 'JSX'.

문제 상황

Vercel 배포중 아래와 같은 에러를 만났다. 로그를 보니 react-markdown에서 문제가 발생한 건 알 수 있었다.

./node_modules/@uiw/react-markdown-preview/node_modules/react-markdown/lib/complex-types.ts:25:21
Type error: Cannot find namespace 'JSX'a

구글링을 통해 관련된 GitHub 이슈를 찾아볼 수 있었다.
답변들을 보니 JSX를 React.JSX로 바꿔야 한다는 내용이 많았다❗️

원인 분석

React 19와 최신 TypeScript에서는 JSX 네임스페이스를 더이상 전역으로 제공해 주지 않고 대신 React.JSX를 사용해야 한다.
그러나 일부 라이브러리에서는 여전히 전역 JSX를 참조하고 있어서 문제가 발생한 것이다.

해결 방법

1. 라이브러리 업데이트
관련 라이브러리들을 최신 버전으로 업데이트 하자.

npm install react-markdown@latest @uiw/react-markdown-preview@latest

• react-markdown-preview 와 그 내부 react-markdown 을 React 19 호환 버전(전역 JSX 참조를 없앤 버전)으로 업데이트

2. 글로벌 타입 선언 추가
계속해서 에러가 발생한다면,프로젝트 루트에 global.d.ts 파일을 생성하고 아래 내용을 추가하기

// ./global.d.ts
import React from "react";

declare global {
  namespace JSX {
    // React 18+의 JSX.Element
    type Element = React.ReactElement;

    // 모든 태그 이름을 any로 허용
    interface IntrinsicElements {
      [elemName: string]: any;
    }
  }
}

이렇게 하면, 전역 JSX 네임스페이스를 임시로 복원할 수 있다.

---

참고자료

• styled-components 이슈 #4359
• react-markdown 이슈 #877
  

---

마무리

나는 라이브러리 업데이트와 글로벌 타입 선언을 모두 적용했다. 그 결과 에러가 사라졌지만, 아마 라이브러리 업데이트가 근본적인 해결책인 거 같다!