tfjs icon indicating copy to clipboard operation
tfjs copied to clipboard

TypeError: Cannot read property 'isTypedArray' of undefined, js engine: hermes

Open kuldip-simform opened this issue 1 year ago • 13 comments

Hi, I want to perform tensor calculation in my React Native project so I have added this package. This is my package.json file:

{
  "name": "TFVisionCamera",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.1.0",
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@tensorflow/tfjs": "^4.22.0",
    "@tensorflow/tfjs-core": "^4.22.0",
    "@tensorflow/tfjs-react-native": "^1.0.0",
    "expo": "^52.0.0",
    "expo-camera": "^16.0.9",
    "expo-gl": "^15.0.2",
    "expo-modules-core": "^2.1.1",
    "lodash": "^4.17.21",
    "react": "18.3.1",
    "react-native": "0.76.3",
    "react-native-fast-opencv": "^0.3.3",
    "react-native-fast-tflite": "^1.5.0",
    "react-native-fs": "^2.20.0",
    "react-native-reanimated": "^3.16.5",
    "react-native-vision-camera": "^4.6.1",
    "react-native-vision-camera-face-detector": "^1.7.1",
    "react-native-worklets-core": "^1.5.0",
    "vision-camera-resize-plugin": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.3",
    "@react-native/eslint-config": "0.76.3",
    "@react-native/metro-config": "0.76.3",
    "@react-native/typescript-config": "0.76.3",
    "@types/lodash": "^4.17.13",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

This is my App.tsx:

import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-react-native';
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Text, View } from 'react-native';

const App = () => {
  const [isTfReady, setIsTfReady] = useState(false);
  const loadTFLibrary = useCallback(async () => {
    await tf.ready();
    console.log('Tensorflow is ready');
    setIsTfReady(true);
  }, []);

  useEffect(() => {
    loadTFLibrary();
  }, [loadTFLibrary]);

  const printTensor = () => {
    if (!isTfReady) {
      console.log('Tensorflow is not ready');
      return;
    }

    const ten = tf.zeros([2,2]) // This line works properly
    const tens = tf.tensor1d([2], 'float32'); // getting the error here "TypeError: Cannot read property 'isTypedArray' of undefined, js engine: hermes"
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>App_Barebone</Text>
      <Button title="Press me" onPress={printTensor} />
    </View>
  );
};

export default App;

When I just run const ten = tf.zeros([2,2]) it runs properly and generates a proper tensor. Now I want to make my custom tensor from the data I provide with an array. At that time, I am getting the above-mentioned error. I have tried with float32, int32, bool, complex64 and string as well but nothing seems to work.

This is information about my system and which versions I am running for different packages:

System:
  OS: macOS 15.1.1
  CPU: (8) arm64 Apple M1
  Memory: 111.91 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.10.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.18
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.11.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/kuldip/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /Users/kuldip/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/kuldip/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: false

I am not sure if I am missing anything or doing anything wrong. Any help will be greatly appreciated

kuldip-simform avatar Dec 17 '24 11:12 kuldip-simform

Hi @kuldip-simform ,

I was able to run the code snippet you provided. It successfully creates tensors, and when running on a browser, it prints the tensor values.

image

here is my package.json file.

"@expo/metro-runtime": "~3.2.3",
"@tensorflow/tfjs": "^4.21.0",
"@tensorflow/tfjs-react-native": "^1.0.0",
"expo": "~51.0.28",
"expo-status-bar": "~1.12.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.5",
"react-native-web": "~0.19.10"

Can you try with these dependencies that I am using. Also, clear your cache using npm cache clean --force after deleting your node_modules folder.

Let me know if it works. Thank you!

shmishra99 avatar Dec 20 '24 10:12 shmishra99

@shmishra99 Thank you for your response. I will try with this packages version

kuldip-simform avatar Dec 20 '24 10:12 kuldip-simform

Hi guys my package version is:

"@tensorflow/tfjs": "^4.22.0", "@tensorflow/tfjs-react-native": "^1.0.0"

And i am facing same issue.

Tarun24RN avatar Dec 20 '24 12:12 Tarun24RN

@Tarun24RN Can you let me know what is your react-native and expo version. it would be better if you share whole package.json. I am too having this issue and not able to find solution.

kuldip-simform avatar Dec 20 '24 12:12 kuldip-simform

@Tarun24RN Can you let me know what is your react-native and expo version. it would be better if you share whole package.json. I am too having this issue and not able to find solution.

Yes,Here is my package.json dependencies:-

