react-native bundle throws SyntaxError in dev and prod mode - android

I am using react-native to bundle an Android APK.
I am able to run it properly in dev mode but have not been able to release a signed apk yet.
node version: `v5.10.0`
npm version: `3.8.3`
react-native version: `0.22.2`
Tried with babel-core versions
6.5.1
6.4.5
6.7.4
The error I am getting on running either of these commands
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/
react-native bundle --platform android --dev true --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
is
bundle: Created ReactPackager
uncaught error Error: SyntaxError: /Users/'username'/projects/personal/openchs/openchs-client/node_modules/react-native/Libraries/react-native/react-native.js:
Unexpected token (120:2)
// Note: this must be placed last to prevent eager
// evaluation of the getter-wrapped submodules above
...require('React'),
};
if (__DEV__) {
at Parser.pp.raise (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:1378:13)
at Parser.pp.unexpected (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:2817:8)
at Parser.pp.parseIdentifier (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:1227:10)
at Parser.pp.parsePropertyName (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:1070:135)
at Parser.pp.parseObj (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:986:12)
at Parser.pp.parseExprAtom (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:718:19)
at Parser.parseExprAtom (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:4305:22)
at Parser.pp.parseExprSubscripts (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:504:19)
at Parser.pp.parseMaybeUnary (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:484:19)
at Parser.pp.parseExprOps (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/babylon/index.js:415:19)
See logs /var/folders/zj/sk4075x566l8jdl1gwzjl79h0000gn/T/react-packager.log
at SocketClient._handleMessage (SocketClient.js:144:23)
at BunserBuf.<anonymous> (SocketClient.js:53:42)
at emitOne (events.js:90:13)
at BunserBuf.emit (events.js:182:7)
at BunserBuf.process (/Users/mihir/projects/personal/openchs/openchs-client/node_modules/bser/index.js:289:10)
at /Users/mihir/projects/personal/openchs/openchs-client/node_modules/bser/index.js:244:12
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
More of my code is here - https://github.com/OpenCHS/openchs-client

Anyone that finds this and is looking for the answer, it can be found here: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
you will need to install babel-preset-react-native-stage-0 package and include it in your .babelrc presets array

Related

gesture.ts: child.isClassAccessorProperty is not a function

error node_modules\react-native-gesture-handler\src\handlers\gestures\gesture.ts: node_modules\react-native-gesture-handler\src\handlers\gestures\gesture.ts: child.isClassAccessorProperty is not a function.
TypeError: node_modules\react-native-gesture-handler\src\handlers\gestures\gesture.ts: child.isClassAccessorProperty is not a function
at \node_modules#babel\plugin-transform-typescript\lib\index.js:361:89
at Array.forEach ()
at PluginPass.Class (node_modules#babel\plugin-transform-typescript\lib\index.js:353:31)
at newFn (C:\Users\dell\AppData\Roaming\npm\node_modules\react-native\node_modules#babel\traverse\lib\visitors.js:177:21)
at NodePath._call (C:\Users\dell\AppData\Roaming\npm\node_modules\react-native\node_modules#babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\Users\dell\AppData\Roaming\npm\node_modules\react-native\node_modules#babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\Users\dell\AppData\Roaming\npm\node_modules\react-native\node_modules#babel\traverse\lib\path\context.js:100:31)
at TraversalContext.visitQueue (C:\Users\dell\AppData\Roaming\npm\node_modules\react-native\node_modules#babel\traverse\lib\context.js:103:16)
at TraversalContext.visitSingle (C:\Users\dell\AppData\Roaming\npm\node_modules\react-native\node_modules#babel\traverse\lib\context.js:77:19)
info Run CLI with --verbose flag for more details.
In React Native while generate debug apk getting this error, i've run below command. Thanks
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

gradlew assembleRelease and gradlew assembleReleaseStaging producing APK without changes

I am trying to bundle my APK. When I use gradlew assembleRelease or assembleReleaseStaging there are no changes in my app. When I use 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 before assembling it creates a lot of new files, if i delete all of them except index.android.bundle and run gradlew assembleRelease or gradlew assembleReleaseStaging everything works just fine. My question is - is there any way to assemble release without manual bundling? I have tried gradlew clean and other ways found on stackoverflow. Any advice is highly appreciated.
You need to hook react.gradle to your module's build.gradle.
Go to app/build.gradle and add the following:
// Configures the bundleJS commands for React-Native
project.ext.react = [
// whether to bundle JS and assets in debug mode
bundleInDebug: false,
// whether to bundle JS and assets in release mode
bundleInRelease: true,
// the root of your RN project, i.e. where "package.json" lives
root: "path_to_rn_project_directory"
]
apply from: "<path to RN project>/node_modules/react-native/react.gradle"
After this, assembleRelease will start bundling as well.

error when generating Apk file in react native

I got the below error when i tried to build a apk fron react-native using this command ./gradlew assembleRelease
D:\tmp\taamapp\android\app\build\intermediates\res\merged\release\drawable-hdpi\node_modules_reactnavigationstack_src_views_assets_backicon.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
error: failed parsing overlays.
There's another option you can try in gradle.properties which is org.gradle.configureondemand=true. So use that instead of android.enableAapt2=false.
and removed all drawable* folders
rm -rf android/app/src/main/res/drawable-*
use the following command to bundle assets:
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/build/intermediates/res/merged/release/
Run ./gradlew clean after.
hope it will help you :)

react native app works, but both APK and --variant=release crash repeatedly upon loading

After running logcat. I discovered the follow error exception:
AndroidRuntime: java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.
Doesn't creating an apk/running the variant release version automatically include the bundler? How do I rebuild and verify that the bundler has been included in the apk/variant release?
I tried adding bundleAssetName: "index.android.bundle",
to
project.ext.react = [
entryFile: "index.js",
bundleAssetName: "index.android.bundle",
]
I still got the same issue(repeatedly crashing). I did a search for "exception" and found this error:
java.lang.IllegalArgumentException: Requested window android.os.BinderProxy#b60a260 does not exist
In order to make sure the bundler is included in the apk, this was needed
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
Shamelessly taken from this post.

gradlew assembleRelease command in react-native android is not generating the app-release.apk

I want to generate the unsigned app-release.apk without the react-packager server.
I am running the following commands for that.
cd react-native-project-dir
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/
After the following command I get the error in command prompt like these:
cd android && gradlew assemblerelease
app:processReleaseManifestessReleaseManifest
:app:processReleaseResources
D:\ReactNativeProject\android\app\build\intermediates\res\merged\release\drawable-mdpi-v4\image_background_unique_2.jpg: error: Duplicate file.
D:\ReactNativeProject\android\app\build\intermediates\res\merged\release\drawable-mdpi\image_background_unique_2.jpg: Original is here. The version qualifier may be implied.
:app:processReleaseResources FAILED
FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ':app:processReleaseResources'.
com.android.ide.common.process.ProcessException: Failed to execute aapt
And I am not able to generate the app-release.apk and not understanding why the image_background_unique_2.jpg file is getting added two times in different folders.
The issue is that the new version of react-native bundles the assets under /app/build/intermediates/res/merged/release instead of app/src/main/res
To resolve it, this is what I did
rm -rf android/app/src/main/res/drawable-*
Now bundle assets using this command:
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/build/intermediates/res/merged/release/
Note the updated --assets-dest in the above command. Assembling the APK worked ok after that!
react-native run-android --variant=release
I was trying to generate a signed APK following the steps from https://facebook.github.io/react-native/docs/signed-apk-android.html to generate a signed apk.
I had the same issue. Showed error: Duplicate file for some of my images when I ran ./gradlew assembleRelease. assembleRelease seems to cause some problems with drawable- folders. I deleted all the drawable- folders from /android/app/src/main/res/. Then I ran ./gradlew assembleRelease again. Finaly, it generated a signed APK at /android/app/build/outputs/apk/.
It seems that you bundled your app and installed it to your phone with assembleDebug. When you decided to go for assembleRelease then you should delete drawable- folders. They create problem somehow when you decide to produce an .apk file.
First delete all folders that are potentially causing this error by typing:
rm -rf ./android/app/build/intermediates/res/merged/release/drawable-*
Then change mdpi to mdpi-v4 in:
./node_modules/react-native/local-cli/bundle/assetPathUtils.js
function getAndroidAssetSuffix(scale) {
switch (scale) {
case 0.75: return 'ldpi';
case 1: return 'mdpi-v4';
case 1.5: return 'hdpi';
case 2: return 'xhdpi';
case 3: return 'xxhdpi';
case 4: return 'xxxhdpi';
}
}
Then bundle your offline includes:
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/build/intermediates/res/merged/release/
Finally build the release version of your app:
cd ./android && ./gradlew assembleRelease
Did you try a react native clean build ? Try resetting the cache and then bundle. Maybe it will resolve this issue.
I have managed to solve this problem by deleting the duplicates of the folder in react native /android/app/build/intermediates/res/merged/release/drawable-mdpi
this worked for me
Add the following code to file node_modules/react-native/react.gradle :
doLast {
def moveFunc = { resSuffix ->
File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
if (originalDir.exists()) {
File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
ant.move(file: originalDir, tofile: destDir)
}
}
moveFunc.curry("ldpi").call()
moveFunc.curry("mdpi").call()
moveFunc.curry("hdpi").call()
moveFunc.curry("xhdpi").call()
moveFunc.curry("xxhdpi").call()
moveFunc.curry("xxxhdpi").call()
}
inside def currentBundleTask = tasks.create(...
found this solution here https://github.com/facebook/react-native/issues/5787
you can do one things for debug to make react native bundle run below command
react-native bundle --assets-dest ./android/app/src/main/res/ --entry-file ./index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --dev true
For release:
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/build/intermediates/res/merged/release/

Categories

Resources