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

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(

The issue is caused by the uglify-es@3.3.2，back to 3.2.2 npm install -save uglify-es@3.2.2

@facebook-github-bot no-template

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}

This bug should be caused by uglify-es 3.3.X. I confirm that it’s fixed by downgrading uglify-es. Just add this block to package.json:

  "resolutions": {
    "uglify-es": "3.2.2"
  }

The _subscribableSubscriptions workaround is no longer necessary after downgrading uglify-es.

For people using Expo, you don’t need to edit anything in react-native. I confirm that adding

"resolutions": { "uglify-es": "3.2.2" }

to package.json does indeed fix the problem.

Tried both publishing on Expo and building a standalone app and it’s working like a charm

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

1. When building the app in normal debug mode, no issue.
2. Created a dummy certificate and updated the build.gradle correctly, In the “android” directory, I ran “gradlew assembleRelease”.
3. This created the correct SIGNED app-release.apk in the apk directory.
4. Installed the app-release.apk in both the emulator on computer as well as an LG V20 device.
5. Both the emulator and the device crash on startup.
6. 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:

1. creating a new: react-native init test
2. substituting the App.js code below for the App.js which is the default on creating a project.
3. follow instructions for creating a keystore
4. updating the gradle.build as per the instructions in react-native docs.
5. build in the android directory with “gradlew assembleRelease”
6. 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,
  },
});

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

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

@googya Not sure about concrete uglify-es versions, but it looks ulify-es related. Why?

1. study of code in Subscribable.js
2. For us this crash was very environment dependent:

• local builds always works, simulator or device
• jenkins builds deployed to testfligh always fails
• crashes or they absence was stable and reproducible, so if app crashed it always crashed, if not it always works, so it looks as packaging issue.

We did not try to deeply investigate packing process, because fork/patch RN was more fast and logical fix for us, but I probably can diff bundled js from jenkins builds and local (if it is really needed).

uglify-es@3.2.2 is the only stable resolution that worked for me so far, any new version breaks the app somewhere, up to @3.3.7.

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

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

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

1. 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
```


  

got it work, for node people make sure the uglify-es module version is set specifically to 3.2.2.

"uglify-es": "3.2.2"

I had "uglify-es": "^3.2.2" before and it would fail

"resolutions": { "uglify-es": "3.2.2" } fixed the issue that was introduced by the first solution this._subscribableSubscriptions && for me.

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

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

React Native version 0.50.3 is affected too

This comment https://github.com/facebook/react-native/issues/17348#issuecomment-353892314 fixed it for me.

Thanks @a3diti !

I’ve submitted a PR (https://github.com/facebook/react-native/pull/17463) with this fix. Hopefully it gets merged soon.

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

I am seeing this even with uglify-es set to 3.3.4 or 3.2.2. Only on release builds but not in debug.

For those who have initiated the project and have already uglify-es version 3.3.2 please update to higher version. For new created projects the problem is fixed automatically because current version of uglify is v3.3.4. The problem It was caused with the app crashing when installing the app as release on the simulator or device from component of react-native located in: Libraries/Components/Subscribable.js. It seemed the componentWillUnmount was called before componentWillMount and generating an error for an undefined variable, this kind of problem is believed to be generated from uglify-es v3.3.2 and fixed by uglify-es v3.3.4, some kind of bug during compression of js files, probably on rare occasions (when RN project is build with release mode it is compressed by default using uglify-es).

Solution Note: For projects initiated with uglify-es v3.3.2 and probably lower versions

1. Add a resolutions part to package.json for your project in order to get v3.3.4 or higher of uglify-es:

  "resolutions": {
    "uglify-es": ">=3.3.4"
  }

1. Type npm install or yarn install to install the node packages

Example of package.json Done I’m closing the issue since it is automatically resolved.

EDIT

It seems the issue still persist on some users on different environment, i was mistaken to close the issue!

Had the same issue and only @pavlomakarov solution worked for me ("metro-bundler": "0.22.1" to my dependencies).

Deeply troubling that a minification pass causes this type of logic issue, as the implications for the rest of the app are unknown but also possible unstabilizing. JS stacks feel like such a house of cards sometimes…

 "resolutions": {
    "uglify-es": "3.2.2"
  }

does not work for me as well

This issue seems to only occur in minified code. Upgrading metro-bundler to the latest version resolved it for me. You can just explicitly add it to your dependencies, I’m using metro-bundler 0.22.1. Also, adding uglyfy-es@3.2.2 to resolutions didn’t help, because older versions of metro bundler still forced a 3.3.2 dependency

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(

@jnrepo 's solution worked for me, thanks a lot !

But it worked once I deleted the node_modules folder but also the package-lock.json file. So if it’s still not working for you, try adding uglify as a dependency:

npm install --save uglify-es@3.2.2

Change your package.json:

From "uglify-es": "^3.2.2" to "uglify-es": "3.2.2"

And then run:

rm -rf node_modules/ package-lock.json && npm i

+1 for npm install -save uglify-es@3.2.2; No need to mess with resolutions. Delete node_modules/, run that line, re-run npm i, and publish. Works beautifully. Thanks @ohflying!

uglify-es or uglify-js? Because uglify-es didn’t help me…

On Thu, Dec 28, 2017 at 1:51 PM pavlomakarov notifications@github.com wrote:

This issue seems to only occur in minified code. Upgrading metro-bundler to the latest version resolved it for me. You can just explicitly add it to your dependencies, I’m using metro-bundler0.22.1. Also, adding uglyfy-es@3.2.2 to resolutions didn’t help, because older versions of metro bundler still forced a 3.3.2 dependency

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/17348#issuecomment-354276752, or mute the thread https://github.com/notifications/unsubscribe-auth/AEXdyJul5cTdj_KEWR9BESxvURvWHiWQks5tE4DbgaJpZM4RMZlv .

downgrade gulify-es worked for me.

 "resolutions": {
    "uglify-es": "3.2.2"
  }

it seems that gulify-es has cause quite a few issues (#16745) It also seems that react-native doesn’t have smoke test? or integration test (release version)

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

@sonaye thanks! I’m using expo 24 and your comment worked for me. I had to do both your steps. https://github.com/facebook/react-native/issues/17348#issuecomment-354209083

has anyone posted an issue on uglify-es ?

I just created a brand new project with react-native-cli 2.0.1 (the latest version as I write this) and once I’d added my dependencies (native-base and react-navigation) I saw that the installed version of uglify-es was already set at 3.3.4 without me having to modify it.

I was able then to install a Release version of my app directly to my iPhone without incurring the crash.

So issue solved, for new projects at least?

Also looks like adding a dependency to "uglify-es": ">=3.3.4" solves this issue for me too. So 3.2.2 = ok and 3.3.4 = ok, but 3.3.2 = NOT ok.

Hey everyone, posting in case someone goes through the same headache as I did this morning.

Just finding this issue was extremely tough. The exception did not appear for me if I did a reload and had the dev server bundle my code. And if I uninstalled the app and ran react-native run-android, I also would not get this thrown exception (even if not connected to the dev server). The exception only appeared in production builds (no red screen to tell me why the app crashed) or after I created a new bundle and build without connecting to the dev server. Often it would look like the production build would crash and the dev build would be fine. I’m guessing this is affecting a lot of people who do not even realize it.

@ohflying 's solution worked for me. npm install -save uglify-es@3.2.2

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!

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