[Build] React Native app does not work when i import onnx_runtime_react_native #17773

faithyeenxin · 2023-10-03T07:20:09Z

Describe the issue

the aim of my react native expo app is to run a machine learning model that takes in an image and returns a value.
i followed the repository to start up ort-rn-hello-world and got the model to run on my simulators within my computer. ie using npm start ios // npm start android.
however when i try to start it with expo start it throws me an error.

TypeError: Cannot read property 'install' of null, js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:26:18 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:27:16 in createErrorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:32:8 in <anonymous>
at node_modules/@react-native/js-polyfills/error-guard.js:51:16 in ErrorUtils.applyWithGuard
at node_modules/metro-runtime/src/polyfills/require.js:237:19 in guardedLoadModule
at http://192.168.203.40:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in metroRequire
at http://192.168.203.40:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in global

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
- ... 7 more stack frames from framework internals

i followed the steps on the repo linked to the T - in his readme.
however instead of expo prebuild i did expo eject

this is my repo if you would like to inspect: expo onnx rn app

also, not sure if it's related but i am unable to get npm run ios on my connected mobile device. it does not seem to recognize that my device is connected.

Urgency

i need to get this working by 4 oct

Target platform

iOS, MacOS

Build script

{
"name": "expo_rn_onnx_runtime_3",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@react-navigation/native": "^6.1.8",
"@react-navigation/native-stack": "^6.9.14",
"@react-navigation/stack": "^6.3.18",
"expo": "~49.0.13",
"expo-camera": "^13.6.0",
"expo-media-library": "^15.6.0",
"expo-permissions": "~14.2.1",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"onnxruntime-react-native": "^1.16.0",
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-gesture-handler": "^2.13.1",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-navigation": "^5.0.0"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}

Error / output

TypeError: Cannot read property 'install' of null, js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:26:18 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:27:16 in createErrorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:32:8 in
at node_modules/@react-native/js-polyfills/error-guard.js:51:16 in ErrorUtils.applyWithGuard
at node_modules/metro-runtime/src/polyfills/require.js:237:19 in guardedLoadModule
at http://192.168.203.40:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in metroRequire
at http://192.168.203.40:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in global

Invariant Violation: "main" has not been registered. This can happen if:

Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException

... 7 more stack frames from framework internals

Visual Studio Version

No response

GCC / Compiler Version

No response

The text was updated successfully, but these errors were encountered:

skottmckay · 2023-10-03T07:41:12Z

Based on a quick search, the second error about main not being registered is most likely due to the first error so I'd suggest focusing on this:
TypeError: Cannot read property 'install' of null, js engine: hermes

however instead of expo prebuild i did expo eject

Why? The expo documentation says to use prebuild. https://docs.expo.dev/faq/#is-expo-eject-deprecated

Maybe try using prebuild as the next step.

Following that if you still get the error comment out the onnxruntime import and usage. If the error persists it's definitely not due to onnxruntime.

faithyeenxin · 2023-10-03T08:10:03Z

Based on a quick search, the second error about main not being registered is most likely due to the first error so I'd suggest focusing on this: TypeError: Cannot read property 'install' of null, js engine: hermes

however instead of expo prebuild i did expo eject

Why? The expo documentation says to use prebuild. https://docs.expo.dev/faq/#is-expo-eject-deprecated

Maybe try using prebuild as the next step.

Following that if you still get the error comment out the onnxruntime import and usage. If the error persists it's definitely not due to onnxruntime.

hi skottmckay,
because i tried expo prebuild before and it's worse. i could not even get the app to run.
ie npm run ios / npm run android does not even work.

I would get the error

iOS Bundling failed 16ms
Unable to resolve "@babel/runtime/helpers/interopRequireDefault" from "index.js"

the current method in which i use expo eject works on npm run ios and npm run android however does not work on expo start. i am not sure why. additionally in ort-rn-hello-world he did not mention expo start as well.
only when i comment out 'import * as ort from "onnxruntime-react-native"' does expo start work.

faithyeenxin · 2023-10-03T08:17:02Z

Based on a quick search, the second error about main not being registered is most likely due to the first error so I'd suggest focusing on this: TypeError: Cannot read property 'install' of null, js engine: hermes

however instead of expo prebuild i did expo eject

Why? The expo documentation says to use prebuild. https://docs.expo.dev/faq/#is-expo-eject-deprecated

Maybe try using prebuild as the next step.

Following that if you still get the error comment out the onnxruntime import and usage. If the error persists it's definitely not due to onnxruntime.

correction: i tried the entire setup again with prebuild and it caused the same error

TypeError: Cannot read property 'install' of null, js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:26:18 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:27:16 in createErrorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:32:8 in <anonymous>
at node_modules/@react-native/js-polyfills/error-guard.js:51:16 in ErrorUtils.applyWithGuard
at node_modules/metro-runtime/src/polyfills/require.js:237:19 in guardedLoadModule
at http://192.168.203.40:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in metroRequire
at http://192.168.203.40:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in global

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:105:15 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:150:4 in handleException
- ... 7 more stack frames from framework internals

only after i comment out 'import * as ort from "onnxruntime-react-native" did the error go away.

ps sorry for the edits and closing/opening of issue.
my first time writing an issue.

angrypie · 2023-10-03T19:23:03Z

@faithyeenxin probably you have to specify expo plugin in app.json.

{
    ...
    "plugins": ["onnxruntime-react-native"],
    ...
}

Also refer to the example repo
Edit: yeah, I see now that you've been using it as an example

faithyeenxin · 2023-10-03T22:32:32Z

@faithyeenxin probably you have to specify expo plugin in app.json.
{

    ...

    "plugins": ["onnxruntime-react-native"],

    ...

}
Also refer to the example repo

Edit: yeah, I see now that you've been using it as an example

Yes, I have added the plug-in and used the repo as example.
npm run:iOS// expo run:ios works but expo start does not.

angrypie · 2023-10-04T09:53:12Z

@faithyeenxin repo you're working on doesn't have that entry in the app.json. Please provide repo you're working on now or update this one.

this is my repo if you would like to inspect: expo onnx rn app

github-actions · 2023-11-03T15:01:07Z

This issue has been automatically marked as stale due to inactivity and will be closed in 7 days if no further activity occurs. If further support is needed, please provide an update and/or more details.

YUNQIUGUO · 2023-12-04T17:58:27Z

if you have any questions, please refer to our basic ort react native example: https://github.com/microsoft/onnxruntime-inference-examples/tree/main/mobile/examples/React_Native/ort-rn-basic-usage

close this as completed for now.

rek · 2023-12-12T08:02:22Z

Notes for anyone else getting this error using NX:

TypeError: Cannot read property 'install' of null, js engine: hermes

It comes if you have not go this in your package.json that nx start generates:

    "onnxruntime-common": "*",
    "onnxruntime-react-native": "*"

faithyeenxin added the build build issues; typically submitted using template label Oct 3, 2023

github-actions bot added the platform:mobile issues related to ONNX Runtime mobile; typically submitted using template label Oct 3, 2023

faithyeenxin changed the title ~~[Build]~~ [Build] TypeError: Cannot read property 'install' of null, js engine: hermes Oct 3, 2023

faithyeenxin changed the title ~~[Build] TypeError: Cannot read property 'install' of null, js engine: hermes~~ [Build] React Native app does not work on production build Oct 3, 2023

faithyeenxin changed the title ~~[Build] React Native app does not work on production build~~ [Build] React Native app does not work when i import onnx_runtime_react_native Oct 3, 2023

faithyeenxin closed this as completed Oct 3, 2023

faithyeenxin reopened this Oct 3, 2023

github-actions bot added the stale issues that have not been addressed in a while; categorized by a bot label Nov 3, 2023

YUNQIUGUO closed this as completed Dec 4, 2023

ngeor26 mentioned this issue Feb 13, 2024

[Build] Cannot read property 'install' of null with onnxruntime-react-native imported #19510

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Build] React Native app does not work when i import onnx_runtime_react_native #17773

[Build] React Native app does not work when i import onnx_runtime_react_native #17773

faithyeenxin commented Oct 3, 2023 •

edited

Loading

skottmckay commented Oct 3, 2023

faithyeenxin commented Oct 3, 2023

faithyeenxin commented Oct 3, 2023 •

edited

Loading

angrypie commented Oct 3, 2023 •

edited

Loading

faithyeenxin commented Oct 3, 2023

angrypie commented Oct 4, 2023

github-actions bot commented Nov 3, 2023

YUNQIUGUO commented Dec 4, 2023

rek commented Dec 12, 2023

[Build] React Native app does not work when i import onnx_runtime_react_native #17773

[Build] React Native app does not work when i import onnx_runtime_react_native #17773

Comments

faithyeenxin commented Oct 3, 2023 • edited Loading

Describe the issue

Urgency

Target platform

Build script

Error / output

Visual Studio Version

GCC / Compiler Version

skottmckay commented Oct 3, 2023

faithyeenxin commented Oct 3, 2023

faithyeenxin commented Oct 3, 2023 • edited Loading

angrypie commented Oct 3, 2023 • edited Loading

faithyeenxin commented Oct 3, 2023

angrypie commented Oct 4, 2023

github-actions bot commented Nov 3, 2023

YUNQIUGUO commented Dec 4, 2023

rek commented Dec 12, 2023

faithyeenxin commented Oct 3, 2023 •

edited

Loading

faithyeenxin commented Oct 3, 2023 •

edited

Loading

angrypie commented Oct 3, 2023 •

edited

Loading