Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react.gradle file not bundling Js code #9612

Closed
waqas19921 opened this issue Aug 27, 2016 · 16 comments
Closed

react.gradle file not bundling Js code #9612

waqas19921 opened this issue Aug 27, 2016 · 16 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@waqas19921
Copy link

waqas19921 commented Aug 27, 2016

i uncommented app.gradle code to following

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 */
  project.ext.react = [
    // the name of the generated asset file containing your JS bundle
    bundleAssetName: "index.android.bundle",

    // the entry file for bundle generation
    entryFile: "index.android.js",

    // whether to bundle JS and assets in debug mode
    bundleInDebug: true,

    // whether to bundle JS and assets in release mode
    bundleInRelease: true,

    // whether to bundle JS and assets in another build variant (if configured).
    // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
    // The configuration property can be in the following formats
    //         'bundleIn${productFlavor}${buildType}'
    //         'bundleIn${buildType}'
    // bundleInFreeDebug: true,
    // bundleInPaidRelease: true,
    // bundleInBeta: true,

    // the root of your project, i.e. where "package.json" lives
    root: "../../",

    // where to put the JS bundle asset in debug mode
    jsBundleDirDebug: "$buildDir/intermediates/assets/debug",

    // where to put the JS bundle asset in release mode
    jsBundleDirRelease: "$buildDir/intermediates/assets/release",

    // where to put drawable resources / React Native assets, e.g. the ones you use via
    // require('./image.png')), in debug mode
    resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",

    // where to put drawable resources / React Native assets, e.g. the ones you use via
    // require('./image.png')), in release mode
    resourcesDirRelease: "$buildDir/intermediates/res/merged/release",

    // by default the gradle tasks are skipped if none of the JS files or assets change; this means
    // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
    // date; if you have any other folders that you want to ignore for performance reasons (gradle
    // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
    // for example, you might want to remove it from here.
    inputExcludes: ["android/**", "ios/**"],

    // override which node gets called and with what additional arguments
    nodeExecutableAndArgs: ["node"],

    // supply additional arguments to the packager
    extraPackagerArgs: []
  ]


apply from: "../../node_modules/react-native/react.gradle"

but no js is bundled in apk file upon building in both debug and release mode and no js files are placed in assets folder.

and following exception is thrown

08-27 03:52:08.736 9630-9630/com.simpfuel E/unknown:React: Exception in native call from JS
                                                           java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly
                                                               at com.facebook.react.cxxbridge.CatalystInstanceImpl.loadScriptFromAssets(Native Method)
                                                               at com.facebook.react.cxxbridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:37)
                                                               at com.facebook.react.cxxbridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:177)
                                                               at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:889)
                                                               at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:882)
                                                               at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:74)
                                                               at android.os.Handler.handleCallback(Handler.java:739)
                                                               at android.os.Handler.dispatchMessage(Handler.java:95)
                                                               at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
                                                               at android.os.Looper.loop(Looper.java:148)
                                                               at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
                                                               at java.lang.Thread.run(Thread.java:818)

device-2016-08-27-125224

i am using react-native version 0.32.0
on windows 10 and for android

@jiangqqlmj
Copy link

jiangqqlmj commented Sep 27, 2016

my question is the same with you~
But I performed manually for the following 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/

But I can't go to manually each time when run the project execution
you can see the following article:
http://www.lcode.org/?p=307

@corbt
Copy link
Contributor

corbt commented Oct 6, 2016

I'm hitting this in React Native 0.34 on Android as well, but only from within Android Studio. If I run ./gradlew assembleRelease manually, the bundle is generated correctly and the installed app works.

On the other hand, building/installing from within Android Studio skips the :app:bundleLocalReleaseJsAndAssets step entirely, and the bundle is not generated. Still trying to figure out what causes the difference.

@andpor
Copy link

andpor commented Oct 11, 2016

I have the same issue. NO matter what I do, I cannot find the generated bundle file in either debug or release apk despite having uncommented project.ext.react in the app module.

