React-native: App force close on release mode: undefined is not an object (evaluating 'e.length')

[brunolemos]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13
Node: 8.9.0
Yarn: 1.2.1
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B37
Android Studio: 3.0 AI-171.4402976

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

Target Platform: iOS (11.1)

Steps to Reproduce

1. App with React Native v0.50+ installed
2. Run debug build (works)
3. Run release build (crash on app open)

Expected Behavior

Not crash

Actual Behavior

Crash on app open with this error:
RCTFatalException: Unhandled JS Exception: undefined is not an object (evaluating 'e.length')'

Stack points inside the color-converter package.

Current workaround

• Downgrade to 0.49.5

[brunolemos]

Possibly related: #16743, #16689
Duplicated: https://github.com/GeekyAnts/NativeBase/issues/1348

[brunolemos]

@petejkim @stephenheron I see you have the same problem, did you manage to fix?

[stephenheron]

Hi @brunolemos

Still having the same problem I am afraid.

It is quite tricky to track down as the error is not very helpful and it does not happen in debug mode. I thought it was a problem with NativeBase to be honest but if you are not using NativeBase then it points to something else.

Is there a way of us getting more useful crash information I wonder?

Thanks,
Stephen

[ovr]

I don't use NativeBase, but I am having similar problem, it's rly hard to debug

{"offset":{"line":690,"column":0},"map":{"version":3,"sources":["/Users/ovr/projects/interpals/mobile/node_modules/color-string/color-string.js"],"names":["__d","global","require","module","exports","getRgba","string","rgb","a","match","i","length","parseInt","slice","parseFloat","Math","round","colorNames","scale","getHsla","alpha","isNaN","getHwb","rgbaString","rgba","undefined","percentaString","hslaString","hsla","num","min","max","hexDouble","str","toString","toUpperCase","getRgb","getHsl","getAlpha","vals","hexString","rgbString","percentString","hslString","hwbString","hwb","keyword","reverseNames","name"],"mappings":"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"}}

node_modules/color-string/color-string.js

[Sean-Snow]

+1

[dotansimha]

Same here! 0.50.2

[stephenheron]

Looks like someone might have solved the issue : https://github.com/GeekyAnts/NativeBase/issues/1348#issuecomment-342757700

[dotansimha]

@stephenheron it didn't help me. Still getting:

Unhandled JS Exception: undefined is not an object (evaluating 'e.length')', reason: 'Unhandled JS Exception: undefined is not an object (evaluating 'e.length'), stack:
<unknown>@982:132
<unknown>@982:196
exports@982:395
<unknown>@979:218
<unknown>@979:72
t@2:620
<unknown>@977:39
t@2:620
<unknown>@976:285
t@2:620
<unknown>@975:287
t@2:620
<unknown>@974:446
t@2:620
<unknown>@968:293
t@2:620
<unknown>@967:126
t@2:620
<unknown>@966:265
t@2:620
<unknown>@965:178
t@2:620
<unknown>@964:144
t@2:620
<unknown>@963:194
t@2:620
<unknown>@962:213
t@2:620
<unknown>@960:233
t@2:620
<unknown>@930:278
t@2:620
<unknown>@910:118
t@2:620
<unknown>@844:135
t@2:620
<unknown>@843:99
t@2:620
<unknown>@648:187
t@2:620
<unknown>@356:132
t@2:620
<unknown>@12:44
t@2:620
<unknown>@2:154

Removing minification logic from node_modules/metro-bundler/src/JSTransformer/worker/minify.js seems to fix the issue.

[mauscoelho]

+1

[PvanHengel]

I did some digging around and was able to get it to "work".. Not sure if this is the same change as @dotansimha made or not... So perhaps the issue is actually related to changed made in https://github.com/mishoo/UglifyJS2

I modified the minify function in node_modules/metro-bundler/src/JSTransformer/worker/minify.js file from

```function minify(inputCode, inputMap) {
const result = uglify.minify(inputCode, {
mangle: false,//{ toplevel: true },
compress:false,

output: {
  ascii_only: true,
  quote_style: 3,
  wrap_iife: true },

sourceMap: {
  content: inputMap,
  includeSources: false },

toplevel: true });

if (result.error) {
throw result.error;
}

return {
code: result.code,
map: result.map };

}

```function minify(inputCode, inputMap) {
  const result = uglify.minify(inputCode, {
    mangle: false,//{ toplevel: true },
    compress:false,

    output: {
      ascii_only: true,
      quote_style: 3,
      wrap_iife: true },

    sourceMap: {
      content: inputMap,
      includeSources: false },

    toplevel: true });


  if (result.error) {
    throw result.error;
  }

  return {
    code: result.code,
    map: result.map };

}

[dotansimha]

@PvanHengel I just changed the code to return the original inputCode. Just wanted to verify that the issue is with the minification and not something else...

[andrew-wagner89]

I was able to fix the problem by resolving the color-convert package to use the pull request here: Qix-/color-convert/pull/49