"dependencies": { "@ptomasroos/react-native-multi-slider": "^2.2.2", "@react-native-async-storage/async-storage": "^2.0.0", "@react-native-community/blur": "^4.4.1", "@react-native-community/datetimepicker": "^8.2.0", "@react-native-community/image-editor": "^4.2.1", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "@reduxjs/toolkit": "^2.3.0", "@shopify/react-native-skia": "^1.5.3", "@tensorflow/tfjs": "^4.21.0", "@tensorflow/tfjs-react-native": "^1.0.0", "axios": "^1.7.7", "base64-arraybuffer": "^1.0.2", "expo": "^51.0.0", "expo-asset": "^11.0.1", "expo-camera": "^16.0.10", "expo-file-system": "^18.0.6", "expo-gl": "^15.0.2", "i": "^0.3.7", "i18next": "^23.16.4", "moment": "^2.30.1", "npm": "^10.9.0", "patch-package": "^8.0.0", "react": "18.3.1", "react-i18next": "^15.1.0", "react-native": "0.75.4", "react-native-create-thumbnail": "^2.0.0", "react-native-device-info": "^14.0.0", "react-native-draggable": "^3.3.0", "react-native-fast-image": "^8.6.3", "react-native-fast-opencv": "^0.3.4", "react-native-fast-tflite": "^1.5.1", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "^2.20.2", "react-native-image-colors": "^1.5.2", "react-native-image-crop-picker": "^0.41.4", "react-native-image-dominant-color": "^1.0.1", "react-native-insta-story": "^1.1.9", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-material-ripple": "^0.9.1", "react-native-mentionable-textinput": "^1.2.0", "react-native-modal-datetime-picker": "^18.0.0", "react-native-new-snap-carousel": "^3.9.3", "react-native-otp-entry": "^1.7.3", "react-native-permissions": "^5.1.0", "react-native-photo-manipulator": "^1.9.1", "react-native-raw-bottom-sheet": "^3.0.0", "react-native-reanimated": "^3.16.1", "react-native-responsive-dimensions": "^3.1.1", "react-native-responsive-fontsize": "^0.5.1", "react-native-safe-area-context": "^4.11.1", "react-native-screens": "^3.34.1", "react-native-svg": "^15.8.0", "react-native-svg-transformer": "^1.5.0", "react-native-toast-message": "^2.2.1", "react-native-video": "^6.8.0", "react-native-view-more-text": "^2.2.0", "react-native-view-shot": "^3.8.0", "react-native-vision-camera": "4.6.1", "react-native-vision-camera-face-detector": "^1.7.1", "react-native-worklets-core": "^1.3.3", "react-redux": "^9.1.2", "redux-persist": "^6.0.0", "vision-camera-resize-plugin": "^3.2.0" },

Tarun24RN avatar Dec 20 '24 12:12 Tarun24RN

@Tarun24RN I had react-native-cli project and then I have added expo modules to run this library as it depends on expo modules. Have you done similar to this ? @shmishra99 Can this be cause of this issue ?

kuldip-simform avatar Dec 20 '24 12:12 kuldip-simform

@Tarun24RN I had react-native-cli project and then I have added expo modules to run this library as it depends on expo modules. Have you done similar to this ? @shmishra99 Can this be cause of this issue ?

Yes, I have done same process.

Tarun24RN avatar Dec 20 '24 12:12 Tarun24RN

@kuldip-simform I found one file inside node-modules>@tensorflow>tjfs-react-native>dist

export class PlatformReactNative {
    /**
     * Makes an HTTP request.
     *
     * see @fetch docs above.
     */
    async fetch(path, init, options) {
        return fetch(path, init, options);
    }
    /**
     * Encode the provided string into an array of bytes using the provided
     * encoding.
     */
    encode(text, encoding) {
        // See https://www.w3.org/TR/encoding/#utf-16le
        if (encoding === 'utf-16') {
            encoding = 'utf16le';
        }
        return new Uint8Array(Buffer.from(text, encoding));
    }
    /** Decode the provided bytes into a string using the provided encoding. */
    decode(bytes, encoding) {
        // See https://www.w3.org/TR/encoding/#utf-16le
        if (encoding === 'utf-16') {
            encoding = 'utf16le';
        }
        return Buffer.from(bytes).toString(encoding);
    }
    now() {
        //@ts-ignore
        if (global.nativePerformanceNow) {
            //@ts-ignore
            return global.nativePerformanceNow();
        }
        return Date.now();
    }
    setTimeoutCustom() {
        throw new Error('react native does not support setTimeoutCustom');
    }
    isTypedArray(a) {
        return a instanceof Float32Array || a instanceof Int32Array ||
            a instanceof Uint8Array || a instanceof Uint8ClampedArray;
    }
}

May be because of this code tf.env().registerFlag('IS_REACT_NATIVE', () => navigator && navigator.product === 'ReactNative'); if (tf.env().getBool('IS_REACT_NATIVE')) { setupGlobals(); registerWebGLBackend(); tf.setPlatform('react-native', new PlatformReactNative()); } May be it is throwing error as navigator.product is deprecated @shmishra99 ?

Tarun24RN avatar Dec 20 '24 12:12 Tarun24RN

@Tarun24RN Maybe. This can be cause for this. I currently do not have project run. Can you try changing that and check if it solves issue? also can you format this code properly in comment? you can add 3 backtick (`) then in new line add 3 backtick again and then add code between then so it is more readable to all in this thread.

code goes here
Screenshot 2024-12-20 at 6 31 08 PM here ts means typescript. You can add file extensions so it will give proper formatting with colour and everything.

Thank you.

kuldip-simform avatar Dec 20 '24 13:12 kuldip-simform

tf.env().registerFlag('IS_REACT_NATIVE', () => navigator && navigator.product === 'ReactNative');

I have tried by temporarily removing this check navigator.product === 'ReactNative' and then i rebuild the app but the error remain the same.

Tarun24RN avatar Dec 20 '24 13:12 Tarun24RN

Getting the same error while trying to use cameraWithTensors from tfjs-react-native. Seems to be a compatability issue between packages:

https://github.com/expo/expo/issues/30060

https://github.com/tensorflow/tfjs/issues/8100

ArtjomUEA avatar Jan 10 '25 02:01 ArtjomUEA

Im getting the same error on android: Here is my package.json file:

  "dependencies": {
    "@expo/config-plugins": "~7.2.2",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.9",
    "@react-navigation/native": "^6.1.8",
    "@react-navigation/native-stack": "^6.9.14",
    "@remobile/react-native-toast": "file:lib/@remobile/react-native-toast",
    "@tensorflow-models/coco-ssd": "^2.2.3",
    "@tensorflow/tfjs": "^4.22.0",
    "@tensorflow/tfjs-react-native": "^1.0.0",
    "@types/react": "~18.2.14",
    "@viro-community/react-viro": "2.40.1",
    "base-64": "^1.0.0",
    "expo": "~49.0.11",
    "expo-asset": "~8.10.1",
    "expo-build-properties": "~0.8.3",
    "expo-camera": "~13.4.4",
    "expo-checkbox": "~2.4.0",
    "expo-dev-client": "~2.4.13",
    "expo-font": "~11.4.0",
    "expo-gl": "~13.0.1",
    "expo-image": "~1.3.5",
    "expo-screen-orientation": "~6.0.6",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "jpeg-js": "^0.4.4",
    "react": "18.2.0",
    "react-native": "0.72.10",
    "react-native-base64": "^0.2.1",
    "react-native-ble-plx": "^3.2.1",
    "react-native-fs": "^2.20.0",
    "react-native-permissions": "^4.1.5",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "^13.14.1",
    "react-native-svg-transformer": "^1.1.0",
    "react-native-webview": "13.2.2",
    "typescript": "~5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },

IsraelKrismar avatar Feb 24 '25 21:02 IsraelKrismar

hey any update on this as i am still getting

{ "name": "globsearch", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest", "postinstall": "patch-package" }, "dependencies": { "@react-native-documents/picker": "^10.1.5", "@react-native/new-app-screen": "^0.80.1", "@react-navigation/native": "^7.1.14", "@react-navigation/native-stack": "^7.3.21", "@react-navigation/stack": "^7.4.2", "@tensorflow/tfjs": "^3.20.0", "@tensorflow/tfjs-backend-cpu": "^3.20.0", "@tensorflow/tfjs-backend-webgl": "^3.20.0", "@tensorflow/tfjs-react-native": "^1.0.0", "numjs": "^0.16.1", "react": "19.1.0", "react-native": "0.80.1", "react-native-fast-tflite": "^1.6.1", "react-native-fs": "^2.20.0", "react-native-pdf-lib": "^1.0.0", "react-native-safe-area-context": "^5.5.2", "react-native-screens": "^4.13.1", "react-native-sqlite-storage": "^6.0.1" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "19.0.0", "@react-native-community/cli-platform-android": "19.0.0", "@react-native-community/cli-platform-ios": "19.0.0", "@react-native/babel-preset": "0.80.1", "@react-native/eslint-config": "0.80.1", "@react-native/metro-config": "0.80.1", "@react-native/typescript-config": "0.80.1", "@types/jest": "^29.5.13", "@types/react": "^19.1.0", "@types/react-test-renderer": "^19.1.0", "eslint": "^8.19.0", "jest": "^29.6.3", "patch-package": "^8.0.0", "postinstall-postinstall": "^2.1.0", "prettier": "2.8.8", "react-test-renderer": "19.1.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }

GittyAjay avatar Jul 25 '25 02:07 GittyAjay