[Unhandled promise rejection: TypeError: undefined is not a constructor (evaluating 'new pose.Pose')]

I am implementing Pose solution on React Native following the installation and usage from this doc. When I specified { runtime: 'tfjs' } in detectorConfig variable, everything works fine. But I want to change runtime to ‘mediapipe’ since the performance table in the doc shows that the mediapipe runtime gives higher FPS, and when I change it this error raises [Unhandled promise rejection: TypeError: undefined is not a constructor (evaluating 'new pose.Pose')]

System information:

• Windows 10
• Testing on Android devices with expo
• @mediapipe/pose version 0.4.1624666670
• Programming Language: JavaScript

This is my code App.js:

import * as tf from "@tensorflow/tfjs-core";
import "@tensorflow/tfjs-react-native";
import * as React from "react";
import { View, Text, Image, StyleSheet, Platform } from "react-native";
import { Camera } from "expo-camera";
import { cameraWithTensors } from "@tensorflow/tfjs-react-native";
import * as poseDetection from "@tensorflow-models/pose-detection";
import '@mediapipe/pose'
import "@tensorflow/tfjs-backend-webgl";

const TensorCamera = cameraWithTensors(Camera);

const estimationConfig = { flipHorizontal: true };
var rafID;

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      isTfReady: false,
      permission: false,
      detector: null,
    };
  }

  async loadBlazePoseModel() {
    const model = poseDetection.SupportedModels.BlazePose;
    const detectorConfig = {
      runtime: 'mediapipe',
      modelType: 'lite',
      solutionPath: './node_modules/@mediapipe/pose'
    };
    const blazeposeDetector = await poseDetection.createDetector(
      model,
      detectorConfig
    );

    return blazeposeDetector;
  }

  handleCameraStream(images, updatePreview, gl) {
    const {detector} = this.state;
    const loop = async () => {
      const nextImageTensor = images.next().value;
      
      const poses = await detector.estimatePoses(
        nextImageTensor,
        estimationConfig,
      );
      console.log('Poses results:', poses)
      tf.dispose(nextImageTensor)
      rafID = requestAnimationFrame(loop);
    };
    loop();
  }

  async componentDidMount() {
    // Wait for tf to be ready.
    await tf.ready();
    // Signal to the app that tensorflow.js can now be used.
    this.setState({
      isTfReady: true,
    });

    // ask camera permission
    const { status } = await Camera.requestPermissionsAsync();
    this.setState({
      permission: status === "granted",
    });

    const loadedDetector = await this.loadBlazePoseModel();
    this.setState({
      detector: loadedDetector,
      loading: false
    })

  }

  componentWillUnmount() {
    if (rafID) {
      cancelAnimationFrame(rafID);
    }
  }

  render() {
    const { loading, permission } = this.state;

    if (permission === null) {
      return <View />;
    }
    if (permission === false) {
      return <Text>No access to camera</Text>;
    }

    let textureDims;
    if (Platform.OS === "ios") {
      textureDims = {
        height: 1920,
        width: 1080,
      };
    } else {
      textureDims = {
        height: 1200,
        width: 1600,
      };
    }

    return (
      <View>
        {loading ? (
          <View>
            <Text
              style={{
                fontSize: 60,
                alignItems: "center",
                flex: 1,
                justifyContent: "center",
              }}
            >
              Loading
            </Text>
          </View>
        ) : (
          <View>
            <Text>Pose Estimation</Text>
            <TensorCamera
              // Standard Camera props
              style={styles.camera}
              type={Camera.Constants.Type.front}
              // Tensor related props
              cameraTextureHeight={textureDims.height}
              cameraTextureWidth={textureDims.width}
              resizeHeight={200}
              resizeWidth={152}
              resizeDepth={3}
              onReady={this.handleCameraStream.bind(this)}
              autorender={true}
            />
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  camera: {
    position: "absolute",
    left: 50,
    top: 100,
    width: 600 / 2,
    height: 800 / 2,
    zIndex: 1,
    borderWidth: 1,
    borderColor: "black",
    borderRadius: 0,
  },
});

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@mediapipe/pose": "^0.4.1624666670",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@tensorflow-models/pose-detection": "^0.0.3",
    "@tensorflow/tfjs": "^3.8.0",
    "@tensorflow/tfjs-backend-wasm": "^3.8.0",
    "@tensorflow/tfjs-backend-webgl": "^3.8.0",
    "@tensorflow/tfjs-converter": "^3.8.0",
    "@tensorflow/tfjs-react-native": "^0.6.0",
    "expo": "~42.0.1",
    "expo-camera": "~11.2.1",
    "expo-gl": "~10.4.1",
    "expo-gl-cpp": "~10.4.0",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-fs": "^2.18.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

Complete Error Logs :

[Unhandled promise rejection: TypeError: undefined is not a constructor (evaluating 'new pose.Pose')]
at node_modules\@tensorflow-models\pose-detection\dist\blazepose_mediapipe\detector.js:69:28 in BlazePoseMediaPipeDetector
at node_modules\@tensorflow-models\pose-detection\dist\blazepose_mediapipe\detector.js:188:29 in __generator$argument_1
at node_modules\@tensorflow-models\pose-detection\dist\blazepose_mediapipe\detector.js:32:17 in step
at node_modules\@tensorflow-models\pose-detection\dist\blazepose_mediapipe\detector.js:7:13 in <anonymous>
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\@tensorflow-models\pose-detection\dist\blazepose_mediapipe\detector.js:3:11 in <anonymous>
at node_modules\@tensorflow-models\pose-detection\dist\create_detector.js:79:50 in __generator$argument_1
at node_modules\@tensorflow-models\pose-detection\dist\create_detector.js:48:17 in step
at node_modules\@tensorflow-models\pose-detection\dist\create_detector.js:23:13 in <anonymous>
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\@tensorflow-models\pose-detection\dist\create_detector.js:19:11 in <anonymous>
at App.js:36:36 in loadBlazePoseModel
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:189:16 in PromiseImpl$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:188:15 in callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:211:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:238:8 in exports.async
at App.js:27:2 in loadBlazePoseModel
at App.js:98:33 in componentDidMount
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

[lina128]

Hi, we built a working example here, please reference: https://github.com/tensorflow/tfjs-examples/tree/master/react-native

[mhays-google]

That’s correct. I think that some import @mediapipe/poseimpl would help with this, but I haven’t put a lot of thought into it yet. It will be a lot easier if we can just open source the typescript, but we aren’t there yet.

In the interim, an additional script tag (or equivalent) will be required.