react-native: Deeplinking is being interrupted by "Cannot read property 'apply' of undefined".

Description

This error occured after upgrading to 0.7x from 0.67 and deeplink worked properly before doing the upgrade.

Have to mention that in both cases (background state & starting through deeplink) the url of the deeplink is there (looking with console.log()). This error is being thrown only if the app is in background, starting the app through deeplink throws no error.

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

While debugging on simulator, I could just minimize the thrown error and actions defined for the deeplink are processed properly. However the thrown error seems to block the execution of the deeplink actions on a real device.

The error is caused as shown in the thrown error at emit()-method of EventEmitter.js (Line 105):

registration.listener.apply(registration.context, args);

Adding a check if the listener is undefined before execution solves the issue for me and deeplink works as expected (both on the simulator and the real device):

if(typeof registration.listener !== "undefined" )
          registration.listener.apply(registration.context, args);

Unfortunately I am not sure, how this does effect the app in general and whether it must be solved by doing something else.

Version

0.70.4

Output of npx react-native info

System: OS: macOS 13.0 CPU: (8) x64 Intel® Core™ i5-8257U CPU @ 1.40GHz Memory: 32.26 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.3.1 - /usr/local/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: API Levels: 30, 31, 32 Build Tools: 30.0.2, 30.0.3, 32.0.0, 32.1.0 System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google Play Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 1.8.0_322 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.4 => 0.70.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Create a project and configure deeplinking using the docs.

Add to AppDelegate.m:

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

in JSX:

 Linking.getInitialURL().then(url => { //ACTIONS FOR DEEPLINK START }
 Linking.addEventListener('url',(url)=>{ //ACTIONS FOR DEEPLINK DURING RUNTIME})

Snack, code example, screenshot, or link to a repository

Bug

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 3
  • Comments: 34 (10 by maintainers)

Commits related to this issue

Most upvoted comments

Hi! I encountered the same problem and made a slight adjustment to this line, which seemed a bit off. The spread operation appeared unnecessary:

-      for (const registration of [...registrations]) {
+      for (const registration of registrations) {

To my surprise, this change fixed the issue cc @yungsters . The problem arose after upgrading from version 0.69 to 0.72. I have Hermes enabled.

The spread is required to allow listeners to be added and removed during the execution of the event callback.

So the idea is to make a copy of registrations? @javache But, since it is a Set, it should’ve been done without the conversion to an array, which is unnecessary, like this:

      for (const registration of new Set(registrations)) {

updated patch:

diff --git a/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js b/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js
index 6bd2025..ab63eff 100644
--- a/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js
+++ b/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js
@@ -109,7 +109,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
       Registration<$ElementType<TEventToArgsMap, TEvent>>,
     > = this._registry[eventType];
     if (registrations != null) {
-      for (const registration of [...registrations]) {
+      for (const registration of new Set(registrations)) {
         registration.listener.apply(registration.context, args);
       }
     }

It solves the issue, which seems to be caused by a bug in the JS engine/compiler/transpiler (?).

Essentially, it incorrectly converts a Set to an Array when using the spread operator, which can be reproduced like this:

         const registrations = new Set();

          registrations.add(1);

          registrations.add(2);

          registrations.add(3);

          console.log([...registrations].join(" ")); // logs [object Set], while it should be 1 2 3

          console.log(Array.from(registrations).join(" ")); // 1 2 3

I cannot reproduce it on https://hermesengine.dev/playground/, so I presume it is caused by Babel.

React Native v0.72 will include https://github.com/facebook/react-native/commit/2780ba38ff23f4c5e717b8fd8a733b649701f00c, which changes EventEmitter to throw a TypeError when addListener is called with a second argument that is not a function.

This should help everyone here narrow down the originating source of this error in order to find out where the non-function is coming from (and where to fix the root cause).

Hi! I encountered the same problem and made a slight adjustment to this line, which seemed a bit off. The spread operation appeared unnecessary:

-      for (const registration of [...registrations]) {
+      for (const registration of registrations) {

To my surprise, this change fixed the issue cc @yungsters . The problem arose after upgrading from version 0.69 to 0.72. I have Hermes enabled.

Here’s a complete patch file for anyone else who might be grappling with this issue:

diff --git a/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js b/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js
index 6bd2025..6b64e0c 100644
--- a/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js
+++ b/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js
@@ -109,7 +109,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
       Registration<$ElementType<TEventToArgsMap, TEvent>>,
     > = this._registry[eventType];
     if (registrations != null) {
-      for (const registration of [...registrations]) {
+      for (const registration of registrations) {
         registration.listener.apply(registration.context, args);
       }
     }

@olosegres @s123121 @taoqf Have you tried the workaround (adding check for undefined)? Does it solve your issues too?

Hey, When is this correction expected to be published?

I am also facing the same issue after upgrading from 066.4 to 0.70.6 reactnative

Same problem after update to 0.70.6

Upgrading from 0.67 to 0.70.6 and meet exactly this problem