Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach') #17348

xardit · 2017-12-25T21:47:03Z

When changing scheme to Release in able to run the app on the device, it triggered an error

Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach')

This crashed the application.

I searched for the error code and found it: project/node_modules/react-native/Libraries/Components/Subscribable.js on line 33 with RN 0.51.0

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

react-native-bot · 2017-12-25T21:50:03Z

@facebook-github-bot no-template

xardit · 2017-12-25T21:50:07Z

I fixed it by evaluating variable this._subscribableSubscriptions on line 33 on react native file project/node_modules/react-native/Libraries/Components/Subscribable.js

Changing this:

this._subscribableSubscriptions.forEach(

To this:

this._subscribableSubscriptions && this._subscribableSubscriptions.forEach(

facebook-github-bot · 2017-12-25T21:50:21Z

Hey @a3diti, thanks for posting this! It looks like your issue is missing some required information. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce your issue. I am going to close this, but please feel free to open a new issue with the additional information provided. Thanks!

_{How to Contribute • What to Expect from Maintainers}

avshenuk · 2017-12-25T21:59:58Z

@facebook-github-bot reopen please. It's the same issue for me. No addition information. Just started to throw this error today without any changes.

Related to ScrollView. It appears on any View containing ScrollView inside like FlatList.

avshenuk · 2017-12-25T22:09:07Z

React Native version 0.50.3 is affected too

xardit · 2017-12-25T23:14:33Z

My bad for closing it, the issue is fixed for the moment as i mentioned it above, the problem seems to be related to the Subscribable component of RN.

noambonnie · 2017-12-25T23:17:09Z

I also have this issue. RN 0.51.0, running a release build on Android 7.

leethree · 2017-12-26T09:02:00Z

I'm seeing the exact same issue. Looks like Subscribable.componentWillUnmount is called before Subscribable.componentWillMount is called.

zhangsn · 2017-12-26T09:14:20Z

Same issue for me. No code changes. It suddenly fails. RN 0.50.4

gveeden · 2017-12-26T09:25:13Z

@a3diti I Could kiss you!

brownieboy · 2017-12-26T09:58:52Z

Getting this error too, on a new test app, created with [email protected], which used react-native 0.51.0 and react 16.0.0. Also using react-navigation and native-base.

@a3diti 's code change to the Subscribable.js file worked for me, but that's a workaround, not a fix. You would have to put that code change in every time you cloned your repository and then ran npm install. We need a proper fix for this.

luhui · 2017-12-26T12:59:21Z

same issue for me. debug build works fine, but fail in release build. RN 0.51.0

dimaportenko · 2017-12-26T13:02:32Z

I have this error when building APK via Expo. RN 0.51.0

atesoriero2000 · 2017-12-26T18:14:18Z

Same Issue. Changing line 33 in project/node_modules/react-native/Libraries/Components/Subscribable.js to:

this._subscribableSubscriptions && this._subscribableSubscriptions.forEach(

worked for me! Thankyou!

steveccable · 2017-12-26T19:35:15Z

If that workaround is working for people, anybody mind making a PR against RN itself so that this problem is fixed for everyone?

sonaye · 2017-12-26T19:42:56Z

The proposed workaround did it for me, but it introduced another bug (throws in dev mode only):

Seems related to react-navigation.

cyphire · 2017-12-27T00:37:48Z

I am closing the issue I created today for this one. Here is what I contributed on it.

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4408382

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Steps to Reproduce

When building the app in normal debug mode, no issue.
Created a dummy certificate and updated the build.gradle correctly, In the "android" directory, I ran "gradlew assembleRelease".
This created the correct SIGNED app-release.apk in the apk directory.
Installed the app-release.apk in both the emulator on computer as well as an LG V20 device.
Both the emulator and the device crash on startup.
Other person with same issue:
GitHub issue 353891887

Expected Behavior

I expected that the release version would work as the debug version did.

Actual Behavior

Signed apk crashes when any screen which has any version of ScrollView in it's render.

The problem is this:
this._subscribableSubscriptions.forEach
fails because the "this._subscribableSubscriptions" is null (and should not be).

Here is where the error occurs: in Subscribable.js
(..\node_modules\react-native\Libraries\Components\Subscribable.js)

This is the original code.

  componentWillUnmount: function() {
    this._subscribableSubscriptions.forEach(
      (subscription) => subscription.remove()
    );
    this._subscribableSubscriptions = null;
  },

Here is where i removed the failing call. I have confirmed that this._subscribableSubscriptions returns a null and crashes when the forEach() is called.

  componentWillUnmount: function() {
  console.log(`Subscribable - error location? ${this._subscribableSubscriptions}`)  
  if (false) {
    this._subscribableSubscriptions.forEach(
      (subscription) => subscription.remove()
    );
  }
    this._subscribableSubscriptions = null;
  },

Following removing the offending code, the app no longer crashes on startup.

FROM LOGCAT:

12-26 16:02:51.675 20609 20609 D ReactNative: ReactInstanceManager.ctor()
12-26 16:02:51.678 20609 20609 D ReactNative: ReactInstanceManager.createReactContextInBackground()
12-26 16:02:51.678 20609 20609 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundInner()
12-26 16:02:51.679 20609 20609 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundFromBundleLoader()
12-26 16:02:51.679 20609 20609 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
12-26 16:02:51.679 20609 20609 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
12-26 16:02:51.721 20609 20625 D ReactNative: ReactInstanceManager.createReactContext()
12-26 16:02:51.783 20609 20625 D ReactNative: Initializing React Xplat Bridge.
12-26 16:02:51.784 20609 20625 D ReactNative: Initializing React Xplat Bridge before initializeBridge
12-26 16:02:51.789 20609 20625 D ReactNative: Initializing React Xplat Bridge after initializeBridge
12-26 16:02:51.789 20609 20625 D ReactNative: CatalystInstanceImpl.runJSBundle()
12-26 16:02:51.807 20609 20633 D ReactNative: ReactInstanceManager.setupReactContext()
12-26 16:02:51.807 20609 20633 D ReactNative: CatalystInstanceImpl.initialize()
12-26 16:02:51.812 20609 20633 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
12-26 16:02:51.940 20609 20632 I ReactNativeJS: Running application "test" with appParams: {"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
12-26 16:02:51.965 20609 20632 E ReactNativeJS: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach')
12-26 16:02:51.965 20609 20632 E ReactNativeJS:
12-26 16:02:51.965 20609 20632 E ReactNativeJS: This error is located at:
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in ScrollView
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in RCTView
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in RCTView
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in RCTView
12-26 16:02:51.965 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.969 20609 20632 E ReactNativeJS: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach')
12-26 16:02:51.969 20609 20632 E ReactNativeJS:
12-26 16:02:51.969 20609 20632 E ReactNativeJS: This error is located at:
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in ScrollView
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in RCTView
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in t
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in RCTView
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in RCTView
12-26 16:02:51.969 20609 20632 E ReactNativeJS:     in t
12-26 16:02:52.418 20609 20609 D ReactNative: ReactInstanceManager.detachViewFromInstance()

Reproducible Demo

Because the app crashes on a production build here is a simple App.js file.

This demo can be reproduced by:

creating a new: react-native init test
substituting the App.js code below for the App.js which is the default on creating a project.
follow instructions for creating a keystore
updating the gradle.build as per the instructions in react-native docs.
build in the android directory with "gradlew assembleRelease"
run and see that with version 51.0 crashes in the Scribbable.js (as show above) although, of course, it's not Scribbable wher the error is, that is just where it occurs.

NOTE: but probably not important. When I build my app (either my own app or the test app), I must run gradlew assembleRelease twice, it always fails the first time. I think it needs to reset the transform cache.

ADDITIONAL NOTE: From what the other person who has seen this said, when reducing the version of React-native to 49.5 the problem goes away.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  FlatList,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class Example extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[{key: 0, title: 'Hello1'}, {key: 1, title: 'Hello2'}, {key: 2, title: 'Hello3'}]}
          renderItem={(itm)=> {
            return (<View key={itm.item.key}><Text>{itm.item.title}</Text></View>)
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

jnrepo · 2017-12-27T01:45:00Z

made a PR #17359 for react-native folks.

I'm actually having the same issue here: https://github.com/facebookarchive/react-native-custom-components/blob/master/src/Subscribable.js (exact same file as here).

ohflying · 2017-12-27T05:51:35Z

The issue is caused by the [email protected]，back to 3.2.2
npm install -save [email protected]

googya · 2017-12-27T09:33:32Z

@ohflying how did you find the fact of being caused by uglify-es ?

esutton · 2018-01-02T19:48:51Z

@a3diti Adding a resolution is a temporary work-around and not a fix.

I expect many people will run into this issue. I also expect few will be smart or lucky enough to determine the root cause. Closing this issue make it less likely a possible work-around will be found.

The only thing that has worked for me was your advice to change the Subscribers.js code.

Changing this:

this._subscribableSubscriptions.forEach(

To this:

this._subscribableSubscriptions && this._subscribableSubscriptions.forEach(

xardit · 2018-01-02T23:09:45Z

@esutton Ok, i guess you have a different environment since the uglify-es solution didn't work for you.

I recommend some necessary actions to perform when installing uglify-es, i do those sometimes when i have unexplainable errors:

Clean build on Xcode
Delete all folders inside DerivedData folder by going to Xcode>Preferences>Locations> press the icon on DerivedData folder locations, and delete all folders inside.
Quit Xcode entirely
Stop any react native listening cli (Metro Builder)
Delete app from your testing device/simulator
On Terminal App go to your project root, delete node_modules folder, remove package-lock.json file, re-install packages using yarn, not npm 5.x because v5.x is known to have some bugs.

rm -rf node_modules
rm -rf package-lock.json
yarn install

Test your app by running Debug or Release version

When i test the app for release, on Xcode i go to "Edit Scheme">Run>Build Configuration>Release
Also i test it on TestFlight on some devices before releasing it.

If those solutions don't work for you, try to initiate a new project on another folder and edit package.json accordingly, and then yarn install in order to install anything that is changed on package.json. Then copy all js/assets you had on the last project, don't forget to react-native link if you have any installed component that requires it.

Liron-K · 2018-01-03T06:15:28Z

So I updated all of the dependencies in my package.json, removed node_modules AND the package-lock.json and did a clean/rebuild in release mode and that worked.

I'm not sure if it was the package-lock or that the dependencies weren't all on the most up-to-date level, but that fixed it.

esutton · 2018-01-03T16:14:13Z

@a3diti Shouldn't this be fixed in react-native and * * NOT * * as a manually added resolution in a developer's project's package.json?

Concerns:

Requiring the addition of an uglify-es resolution to your Awesome project's package.json is * NOT * a fix. It feels like a temporary work-around for the root problem.
Question: How will a developer know he needs to add an uglify-es resolution to his Awesome project's package.json ??? ( Changing react-native init to add the uglify-es resolution seems silly. )

Work-Around:

I confirmed the uglify-es resolution work-around works on both Android and iOS release builds.

Add, then commit the following uglify-es 3.3.4 resolution to your Awesome project's package.json:

	"dependencies": {
                ...
		"react": "^16.2.0",
		"react-native": "^0.51.0",
                ...
	},
	"resolutions": {
		"uglify-es": "3.3.4"
	}

Build and run:

git clone https://acme.com/Awesome source
cd source
yarn
react-native run-android --variant=release
# Use Xcode to verify Scheme is set to release
react-native run-ios
```

362228416 · 2018-01-04T20:39:48Z

+1

esutton · 2018-01-05T14:44:37Z

I expect * many * release build apps have suddenly started crashing due to this minification bug.

I randomly ran across this victory-native issue that sounds like the root cause may be the same as this #17348 issue:

See: [Minification Bug] Crash on google pixel and IOs #199

Fixes facebook#17348 - Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach')

iMagdy · 2018-01-06T02:36:36Z

This comment #17348 (comment) fixed it for me.

Thanks @a3diti !

I've submitted a PR (#17463) with this fix. Hopefully it gets merged soon.

arma7x · 2018-01-09T17:10:56Z

Upgrade to RN0.52 works for me

sonaye · 2018-01-12T15:43:30Z

[email protected] breaks code too.

quincycs · 2018-01-13T16:29:48Z

@sonaye thanks! I'm using expo 24 and your comment worked for me. I had to do both your steps.
#17348 (comment)

has anyone posted an issue on uglify-es ?

techrah · 2018-01-15T22:48:16Z

Forcing @3.2.2 worked for me. Issue is still present in [email protected]. There were a lot of changes between 3.2.2 and 3.3.0 (over 40 commits) so it may take a while to figure out what caused this.

RafaelMagalhaesN · 2018-01-17T11:29:38Z

Solved with uglify-es 3.3.4 (steps: delete uglify-es from node_modules, put in your package.json "uglify-es": 3.3.4 and finally install with npm i). Tnks @a3diti

sonaye · 2018-01-17T11:33:53Z

[email protected] is the only stable resolution that worked for me so far, any new version breaks the app somewhere, up to @3.3.7.

asarmohd · 2018-02-04T18:12:45Z

We can resolve the issue by checking this._subscribableSubscriptions on line 33 on react native file project/node_modules/react-native/Libraries/Components/Subscribable.js - line 33

(-)this._subscribableSubscriptions.forEach
(+)this._subscribableSubscriptions && this._subscribableSubscriptions.forEach(

temitope · 2018-03-01T23:52:39Z

Running into same issue only on release not debug.
RN 0.51

hugoh59 · 2018-03-02T12:33:33Z

Nothing works for me, tried all fixes mentioned above but app still crashes when scrolling inside a scrollview on Android Real Device (Samsung)

adrian-kriegel · 2018-03-11T20:56:59Z

For me the problem was that the function is called inside the wrong object. Replacing onPress={this.someFunction} with onPress={() => {this.someFunction()} did the trick.

This fixes the RN issues @ facebook/react-native#17348

xardit closed this as completed Dec 25, 2017

facebook-github-bot added Needs more information Ran Commands One of our bots successfully processed a command. labels Dec 25, 2017

xardit reopened this Dec 25, 2017

alexey-pelykh added a commit to brainbeanapps/react-native that referenced this issue Dec 26, 2017

[WORKAROUND] facebook#17348

c15f65e

vovkasm added a commit to vovkasm/react-native that referenced this issue Dec 26, 2017

Hot fix from: facebook#17348

0b43a22

sonaye mentioned this issue Dec 26, 2017

Android TypeError:undefined is not an object (evaluating 'this._subscribableSubscription.forRach') react-navigation/react-navigation#3187

Closed

avshenuk mentioned this issue Dec 26, 2017

ScrollView: Unsupported top level event "topScroll" dispatched #16522

Closed

maciekstosio mentioned this issue Dec 26, 2017

Android crashes when any form of ScrollView exists in signed production build "app-release.apk" #17358

Closed

jnrepo mentioned this issue Dec 27, 2017

Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach') #17359

Closed

xardit reopened this Jan 2, 2018

iMagdy added a commit to iMagdy/react-native that referenced this issue Jan 6, 2018

Fix for 17348

521ee1e

Fixes facebook#17348 - Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach')

iMagdy mentioned this issue Jan 6, 2018

Fix for 17348 #17463

Closed

Rumidom mentioned this issue Jan 6, 2018

Code works fine on Expo App but Standalone app Android build gives Error expo/expo#1222

Closed

jnrepo mentioned this issue Jan 10, 2018

React Lifecycle functions are not called in their respective order facebookarchive/react-native-custom-components#28

Closed

bkdev98 mentioned this issue Jan 18, 2018

Expo app stuck on slash screen in apk and published app expo/expo#1226

Closed

arichnad added a commit to arichnad/react-native that referenced this issue Feb 15, 2018

fixes callstack described in facebook#17348

2db442c

arichnad mentioned this issue Feb 15, 2018

fixes callstack described in #17348 #17992

Closed

facebook-github-bot closed this as completed in b57a78c Feb 23, 2018

hush2 added a commit to hush2/gma-news-unofficial that referenced this issue Mar 21, 2018

Add metro-bundler to dependencies

8f6e21f

This fixes the RN issues @ facebook/react-native#17348

vovkasm mentioned this issue Jun 18, 2018

Bundlejs error on release build #19788

Closed

3 tasks

facebook locked as resolved and limited conversation to collaborators Feb 23, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 23, 2019

Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach') #17348

Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'this._subscribableSubscriptions.forEach') #17348

Comments

xardit commented Dec 25, 2017

react-native-bot commented Dec 25, 2017

xardit commented Dec 25, 2017

facebook-github-bot commented Dec 25, 2017

avshenuk commented Dec 25, 2017 • edited Loading

avshenuk commented Dec 25, 2017

xardit commented Dec 25, 2017

noambonnie commented Dec 25, 2017

leethree commented Dec 26, 2017

zhangsn commented Dec 26, 2017

gveeden commented Dec 26, 2017

brownieboy commented Dec 26, 2017 • edited Loading

luhui commented Dec 26, 2017

dimaportenko commented Dec 26, 2017

atesoriero2000 commented Dec 26, 2017

steveccable commented Dec 26, 2017

sonaye commented Dec 26, 2017

cyphire commented Dec 27, 2017

Is this a bug report?

Have you read the Contributing Guidelines?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

jnrepo commented Dec 27, 2017 • edited Loading

ohflying commented Dec 27, 2017 • edited Loading

googya commented Dec 27, 2017 • edited Loading

esutton commented Jan 2, 2018 • edited Loading

xardit commented Jan 2, 2018 • edited Loading

Liron-K commented Jan 3, 2018

esutton commented Jan 3, 2018 • edited Loading

Concerns:

Work-Around:

362228416 commented Jan 4, 2018

esutton commented Jan 5, 2018 • edited Loading

iMagdy commented Jan 6, 2018

arma7x commented Jan 9, 2018

sonaye commented Jan 12, 2018

quincycs commented Jan 13, 2018 • edited Loading

techrah commented Jan 15, 2018

RafaelMagalhaesN commented Jan 17, 2018 • edited Loading

sonaye commented Jan 17, 2018

asarmohd commented Feb 4, 2018

temitope commented Mar 1, 2018

hugoh59 commented Mar 2, 2018

adrian-kriegel commented Mar 11, 2018

avshenuk commented Dec 25, 2017 •

edited

Loading

brownieboy commented Dec 26, 2017 •

edited

Loading

jnrepo commented Dec 27, 2017 •

edited

Loading

ohflying commented Dec 27, 2017 •

edited

Loading

googya commented Dec 27, 2017 •

edited

Loading

esutton commented Jan 2, 2018 •

edited

Loading

xardit commented Jan 2, 2018 •

edited

Loading

esutton commented Jan 3, 2018 •

edited

Loading

esutton commented Jan 5, 2018 •

edited

Loading

quincycs commented Jan 13, 2018 •

edited

Loading

RafaelMagalhaesN commented Jan 17, 2018 •

edited

Loading