@corbt
Copy link
Contributor

corbt commented Oct 11, 2016

I was able to get this working in Android Studio by going to Preferences > Build, Execution, Deployment > Build Tools > Compiler and unchecking "Configure on demand".

It was always working for me when running ./gradlew assembleRelease from the command line, which is why I suspected an Android Studio config issue. Anyway, those are two things to try.

@andpor
Copy link

andpor commented Oct 12, 2016

Weird. I am running on Mac OS X El Captain.

  1. When Studio was installed, gradlew was installed under Library/Android/sdk/tools/templates/gradle/wrapper/gradlew which was never added to PATH - had to add in manually to bash_profile
  2. Even after adding this to path I cannot run ./gradlew assembleRelease - gives the following error which is not surprising since gradlew is NOT in the current directory
    -bash: ./gradlew: No such file or directory
  3. Running gradlew assembleRelease - caused gradle 1.14 to be installed on the mac somewhere which is obviously not what I want. Why is this happening ?

To me this whole thing is a royal nightmare. And total lack of documentation on this topic is completely ridiculous.

To make things more interesting, I do not have gradlew in the android project directory at all. No wonder running ./gradlew does not work. However, having added the gradle binary to PATH

MacBook-Pro:android$ which gradle
/Applications/Android Studio.app/Contents/gradle/gradle-2.14.1/bin/gradle

and running

gradle assembleRelease

works fine.

This is completely undocumented. Is it really so hard to compile proper instructions for Mac starting with node installation (which Studio does not seem to pick up at all)?

I am still unable to do this from the IDE although the proper task is getting picked up thanks to @corbt . Task is failing because it is not finding the right node installation...I can't figure out how to resolve this...

Update: The reason why node execution is failing is because the path of all visual apps on Mac OS is fixed. The apps do not execute any of the user shell profiles when they are started so if there is some nvm or node setup being done in files such as .bash_profile, they will not get picked app by Studio which will barf at executive react-native shell commands which are node based...

@jamesporter
Copy link

I had similar issues (and again running the gradlew assembleRelease thing seems to work fine but then ended up signing and zip align-ing manually which was extremely tedious).

@waqas19921 One thing worth trying is running the bundleReleaseJsAndAssets task in Android Studio (via Gradle view); then go to Generate Signed APK. This seemed to work reliably.

I highly recommend setting up new RN projects following closely the guide around certificates etc... unfortunately I set this one up 6 months ago and it appears that unwinding the more 'standard' Android approach (using AS + keyfile) will now be a lot of hassle.

@helengray
Copy link

I met the issues on win10 too.

I had findout the reason and solve the problem by setup the gradle.properties
org.gradle.configureondemand=false

Open the Android project and edit the gradle.properties,append the above sentence.

If it still doesn't work,you can add the config for the global

qq 20170110145256
qq 20170110145314

@guilharj
Copy link

@corbt your suggestion worked for me too. Thanks for the help.

@norman-kapschefsky
Copy link

Hi, I would like to summarize the solution to bundle everything within a debug build. Especially the hint in point two did the trick for me. Found that in an underrated comment on stackoverflow.

1. Android Studio

  • go to Preferences -> Build, Execution, Deployment -> Compiler
  • uncheck "Configure on Demand"

2. build.gradle

  • within your app/build.gradle file do the following:
project.ext.react = [
    // whether to bundle JS and assets in debug mode
    bundleInDebug: true,

    // whether to bundle JS and assets in release mode
    bundleInRelease: true,
]

apply from: "../../node_modules/react-native/react.gradle"
  • NOTE that it is important to define the react settings above the apply from ... statement, otherwise it will not work

3. Create APK

  • create your dev apk as usual with ./gradlew assembleDebug within your android folder

@Oblongmana
Copy link

Oblongmana commented Apr 28, 2017

So I think I figured it all out, I definitely now have builds reliably running properly when hitting the "Run" button.

There are two issues (on OSX):

  1. Android Studio skipping the bundle[buildType]JsAndAssets step for release-type builds
  2. Android Studio not finding node

