https://github.com/google/mediapipe/issues/3796
TypeError: hands.Hands is not a constructor · Issue #3796 · google/mediapipe
System information (Please provide as much relevant information as possible) React/typescript @mediapipe/hands version 0.4.1646424915 Describe the current behavior: When using the default code exam...
github.com
https://github.com/google/mediapipe/issues/3949
TypeError: holistic.Holistic is not a constructor on tauri · Issue #3949 · google/mediapipe
Please make sure that this is a bug and also refer to the troubleshooting, FAQ documentation before raising any issues. System information (Please provide as much relevant information as possible) ...
github.com
npm run dev로 dev 모드에서는 import {Hands} from "@mediapipe/hands"해도 전혀 문제가 없었는데, 이상하게 npm run build로 프로덕션으로 빌드한 후에는 "Hands is not a constructor" 에러가 발생한다. Google mediapipe 공식 레포의 이슈를 살펴보니 여러 사람들에게서 발생한 문제였고, 현재는 @mediapipe/hands 말고 @mediapipe/tasks-vision 라이브러리의 사용을 권장하더라.
그러나 @mediapipe/tasks-vision도 문제가 많았는데.. 설치를 했는데도 리액트에서 tasks-vision을 모듈로서 인식을 못했다. 작동은 되는데 모듈 인식을 못한다.. 더 큰 문제는 tasks-vision이 출시된 지 얼마 안된 라이브러리이다 보니 관련 자료나 사용 예제가 거의 없어서 어떻게 사용해야 할지도 모르겠다는 것이다.
Solution
npm 말고 cdn으로 import하니까 잘 작동했다는 사람의 후기를 보고 적용해보았다. 전역 변수 window를 설정하는 것이 머리 아팠지만 결국 성공적으로 문제를 해결했다.
다음 코드를 index.html의 헤드에 삽입한다.
'프로젝트 > 나만무' 카테고리의 다른 글
| [나만무] 최종 발표 후기 (3) | 2023.08.17 |
|---|---|
| [나만무] 프론트엔드 CI/CD 적용 (0) | 2023.08.08 |
| [나만무] 프론트엔드 S3 배포 (0) | 2023.08.08 |
| [나만무] 2차 발표 후기 (0) | 2023.07.27 |
| [나만무] 프론트도 어렵다 (0) | 2023.07.24 |