Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kuldip-simform opened this issue Dec 17, 2024 · 10 comments
Assignees
Labels
type:bug Something isn't working

Comments

@kuldip-simform
Copy link

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 kuldip-simform added the type:bug Something isn't working label Dec 17, 2024
@shmishra99 shmishra99 self-assigned this Dec 20, 2024
@shmishra99
Copy link
Contributor

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!

@kuldip-simform
Copy link
Author

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

@Tarun24RN
Copy link

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
Copy link
Author

@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
Copy link

@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
Copy link
Author

@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
Copy link

@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
Copy link

Tarun24RN commented Dec 20, 2024

@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
Copy link
Author

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

@Tarun24RN
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants