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

Requiring unknown module "undefined" ( isNativeModule Function ) #5490

Open
SaatwikRishi opened this issue Dec 12, 2023 · 20 comments
Open

Requiring unknown module "undefined" ( isNativeModule Function ) #5490

SaatwikRishi opened this issue Dec 12, 2023 · 20 comments
Labels
Missing repro This issue need minimum repro scenario Needs review Issue is ready to be reviewed by a maintainer Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS

Comments

@SaatwikRishi
Copy link

Description

I recently updated my react native version from 0.68.5 to 0.72.7 and updated react-navigation drawer to 6.6.6, now whenever i am trying to open the drawer, the animation is very sluggish and taking a lot of time to complete with a lot of lag also i am getting this error
image

I found a temporary fix by replacing
import { PropsAllowlists } from '../../propsAllowlists';
to
import * as List from '../../propsAllowlists';

and changing the function
from
function isNativeProp(propName: string): boolean {
return !!PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST[propName];
}

to

function isNativeProp(propName: string): boolean {
return !!List.PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST[propName];
}

but is there any other way to fix this?

RN Info:

System:
  OS: macOS 14.1.2
  CPU: (8) arm64 Apple M1
  Memory: 99.77 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: /opt/homebrew/opt/node@18/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.3
    path: /opt/homebrew/opt/node@18/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.13.0
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /Users/bahubully/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Steps to reproduce

  1. Open drawer
  2. And issue is there

Snack or a link to a repository

N/A

Reanimated version

3.6.1

React Native version

0.72.7

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

Samsung Galaxy S22+ (Physical Device ), Pixel 6A (Emulator )

Acknowledgements

Yes

@SaatwikRishi SaatwikRishi added the Needs review Issue is ready to be reviewed by a maintainer label Dec 12, 2023
@github-actions github-actions bot added the Missing repro This issue need minimum repro scenario label Dec 12, 2023
Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@github-actions github-actions bot added Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS labels Dec 12, 2023
@Latropos
Copy link
Contributor

Latropos commented Dec 12, 2023

@SaatwikRishi Hi! Please reset cache each time you start metro yarn start --reset-cache and tell us what version of react-navigation drawer you was previously using.

@SaatwikRishi
Copy link
Author

@Latropos, tried that already,
previously i was on v6.4.1

@evilchis94
Copy link

Had the exactly the same issue, had to downgrade to react-native-reanimated 2.17.0 but now I face this problem: #4408

React Native v0.72.7
React Native Reanimated v2.17.0

com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by "/data/app/~~CjNIRn1YSNehUt2byya3Bg==/com.acsyt.rooma-T2nkcLDEt9wF0K0No3dLNg==/base.apk!/lib/arm64-v8a/libreanimated.so"..., js engine: hermes, stack: callNativeSyncHook@1:106247 nonPromiseMethodWrapper@1:103288 NativeReanimated@1:708369 anonymous@1:701637 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:746320 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:710167 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:696855 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:695448 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1867255 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1866097 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1865089 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:996223 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:986422 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:966518 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:80017 loadModuleImplementation@1:73625 guardedLoadModule@1:73137 metroRequire@1:72808 global@1:72364 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188) at com.facebook.jni.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) at java.lang.Thread.run(Thread.java:1012)

Please, help
Thanks!

@SaatwikRishi
Copy link
Author

SaatwikRishi commented Dec 13, 2023

Had the exactly the same issue, had to downgrade to react-native-reanimated 2.17.0 but now I face this problem: #4408

React Native v0.72.7 React Native Reanimated v2.17.0

com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by "/data/app/~~CjNIRn1YSNehUt2byya3Bg==/com.acsyt.rooma-T2nkcLDEt9wF0K0No3dLNg==/base.apk!/lib/arm64-v8a/libreanimated.so"..., js engine: hermes, stack: callNativeSyncHook@1:106247 nonPromiseMethodWrapper@1:103288 NativeReanimated@1:708369 anonymous@1:701637 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:746320 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:710167 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:696855 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:695448 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1867255 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1866097 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1865089 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:996223 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:986422 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:966518 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:80017 loadModuleImplementation@1:73625 guardedLoadModule@1:73137 metroRequire@1:72808 global@1:72364 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188) at com.facebook.jni.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) at java.lang.Thread.run(Thread.java:1012)

Please, help Thanks!

0.72 is not compatible with 2.xx, try using the temp fix I have mentioned above

@evilchis94
Copy link

