'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가지 세팅이 완료됩니다

taejaehan · Answer

안녕하세요. 수로님. 먼저 친절하게 공유해주셔서 감사드립니다. Typescript와 drei 설치시에도 문제가 발생하는군요. type도 react 18버젼으로 낮추고 three-mesh-bvh도 변경하는 법을 알려주셔서 감사드립니다. 강의를 업데이트할때 참고해서 테스트하고 업데이트 하겠습니다.   강의들으시면서 진행 해보시다가 안되는 부분 있으시면 알려주세요. 감사합니다 :)

communityai8509 · 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 명령어로 설치할 수 있습니다. 관련 질문 및 해결 사례 TypeScript 경로 별칭(Path Alias) 설정과 불러오기 typescript 별칭(alias) 설정방법 이 답변에서는 Typescript와 Vite 환경에서의 설정 방법을 확인할 수 있으며, 해결하는 데 도움이 될 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.