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

[kuldip-simform]

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

[shmishra99]

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.

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!

[kuldip-simform]

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

[Tarun24RN]

Hi guys my package version is:

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

And i am facing same issue.

[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.

[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.

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"
},

[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 ?

[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 ?

Yes, I have done same process.

[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 ?

[kuldip-simform]

@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

here ts means typescript. You can add file extensions so it will give proper formatting with colour and everything.

Thank you.

[Tarun24RN]

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.

[ArtjomUEA]

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

expo/expo#30060

#8100