just changed my package.json to include:
"resolutions": { "color-convert": "github:zbarbuto/color-convert" }

this is just a workaround though since other packages might declare the same var twice which breaks uglify

[prjmax]

@PvanHengel solution worked, but of course is just a workaround... any idea how to fix this issue permanently?

[PvanHengel]

@prjmax see @andrew-wagner89 above that seems to be the root cause.

[mobdim]

Same issue.

MacOS 10.12.6

package.json:

 "dependencies": {
...
    "react": "^16.0.0",
    "react-native": "0.50.3",
...
"resolutions": {
    "metro-bundler": "0.20.2",
    "color-convert": "github:zbarbuto/color-convert"
  }

My steps:

- watchman watch-del-all
- rm -rf node_modules/
- npm cache clean --force
- npm install
- react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
- npm start --reset-cache

Launch Android Studio 3. Clean, Rebuild, Generated Signed APK (debugkeystore)
Install apk to device.
Launch from device.

Logcat:

E/ReactNativeJS: undefined is not an object (evaluating 'e.length')

[askielboe]

The root cause is a bug in uglify-js: https://github.com/mishoo/UglifyJS2/issues/2449

Fixed in this pull request: https://github.com/mishoo/UglifyJS2/pull/2458

You can wait for a react-native upgrade or resolve uglify-js from the pull request (temporarily) in your package.json:

"resolutions": {
  "uglify-js": "github:alexlamsl/UglifyJS2#issue-2449"
},

[mobdim]

@askielboe Thank you, but not working for me.
I added to resolution section:

"resolutions": {
    "moment": "2.19.1",
    "metro-bundler": "0.20.2",
    "color-convert": "github:zbarbuto/color-convert",
    "uglify-js": "github:alexlamsl/UglifyJS2#issue-2449"
  }

and performed all updates.

But still receiving:

E/ReactNativeJS: undefined is not an object (evaluating 'e.length')

[askielboe]

Have you checked that the packages are actually resolved correctly? I'm using yarn instead of npm. Not sure if that makes a difference..

https://docs.npmjs.com/files/package.json#github-urls

[maartenpetit]

I can confirm that the fix of @askielboe works.

@mobdim have you tried the following:

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.

[dotansimha]

For me, the following works (0.50.3):

  "resolutions": {
    "metro-bundler": "0.20.2",
    "color-convert": "github:zbarbuto/color-convert",
    "uglify-js": "github:alexlamsl/UglifyJS2#issue-2449"
  },

Using latest Yarn.

Also, make sure to run:

watchman watch-del-all
rm -rf $TMPDIR/react-*
rm -rf node_modules/ 
yarn cache clean
yarn install

(and reinstall Pods if you are using it).

[PvanHengel]

Oh yeah forgot to mention that yesterday I tried with npm and it didn’t work I think you must use yarn

On Nov 9, 2017, at 8:22 AM, Andreas Skielboe [e-mail] wrote:

Have you checked that the packages are actually resolved correctly? I'm using yarninstead of npm. Not sure if that makes a difference..

https://docs.npmjs.com/files/package.json#github-urls

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[mobdim]

@askielboe, @masterpetit Thanks, I tried:

package.json:

...
    "react": "^16.0.0",
    "react-native": "0.50.3",
...
"resolutions": {
    "moment": "2.19.1",
    "metro-bundler": "0.20.2",
    "color-convert": "github:zbarbuto/color-convert",
    "uglify-js": "github:alexlamsl/UglifyJS2#issue-2449"
  } 

yarn 1.3.2

My steps:

- watchman watch-del-all
- rm -rf $TMPDIR/react-*
- rm -rf node_modules/
- npm cache clean --force
- yarn cache clean
- yarn install
- npm start --reset-cache

Then I run __Android Studio 3__, rebuild and __generate release apk__ with debugkeystore. (Maybe something here wrong?)
Install and launch on device.
And I still receiving E/ReactNativeJS: undefined is not an object (evaluating 'e.length')

[mobdim]

@dotansimha Thank you.
I using yarn 1.3.2 and perform spells. ))
But not working on device (android, release signed debugkeystore).
Online bundle working, but offline has error.

[maartenpetit]

@mobdim my resolutions looks like this:

"resolutions": {"uglify-js": "github:alexlamsl/UglifyJS2#issue-2449"}

Maybe also remove your yarn and npm lock files.

[andrew-wagner89]

FYI the pull request for color-convert has been merged and released as v1.9.1, so color convert resolutions can now be
"resolutions": { ... "color-convert": "1.9.1", ... }

see https://github.com/Qix-/color-convert/pull/49#issuecomment-342974686

[mobdim]

@masterpetit

Yes, I set resolutions only

"resolutions": {
    "uglify-js": "github:alexlamsl/UglifyJS2#issue-2449"
  }

and added steps

watchman watch-del-all
rm -rf $TMPDIR/react-*
rm -rf node_modules/
rm yarn.lock
rm android/app/src/main/assets/index.android.bundle
rm android/app/src/main/assets/index.android.bundle.meta
npm cache clean --force
yarn cache clean
yarn install
npm start --reset-cache

but not working...

I will create empty project and try to run it.

[nushydude]

I've come across the same issue with release 0.50.2

What I have discovered is that navigator is undefined in release build. But it is available in debug build of the app. We use navigator to detect if we are in ReactNative or not.

The fix with uglifyjs worked for me though.

[th317erd]

For those of you using npm (like myself), as a hack workaround until uglify-es npm package is re-published, run this from the root of your project: cd node_modules/metro-bundler/ ; rm -fr node_modules/uglify-es ; npm i https://github.com/mishoo/UglifyJS2.git ; mv node_modules/uglify-js node_modules/uglify-es ; cd ../..

Note: This change will likely be reverted on an npm i... possibly add it as a "postinstall" script until an official patch comes out

[brunolemos]

@th317erd i think this would be lost on every npm install

[th317erd]

You can also change the metro-bundler minify options in ./node_modules/metro-bundler/src/JSTransformer/worker/minify.js and add

compress: {
  reduce_vars: false
}

See documentation here: https://www.npmjs.com/package/uglify-es

Note: This change will likely be reverted on npm i

[th317erd]

@andrew-wagner89 Simply updating color-convert as your solution is NOT A GOOD IDEA. This bug WILL silently break other things as well. Your best bet it to apply one of the other work-arounds mentioned

[mobdim]

My solution:

"react-native": "0.50.3",
"react": "^16.0.0",

remove resolutions from package.json

and build steps:

watchman watch-del-all
rm -rf $TMPDIR/react-*
rm yarn.lock
rm android/app/src/main/assets/index.android.bundle
rm android/app/src/main/assets/index.android.bundle.meta
yarn cache clean
yarn install
mkdir -p android/app/src/main/assets/
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
cd android
./gradlew clean
./gradlew assembleDebug
cd ..

Everything ok!

[brunolemos]

@mobdim the problem only happens when we use assembleRelease not assembleDebug.
Is it working for you using assembleRelease? If so then the buggy packages were updated.

[sibelius]

this one https://github.com/facebook/react-native/issues/16745#issuecomment-343443988 fixed for me

remove all the cache

[th317erd]

TO ANYONE WHO FINDS THEMSELVES HERE: This issue has been resolved with a recent publish to uglify-es npm package. There is no longer a need for any of these hacky workarounds. Simply remove the node_modules/metro-bundler module and npm i, or wipe all your node_modules and npm i (the later is heavier on bandwidth).

This also isn't directly an issue with metro-bundler or react-native, so this issue can probably be closed.

[JulienKode]

@th317erd You're totally right, thanks for the information

[phu-tang-tiki]

Hi,

I think a have a same issue with @brunolemos when I upgrade my project from react-native 0.45 to 0.50.3, but my error is a bit difference

 Unhandled JS Exception: undefined is not an object (evaluating 'p.View.propTypes.style')', reason: 'Unhandled JS Exception: undefined is not an object (evaluating 'p.View.prop..., stack:
<unknown>@2285:2191
i@2:563
<unknown>@2284:203
i@2:563
<unknown>@2207:402
i@2:563
<unknown>@2201:197
i@2:563
<unknown>@2200:124
i@2:563
<unknown>@1274:1117
i@2:563
<unknown>@301:389
i@2:563
<unknown>@12:38
i@2:563
n@2:267
global code@2833:9
'

I tried to install the latest metro-bundler like @th317erd said, but can't fix it.
PS: debug mode everything is perfect :(

[kuranari]

@thphu Your issue is similar to https://github.com/facebook/react-native/issues/16567

View.propTypes have been deprecated. but some code or dependent package is still using View.propTypes in your project.
check it: https://github.com/facebook/react-native/issues/16567#issuecomment-340041357

[mobdim]

@brunolemos No, I still use assembleDebug. Because my project is still under development. assembleRelease not working and don't know what to do.

[toooldmohammad]

this comment works for me , tnx @mobdim

[danielfttorres]

In my case, c.View.propTypes.style causes crash.

I run the app in release mode with react-native run-ios --configuration Release for debug it easily and see the report in Crashlytics. Then I see the error and solve it.

[bochen2014]

we have similar issues keep coming up #17348

[brunolemos]

Upgraded react-native to the latest version and this is no longer an issue.

[mosleim]

@brunolemos not working here.

  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "native-base": "^2.8.0",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-charts-wrapper": "^0.4.8",
    "react-navigation": "^2.17.0"
  },

still crashed on build release. happen when some of native-base componen touched.

[valerybodak]

@brunolemos

Upgraded react-native to the latest version and this is no longer an issue.

So, what version of React and React Native do you use now?

[IlyasAbdighni]

@mosleim
Are you able to fix the crash? If you are, how?

[matthewfbenjamin]

When I tried @mobdim 's solution it got rid of the error undefined is not an object but caused another issue where the release bundle doesn't include assets anymore. Has anyone else seen this?