fix: lazy import mediapipe (#1688)

src/core/FaceControls.tsx

@@ -15,7 +15,7 @@ import {
   useContext,
 } from 'react'
 import { useFrame, useThree } from '@react-three/fiber'
-import { FaceLandmarkerResult } from '@mediapipe/tasks-vision'
+import type { FaceLandmarkerResult } from '@mediapipe/tasks-vision'
 import { easing } from 'maath'
 import { suspend, clear } from 'suspend-react'
 

src/core/FaceLandmarker.tsx

@@ -1,7 +1,7 @@
 /* eslint react-hooks/exhaustive-deps: 1 */
 import * as React from 'react'
 import { createContext, ReactNode, useContext, useEffect } from 'react'
-import { FilesetResolver, FaceLandmarker as FaceLandmarkerImpl, FaceLandmarkerOptions } from '@mediapipe/tasks-vision'
+import type { FaceLandmarker as FaceLandmarkerImpl, FaceLandmarkerOptions } from '@mediapipe/tasks-vision'
 import { clear, suspend } from 'suspend-react'
 
 const FaceLandmarkerContext = /* @__PURE__ */ createContext({} as FaceLandmarkerImpl | undefined)
@@ -34,9 +34,9 @@ export function FaceLandmarker({
   const opts = JSON.stringify(options)
 
   const faceLandmarker = suspend(async () => {
-    return await FilesetResolver.forVisionTasks(basePath).then((vision) =>
-      FaceLandmarkerImpl.createFromOptions(vision, options)
-    )
+    const { FilesetResolver, FaceLandmarker } = await import('@mediapipe/tasks-vision')
+    const vision = await FilesetResolver.forVisionTasks(basePath)
+    return FaceLandmarker.createFromOptions(vision, options)
   }, [basePath, opts])
 
   useEffect(() => {