'JSX.IntrinsicElements' 유형에 'mesh' 속성이 없습니다. 경고 해결법

Question

전 영상과 똑같이 npm으로 설치하는 과정에서 에러가 발생하시는 분들을 위한 제 해결법입니다. (2025-02 기준)

강사님이 올려주신 소스코드 다운로드

이 방법은 강사님이 올려주신 폴더를 열어서 npm i 만 하시면 됩니다.

직접 다운그레이드

R3F가 현재(2025-02) 기준 React 19를 지원을 안합니다.

그렇기 때문에 React 18로 다운그레이드를 해줘야되는데요

React 다운그레이드

React 최신버전 설치

npm create vite@latest

우선 최신버전을 설치한 이후에

다운그레이드

npm uninstall react react-dom
npm install react@18 react-dom@18

react와 react-dom을 삭제후 18버전으로 설치합니다.

3. 확인

npm list react react-dom

터미널로 확인하시면 18버전으로 다운그레이드 됩니다.

하지만 여기서 끝이 아니라 Typescript와 drei 설치시에도 문제가 발생합니다.

mesh를 작성하게 되면 "JSX.intrinsicElements" 형식에 "mesh" 속성이 없습니다. 라는 경고창이 옆에 계속 뜨는데요

실행결과는 잘 출력 되지만 거슬려서 해결법을 적어봅니다.

'JSX.IntrinsicElements' 에러 해결법

package.json 파일에

type/react와 type/react-dom이 19버전으로 되어 있어 호환이 안되어 발생하는 에러입니다.

npm install @types/react@18 @types/react-dom@18

터미널에 입력해주시면 package.json 파일에서 18버전으로 다운그레이드 됩니다.

또 drei를 설치할때

three-mesh-bvh@0.7.8: Deprecated due to three.js version incompatibility. Please use v0.8.0, instead

에러가 발생하는데요 이는 three.js버전과 three-mesh-bvh 버전 간의 호환성 문제입니다.

drei 라이브러리 설치법

터미널에

npm install @react-three/drei

npm install three-mesh-bvh@0.8.0 --legacy-peer-deps

그럼 3가지 세팅이 완료됩니다

코딩의세계 한태재 · Answer

안녕하세요. 수로님. 먼저 친절하게 공유해주셔서 감사드립니다.

Typescript와 drei 설치시에도 문제가 발생하는군요.

type도 react 18버젼으로 낮추고 three-mesh-bvh도 변경하는 법을 알려주셔서 감사드립니다.

강의를 업데이트할때 참고해서 테스트하고 업데이트 하겠습니다.

강의들으시면서 진행 해보시다가 안되는 부분 있으시면 알려주세요. 감사합니다 :)

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김수로님.

React Three Fiber(R3F) 프로젝트에서 발생할 수 있는 JSX.IntrinsicElements 오류 및 React와 관련된 여러 문제를 해결하는 방법에 대해 공유해 주셔서 감사합니다. 아래 추가적인 설명 및 기존에 있었던 유사한 문제에 대한 답변을 통해 더 잘 이해하실 수 있도록 도와드리겠습니다.

문제 설명 및 해결 방법

R3F와 React 19 호환성 문제:
- 현재 R3F가 React 19를 지원하지 않아 React 18로 다운그레이드가 필요합니다. npm install react@18 react-dom@18 명령어로 React 18을 설치하면 됩니다. 이후 npm list 명령어로 버전을 확인합니다.
JSX.IntrinsicElements 오류:
- JSX.IntrinsicElements의 mesh 속성에 대한 오류는 @types 패키지 버전이 호환되지 않아서 발생할 수 있습니다. npm install @types/react@18 @types/react-dom@18 명령어로 타입 패키지를 다운그레이드 해주세요.
drei 설치 및 호환성 문제:
- three-mesh-bvh@0.7.8의 버전 문제는 three-mesh-bvh@0.8.0을 설치하여 해결합니다. npm install three-mesh-bvh@0.8.0 --legacy-peer-deps 명령어로 설치할 수 있습니다.

인프런 커뮤니티 질문&답변

'JSX.IntrinsicElements' 유형에 'mesh' 속성이 없습니다. 경고 해결법

문제 설명 및 해결 방법

관련 질문 및 해결 사례