Cộng đồng Hỏi & Đáp của Inflearn

kimsuro

câu hỏi đã được viết

Phát triển web 3D tương tác học bằng React Three Fiber (R3F)

Tạo R3F Canvas

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

Đã giải quyết

Viết

284

Đã chỉnh sửa

전 영상과 똑같이 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가지 세팅이 완료됩니다

reacttypescriptthree.jsreact-three-fiber

Câu trả lời 2

taejaehan

Người chia sẻ kiến thức

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

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

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

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

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

communityai8509

안녕하세요, 인프런 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 명령어로 설치할 수 있습니다.

Cộng đồng Hỏi & Đáp của Inflearn

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

문제 설명 및 해결 방법

관련 질문 및 해결 사례