To Solve:

1) Bundling being skipped

Uncheck "Configure on demand" as discussed above

Android Studio > 
Preferences > 
Build, Execution, Deployment > 
Compiler > 
[Untick] Configure on demand

2) Android Studio not finding node

Even after fixing bundling being skipped, the build still fails with A problem occurred starting process 'command 'node''. As noted by @andpor:

The apps [on OSX] do not execute any of the user shell profiles when they are started so if there is some nvm or node setup being done in files such as .bash_profile, they will not get picked app by Studio which will barf at executive react-native shell commands which are node based.

There are workarounds for trying to get OSX apps to use your PATH, but basically - they're all terrible, relatively difficult, require restarts, and generally break between OSX versions, and for other reasons.

So the solution - when gradle runs, it checks gradle.properties as follows (documented at https://docs.gradle.org/current/userguide/build_environment.html):

  • from gradle.properties in project build dir.
  • from gradle.properties in gradle user home.

What we want to do is tell gradle directly what the node path is. We don't want to do this in the project's gradle.properties - you'll commit that to version control, and the node path may vary between developers.

Instead, you set it in the gradle user home. Users can override this, but generally it's USER_HOME/.gradle, so on OSX, generally ~/.gradle. So (and this is the bit you want to add to your project README so your developers know how to configure it), we can configure our node path for gradle like this:

$ mkdir -p ~/.gradle    # make the gradle home dir, if it doesn't exist already
$ touch ~/.gradle/gradle.properties     # create a gradle.properties, if it doesn't exist already

Now open ~/.gradle/gradle.properties in your preferred editor, and add the line:
NODE_PATH=/usr/local/bin/node
Or wherever your node install is located of course - check this with $ which node

Open android/app/build.gradle
There should be a line that says
apply from: "../../node_modules/react-native/react.gradle"
Just before that line, add the following (or add to your existing project.ext.react if you have one):

project.ext.react = [
    nodeExecutableAndArgs: hasProperty('NODE_PATH')?[NODE_PATH]:null
]

The nodeExecutableAndArgs is something you can configure for the react gradle file, which makes it use the path and args you supply, instead of looking in the environment (as discussed above, the environment won't work). This line checks whether the NODE_PATH has been configured, and uses it if supplied, and if not, sets the property to null (which causes the react gradle file to fall back to using the environment)

@aquaflamingo
Copy link

@Oblongmana @norman-kapschefsky I love you both.

@hramos
Copy link
Contributor

hramos commented Jul 31, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Jul 31, 2017
@hramos hramos closed this as completed Jul 31, 2017
@diegoperini
Copy link

diegoperini commented Aug 7, 2017

It continues and broke builds on Android Studio 3.0 Preview Canary 9 with gradle plugin 3.0.0 alpha9.

@gtzh110
Copy link

gtzh110 commented Oct 11, 2017

I also meet this problem: A problem occurred starting process 'command 'node''.
on Android Studio 3.0 Preview with gradle plugin 3.0.0 beta7 and gradle-4.1-all.

@TGPSKI
Copy link

TGPSKI commented Oct 19, 2017

Hi, I ran into this problem getting our Android app published, and ended up writing a medium article that addresses this and related issues.

https://medium.com/@paterw00t_17915/android-react-native-fastlane-working-with-multiple-build-types-a9a6641c5704

@diegoperini
Copy link

We ended up using a custom bash script that should be run only the first time someone clones our app repository. It creates a node wrapper specific to our developer's workstation to be used by React Native as well as CodePush build scripts by simply residing in the app's root folder. Below is the script. Copy it in a file named prebuild.bash, placed at the root of your app. Run it like

bash prebuild.bash

from the terminal only once.

Script:

#!/bin/bash
rm $PWD/node > /dev/null
install -b -m 755 /dev/null $PWD/node
echo \#!/bin/bash >> $PWD/node
which node >> $PWD/node
printf %s "$(< node)" > node
echo -n $' \"$@\"' >> $PWD/node

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests