React Native on device causes "Unhandled JS Exception: new.target" - react-native

Question

Hoping this is a simple issue but I couldn't find anything on a Google search. Running on emulator (with any build type) works perfectly. Connecting a device however with any build type (debug or release) the following issue occurs at runtime (the app can build successfully):
My package.json has the following deps:
"dependencies": {
"#redux-offline/redux-offline": "2.4.0",
"babel-plugin-transform-remove-console": "6.9.4",
"buffer": "5.2.0",
"crypto-js": "3.1.9-1",
"lodash": "4.17.10",
"react": "16.3.1",
"react-native": "0.54.4",
"react-native-fast-image": "4.0.14",
"react-native-firebase": "4.3.8",
"react-native-fs": "2.10.14",
"react-native-maps": "0.21.0",
"react-native-maps-super-cluster": "1.4.1",
"react-native-navigation": "1.1.471",
"react-native-svg": "6.4.1",
"react-native-tab-view": "1.0.2",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"whatwg-url": "6.5.0"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "23.0.1",
"babel-preset-flow": "6.23.0",
"babel-preset-react-native": "4.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-flowtype": "2.49.3",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"flow-bin": "0.65.0",
"husky": "0.14.3",
"jest": "23.1.0",
"lint-staged": "7.1.3",
"prettier": "1.13.4",
"react-native-schemes-manager": "1.0.4",
"react-test-renderer": "16.3.0-alpha.1"
},
My .babelrc has the following:
{
"presets": ["react-native", "flow"],
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
I am using react-native-schemes-manager to build a flavour of base app. The config for this is in the package.json like so:
"xcodeSchemes": {
"Debug": [
"FakeAppNameDebug"
],
"Release": [
"FakeAppNameRelease"
]
}
None of this explains how it works perfectly fine on a simulator but wants to throw tantrums when running on a device though. Any ideas?

Answer 1

I had the same problem, that's what I've found out:
JS in RN is executed in two different environments (V8 or JavaScriptCore), depending on how you run it. E.g. in my case the app worked properly on iOS simulator with and without remote js debugger; on Android simulator worked only with remote debugger turned on and threw the error without it; on a real Android device threw the error. Taking into consideration that JSC comes in two different versions (supplied by iOS or packaged in RN app for Android), I concluded that the iOS JSC and V8 do understand target.new, whilst the Android-packaged JSC doesn't (btw neither does Babel).
That's the reason why new.target fails, depending on where you run it.
Now where this bug comes from: I used this method to find the culrpit and located it in the whatwg-url package, in node_modules/whatwg-url/lib/URL.js:
return iface.setup(Object.create(new.target.prototype), args);
tl;dr; There are several possible solutions:
Get rid of whatwg-url. This may be just a temporary solution, because there are more things that the original JSC doesn't support (e.g. proxies or symbols that can't be simply transpiled or polyfilled).
Replace JSC with an alternative. The 2 options I've found are: jsc-android-buildscripts (an RN go-to solution, so probably a better option) and LiquidCore. This can be a good investment since the original JSC hasn't been developed since 2016 (:sick:).
Wait for RN v0.59, which will replace the JSC.
Bonus: You can try changing the new.target occurrences to new . target (which apparently is supported in all the engines) just to check if newTarget is the only problem you have. In my case, it appeared that it's also proxies that aren't supported (I'm using mobx v5), so just getting rid of whatwg-url wouldn't solve my problem.