Been developing mobile apps using react-native for a good few months now but recently I've been coming across the following issue when creating release APK's...
ReactNativeJS: Object is not a function (evaluating '(0,babelHelpers.interopRequireDefault(u).default)()')
The only reference I've been able to find when debugging this issue is one from 2015 ("babelHelpers.interopRequireDefault is not a function" when upgrading to React Native 0.16.0-rc) but unfortunately it offers little assistance when figuring this issue out especially as it was targeted at react-native 0.16 and was promptly resolved.
This issue is only thrown when launching the release APK under Android (accessible via adb logcat) on either a device or emulator and there are no issues or error logs thrown when in dev mode.
In terms of the environment, I'm currently running the following:
yarn: 1.7.0
node: 10.4.0
react-native-cli: 2.0.1
react-native: 0.55.4
gradle: 2.14.1
package.json contains the following dependencies:
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-bgimage": "^1.4.0",
"react-native-navigation": "^1.1.463",
"react-native-root-toast": "^3.0.1",
"react-native-super-grid": "^2.3.2",
"react-native-vector-icons": "^4.6.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "^23.0.1",
"babel-preset-react-native": "4.0.0",
"eslint-config-react-native": "^2.0.0",
"jest": "^23.1.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
Build configuration includes both proguard and separate architecture builds enabled but I have tested the release APK's with both options set to false.
Not sure what else I can provide or where to look next, advise is much appreciated as this has been investigated for a while now :(
Let me know if any additional info is required.
Related
i have a project i worked on some years back on my previous laptop(Samsung, Windows OS). I needed to refer back to that project recently so i move the source code to my current laptop (Mac M1). Upon running the app i got a bunch of errors. About 57 errors like this:
ERROR in ./node_modules/nativescript-screenshot/index.js 1:18-41
Module not found: Error: Can't resolve 'image-source' in '/Users/ad8kunle/Documents/nativescript-projects/skogapp/node_modules/nativescript-screenshot'
# ./app/profile/profile.js 10:13-47
# ./app/ sync .(xml%7Cjs%7Cs?css)$ ./profile/profile.js
# ./node_modules/#nativescript/webpack/dist/stubs/virtual-entry-javascript.js 3:16-89
ERROR in ./node_modules/nativescript-toast/toast.android.js 3:18-40
Module not found: Error: Can't resolve 'application' in '/Users/ad8kunle/Documents/nativescript-projects/skogapp/node_modules/nativescript-toast'
# ./app/home/home-page.js 10:12-41
# ./app/ sync .(xml%7Cjs%7Cs?css)$ ./home/home-page.js
# ./node_modules/#nativescript/webpack/dist/stubs/virtual-entry-javascript.js 3:16-89
ERROR in ./app/welcome/slides-view.js 2:47-80
Module not found: Error: Can't resolve 'ui/layouts/grid-layout' in '/Users/ad8kunle/Documents/nativescript-projects/skogapp/app/welcome'
# ./app/ sync .(xml%7Cjs%7Cs?css)$ ./welcome/slides-view.js
# ./node_modules/#nativescript/webpack/dist/stubs/virtual-entry-javascript.js 3:16-89
I ran tns --version on my previous laptop and its version 6.3. However, my current version is 8.3.2
My package.json looks like
"dependencies": {
"#nativescript/core": "~8.3.0",
"#nstudio/nativescript-cardview": "^2.0.0",
"#nstudio/nativescript-pulltorefresh": "^1.1.1",
"#progress-nativechat/nativescript-nativechat": "3.0.0",
"nativescript-accelerometer": "3.0.0",
"nativescript-background-http": "4.2.1",
"nativescript-blur": "^2.0.0",
"nativescript-camera": "4.5.0",
"nativescript-contacts": "^1.6.2",
"nativescript-exit": "^1.0.1",
"nativescript-fancyalert": "^3.0.9",
"nativescript-floatingactionbutton": "^5.1.0",
"nativescript-geolocation": "5.1.0",
"nativescript-image": "3.0.1",
"nativescript-image-cache-it": "^5.0.0-beta.20",
"nativescript-image-colors": "^1.1.0",
"nativescript-image-filters": "^2.2.2",
"nativescript-imagepicker": "7.1.0",
"nativescript-intl": "3.0.0",
"nativescript-iqkeyboardmanager": "1.5.1",
"nativescript-permissions": "^1.3.8",
"nativescript-phone": "^1.4.1",
"nativescript-plugin-firebase": "^10.5.2",
"nativescript-plugin-universal-links": "^1.0.1",
"nativescript-pulltorefresh": "^2.3.0",
"nativescript-ripple": "^2.2.1",
"nativescript-root-detection": "^1.0.0",
"nativescript-screenshot": "0.0.2",
"nativescript-social-share": "1.6.0",
"nativescript-sqlite": "^2.6.0",
"nativescript-status-bar": "^1.2.0",
"nativescript-theme-core": "~1.0.6",
"nativescript-toast": "^2.0.0",
"nativescript-ui-autocomplete": "6.0.1",
"nativescript-ui-calendar": "6.1.0",
"nativescript-ui-chart": "7.1.1",
"nativescript-ui-dataform": "6.0.0",
"nativescript-ui-gauge": "6.0.0",
"nativescript-ui-listview": "8.0.1",
"nativescript-ui-sidedrawer": "8.0.0",
"nativescript-urlhandler": "^1.3.0",
"nativescript-web-image-cache": "^5.0.0",
"nativescript-web-image-cache-with-fresco": "^2.0.2",
"nativescript-webrtc-plugin": "^2.0.0-alpha.22"
},
"devDependencies": {
"#nativescript/android": "8.3.0",
"#nativescript/webpack": "~5.0.0"
},
Already tried tns --migrate. That was whqt reduced the errors to 57. there were 215 before.
It's a HUGE jump to go from {N} v6 to v8, with lots of breaking changes. I bit the bullet and spent several months making the upgrade myself earlier this year. (To be fair, I was also making UI changes during the upgrade).
As a start, watch this video, probably at least twice: Migrating Legacy NativeScript 6 Project to 8
Good luck!
I'm getting two similar warning (one for image and other for text) in the default latest ReactNative demo on running the application in debug mode (No additional custom dependencies added). There are different posts around this error but all are because of adding a dependency. I haven't added any dependency.
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.65.1"
},
"devDependencies": {
"#babel/core": "7.15.5",
"#babel/runtime": "7.15.4",
"#react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.66.0",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
I don't want to edit the MessageQueue.js to suppress this as is mentioned in a new post. Should I downgrade RN to some other version or is there any other fix without side effects?
OS = BigsurOS. Emulator = Pixel5 (Android R)
----UPDATE----
Downgrading ReactNative to 0.64 doesn't cause this issue. Hence, it's a problem with 0.65 only
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?
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.
I'm just simply trying to start metro bundler to serve the app. Here's the error:
TypeError: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "StringLiteral"
at Object.validate (/Users/tyler/Code/.../node_modules/#babel/types/lib/definitions/utils.js:128:13)
at Object.validate (/Users/tyler/Code/.../node_modules/#babel/types/lib/validators/validate.js:17:9)
at NodePath._replaceWith (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/replacement.js:194:9)
at NodePath.replaceWith (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/replacement.js:178:8)
at PluginPass.MemberExpression (/Users/tyler/Code/.../node_modules/babel-plugin-transform-inline-environment-variables/lib/index.js:19:18)
at newFn (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/tyler/Code/.../node_modules/#babel/traverse/lib/context.js:118:16)
which means something like Platform.OS = "ios" is transformed into "ios" = "ios": like so <- That PR also addresses the TypeError being thrown for the process.env which seems to be the case for me. My stack trace references ...babel-plugin-transform-inline-environment-variables/lib/index.js:19:18 which deals exclusively with setting process.env. There are only two places in my code using a var from process.env and neither are used on the left side of an assignment.
PR 45 for the metro bundler was merged way back in 2017 though. And I'm using the latest version btw, this is occurring when trying to start up the bundler with the script "NODE_ENV=development npm start -- --reset-cache". Note that I am using the reset cache flag as mentiond here
A coworker suggested the error may be cause by a react-native plugin, but I haven't uncovered it yet if that is the case. We did just migrate this app to Babel 7, fyi. I'm hitting a wall now on ideas and the google trail is growing stale. What else could be the cause of this error?
Here are the dependencies from my package.json in case it helps:
}
...
"dependencies": {
"#babel/runtime": "^7.0.0",
"lodash.capitalize": "^4.2.1",
"lodash.debounce": "^4.0.8",
"lodash.find": "^4.6.0",
"phoenix": "^1.3.4",
"prettier": "^1.14.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-native": "0.57.0",
"react-native-firebase": "^4.3.8",
"react-native-keep-awake": "^3.1.0",
"react-native-linear-gradient": "^2.4.2",
"react-native-router-flux": "^4.0.1",
"react-native-swiper": "^1.5.13",
"react-native-tts": "^2.0.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"spokestack-react-native": "0.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"imagemin": "^6.0.0",
"imagemin-jpegtran": "^5.0.2",
"imagemin-optipng": "^5.2.1",
"imagemin-svgo": "^7.0.0",
"jest": "^23.6.0",
"metro-react-native-babel-preset": "^0.45.2",
"pre-commit": "^1.2.2",
"precise-commits": "^1.0.2",
"react-test-renderer": "^16.4.2",
"redux-mock-store": "^1.5.3"
},
...
}
...and additionally, the babel.config.js as per babel 7
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-object-rest-spread',
'transform-inline-environment-variables'
]
}
UPDATE: I used grep within the react-* packages to find additional lines where process.env were used as a lefthand assignment. Only found a few, but couldn't resolve the issue.
The error you see in the log is related to babel-plugin-transform-inline-environment-variables. If you exclude it from your configuration file, the build should pass.
I'm facing the same issue and haven't found a good solution so far, so try to workaround a way how you pass your environment variables.
Bundling index.js [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: Error: Cannot find module '#babel/core' (While processing preset:
Others have had similar problems which were solved by one of the following:
Uninstalling babel-preset-react-native and installing it again #2.1.0.
Some people could only fix this using yarn and not npm
Moving Babel to devDependancies
Updating the .babelrc file with
{
"presets": [
"react-native"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
Unfortunately, not a single one of these worked for me. This happened right after I installed "react-native-svg": "^6.4.1" and "react-native-svg-charts": "^5.2.0".
My package.json is
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-svg": "^6.4.1",
"react-native-svg-charts": "^5.2.0",
"react-navigation": "^1.5.11",
"react-navigation-redux-helpers": "^1.0.5",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "^5.4.0"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.52",
"babel-jest": "23.2.0",
"babel-loader": "^7.1.5",
"gulp-babel": "^7.0.1",
"babel-preset-react-native": "2.1.0",
"jest": "23.3.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
I've tried a few other things as well, i've removed the node_modules directory about 150 times and reinstalled. always the same error. I've installed #babel/core and babel-core. I've changed the version numbers, i've moved them around from dependencies to devDependencies and back again. nothing is working.
When I do npm install - everything seems to install just fine
When I do react-native run-android it runs through the code, loads it onto the emulated device
Installing APK 'app-debug.apk' on 'Nexus_6_API_28(AVD) - 9' for app:debug
Installed on 1 device.
BUILD SUCCESSFUL
Total time: 10.373 secs
However, immediately after that, when it runs on the device I receive the red screen of death.
Bundling index.js [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: Error: Cannot find module '#babel/core' (While processing preset: "/Code/nr/node_modules/babel-preset-react-native/index.js")
Well, after a few hours it seems that at least one of the above DID work. the remaining issue was closing the Metro Bundler terminal and starting a new one. Thanks to a comment on the accepted answer from TransformError with babel-preset-react-native/index.js