Had the exactly the same issue, had to downgrade to react-native-reanimated 2.17.0 but now I face this problem: #4408
React Native v0.72.7 React Native Reanimated v2.17.0
com.facebook.react.common.JavascriptException: Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by "/data/app/~~CjNIRn1YSNehUt2byya3Bg==/com.acsyt.rooma-T2nkcLDEt9wF0K0No3dLNg==/base.apk!/lib/arm64-v8a/libreanimated.so"..., js engine: hermes, stack: callNativeSyncHook@1:106247 nonPromiseMethodWrapper@1:103288 NativeReanimated@1:708369 anonymous@1:701637 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:746320 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:710167 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:696855 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:695448 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1867255 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1866097 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:1865089 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:996223 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:986422 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:966518 loadModuleImplementation@1:73625 guardedLoadModule@1:73180 metroRequire@1:72808 anonymous@1:80017 loadModuleImplementation@1:73625 guardedLoadModule@1:73137 metroRequire@1:72808 global@1:72364 at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188) at com.facebook.jni.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loopOnce(Looper.java:210) at android.os.Looper.loop(Looper.java:299) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) at java.lang.Thread.run(Thread.java:1012)
Please, help Thanks!

0.72 is not compatible with 2.xx, try using the temp fix I have mentioned above

It worked for debug mode, but not for release. I'm getting the same undefined is not a function, js engine: hermes

@luketgriffith
Copy link

i have this error as well - even though the PropsAllowlist seems to be clearly defined, it would crash every time. I ended up moving the contents of that file (propsAllowLists.ts) directly into the index.ts file, and that worked for some reason. Created a patch to work around it for now

@aadityapaliwal94
Copy link

Same issue with me in v3.6.1

@luketgriffith Yes, it worked after your suggestions.

Can we have a fix from the lib side?

@Ryabchikus
Copy link

Same here with error in reanimated v3.6.1 and RN 0.72.7
I can fork the repository and fix it for my project, but it doesn't look good

@lluis-sancho
Copy link

Same with 0.71.6 and reanimated 3.6.1

@marcofuentes05
Copy link

Same here, trying to update RN 0.71.2 -> 0.73.2 using reanimated 3.6.1

@Stewart-Needham
Copy link

Just working through an upgrade and encountered this issue. luketgriffith's workaround overcame the issue.
RN 0.73.2
react-native-reanimated 3.6.1
@react-navigation/drawer 6.6.6

@MaryKilduff68
Copy link

MaryKilduff68 commented Jan 19, 2024

Our project is also seeing this issue, SaatwikRishi temporary fix worked for us, but we also found this....
What we did note is we don't see this error when the debugger is disabled. Appears something in relation to the debugger and this module in RNreanimated was causing this error because its trying to automatically call Flipper which we don't have installed and for some reason I do not understand yet this interacts with isNativeProp in isNativeModuleFunction. Adding to react-native.config
dependencies: {
...(process.env.NO_FLIPPER // When set, skip flipper includes for iOS archive builds (release buidls)
? { 'react-native-flipper': { platforms: { ios: null } } }
: {}),
},
seems to have solved this issue.
Note sure it will solve your error but thought I'd share. There may be something going on with RNreanimated and the debugger.

@eidan66
Copy link

eidan66 commented Jan 28, 2024

i have this error as well - even though the PropsAllowlist seems to be clearly defined, it would crash every time. I ended up moving the contents of that file (propsAllowLists.ts) directly into the index.ts file, and that worked for some reason. Created a patch to work around it for now

Can you share the patch file, please?

@pandu-supriyono
Copy link

pandu-supriyono commented Jan 29, 2024

i have this error as well - even though the PropsAllowlist seems to be clearly defined, it would crash every time. I ended up moving the contents of that file (propsAllowLists.ts) directly into the index.ts file, and that worked for some reason. Created a patch to work around it for now

Can you share the patch file, please?

Hope this helps

diff --git a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts
index 1e89ea1..557b19f 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/js-reanimated/index.ts
@@ -3,7 +3,132 @@ import JSReanimated from './JSReanimated';
 import type { StyleProps } from '../commonTypes';
 import type { AnimatedStyle } from '../helperTypes';
 import { isWeb } from '../PlatformChecker';
-import { PropsAllowlists } from '../../propsAllowlists';
+
+type AllowlistsHolder = {
+  UI_THREAD_PROPS_WHITELIST: Record<string, boolean>;
+  NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean>;
+};
+
+const PropsAllowlists: AllowlistsHolder = {
+  /**
+   * Styles allowed to be direcly updated in UI thread
+   */
+  UI_THREAD_PROPS_WHITELIST: {
+    opacity: true,
+    transform: true,
+    /* colors */
+    backgroundColor: true,
+    borderRightColor: true,
+    borderBottomColor: true,
+    borderColor: true,
+    borderEndColor: true,
+    borderLeftColor: true,
+    borderStartColor: true,
+    borderTopColor: true,
+    /* ios styles */
+    shadowOpacity: true,
+    shadowRadius: true,
+    /* legacy android transform properties */
+    scaleX: true,
+    scaleY: true,
+    translateX: true,
+    translateY: true,
+  },
+  /**
+   * Whitelist of view props that can be updated in native thread via UIManagerModule
+   */
+  NATIVE_THREAD_PROPS_WHITELIST: {
+    borderBottomWidth: true,
+    borderEndWidth: true,
+    borderLeftWidth: true,
+    borderRightWidth: true,
+    borderStartWidth: true,
+    borderTopWidth: true,
+    borderWidth: true,
+    bottom: true,
+    flex: true,
+    flexGrow: true,
+    flexShrink: true,
+    height: true,
+    left: true,
+    margin: true,
+    marginBottom: true,
+    marginEnd: true,
+    marginHorizontal: true,
+    marginLeft: true,
+    marginRight: true,
+    marginStart: true,
+    marginTop: true,
+    marginVertical: true,
+    maxHeight: true,
+    maxWidth: true,
+    minHeight: true,
+    minWidth: true,
+    padding: true,
+    paddingBottom: true,
+    paddingEnd: true,
+    paddingHorizontal: true,
+    paddingLeft: true,
+    paddingRight: true,
+    paddingStart: true,
+    paddingTop: true,
+    paddingVertical: true,
+    right: true,
+    start: true,
+    top: true,
+    width: true,
+    zIndex: true,
+    borderBottomEndRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderBottomStartRadius: true,
+    borderRadius: true,
+    borderTopEndRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderTopStartRadius: true,
+    elevation: true,
+    fontSize: true,
+    lineHeight: true,
+    textShadowRadius: true,
+    textShadowOffset: true,
+    letterSpacing: true,
+    aspectRatio: true,
+    columnGap: true, // iOS only
+    end: true, // number or string
+    flexBasis: true, // number or string
+    gap: true,
+    rowGap: true,
+    /* strings */
+    display: true,
+    backfaceVisibility: true,
+    overflow: true,
+    resizeMode: true,
+    fontStyle: true,
+    fontWeight: true,
+    textAlign: true,
+    textDecorationLine: true,
+    fontFamily: true,
+    textAlignVertical: true,
+    fontVariant: true,
+    textDecorationStyle: true,
+    textTransform: true,
+    writingDirection: true,
+    alignContent: true,
+    alignItems: true,
+    alignSelf: true,
+    direction: true, // iOS only
+    flexDirection: true,
+    flexWrap: true,
+    justifyContent: true,
+    position: true,
+    /* text color */
+    color: true,
+    tintColor: true,
+    shadowColor: true,
+    placeholderTextColor: true,
+  },
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let createReactDOMStyle: (style: any) => any;

@Srh07
Copy link

Srh07 commented Mar 6, 2024

I'm facing the same issue after upgrading.
The fix of SaatwikRishi seems to work. (importing propsAllowlists differently)

Hoping for a permanent fix soon.

versions:
"react-native": "0.72.11",
"@react-navigation/drawer": "^6.6.11",
"react-native-reanimated": "^3.7.2",

@rohinipf
Copy link

rohinipf commented Mar 8, 2024

We just upgraded to the following versions and are experiencing the exact same issue. Will we be seeing a permanent fix soon as this issue has been ongoing for a while now?

"react-native": "0.73.5",
"@react-navigation/drawer": "^6.6.11",
"react-native-reanimated": "^3.7.2",

@agraham-wonde
Copy link

agraham-wonde commented Mar 25, 2024

Also experiencing issue with this, is there a better fix than modifying a dependency?

"@react-navigation/bottom-tabs": "^6.5.7",  
    "@react-navigation/native": "^6.1.6",  
    "@react-navigation/stack": "^6.3.16",  
    "react-native": "0.73.6",  
    "react-native-reanimated": "~3.6.2",  

@anhquan291
Copy link

Also facing the same issue with the latest versions!

@BloodyMonkey
Copy link

Same problem with 3.10.1, patch seems to fix it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Missing repro This issue need minimum repro scenario Needs review Issue is ready to be reviewed by a maintainer Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS
Projects
None yet
Development

No branches or pull requests