Unable to build mobile application

I get a series of errors while trying to build the android application.

There are more errors below related to this.

/home/caleb/programming/github/joplin/ReactNativeClient/node_modules/@react-native-community/slider/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java:11: error: package android.support.v7.widget does not exist
import android.support.v7.widget.AppCompatSeekBar;

I think it’s related to https://developers.google.com/android/guides/releases but I can’t figure out what’s needed to build Joplin.

1 Like

I had it working once. I switched computers and thus I have to re-install the toolchain for Android again. Maybe I will run into the same issues…

This is due to the Android X transition. Some modules use the old lib and some the new one, while they should all use one lib or the other. I didn’t try yet but you might be able to fix it like this:

https://github.com/laurent22/joplin/pull/1665#issuecomment-503978810

In my case I’ve fixed it by running jetifier on node_modules so that they are all converted to the Android X lib: https://github.com/mikehardy/jetifier

Thanks @laurent jetifier solved it!

I was able to get it to compile but I get the following error in the emulator:

Please note that the Metro Bundler is running on port 8081.

I really could need some help with this.

As a reference, I was able to fix the above error by doing this:

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

And how did you start the server? I use npm start

I didn’t. It is automatically started when doing react-native run-android. A terminal window opens (the nasty macOS terminal, not iTerm2) and starts Metro Bundler on port 8081.

The only thing I have to start manually is the AVD (emulator).

I always run npm start in a separate terminal, maybe you can try that? I remember I had some problems initially and doing that helped, not sure if it’s the same though.

Yea, I also tried that, but that didn’t help either.

But the command in comment fixed it.

Ah my mistake, I misread that part.

@laurent building the app (or using the above command) created the following files:

android/app/src/main/assets/index.android.bundle
android/app/src/main/res/drawable-hdpi/node_modules_reactnavigation_src_views_assets_backicon.png
android/app/src/main/res/drawable-mdpi/lib_components_saveicon.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnativedatepicker_date_icon.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnativedropdownalert_assets_cancel.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnativedropdownalert_assets_error.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnativedropdownalert_assets_info.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnativedropdownalert_assets_success.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnativedropdownalert_assets_warn.png
android/app/src/main/res/drawable-mdpi/node_modules_reactnavigation_src_views_assets_backicon.png
android/app/src/main/res/drawable-xhdpi/node_modules_reactnativedropdownalert_assets_cancel.png
android/app/src/main/res/drawable-xhdpi/node_modules_reactnativedropdownalert_assets_error.png
android/app/src/main/res/drawable-xhdpi/node_modules_reactnativedropdownalert_assets_info.png
android/app/src/main/res/drawable-xhdpi/node_modules_reactnativedropdownalert_assets_success.png
android/app/src/main/res/drawable-xhdpi/node_modules_reactnativedropdownalert_assets_warn.png
android/app/src/main/res/drawable-xhdpi/node_modules_reactnavigation_src_views_assets_backicon.png
android/app/src/main/res/drawable-xxhdpi/node_modules_reactnativedropdownalert_assets_cancel.png
android/app/src/main/res/drawable-xxhdpi/node_modules_reactnativedropdownalert_assets_error.png
android/app/src/main/res/drawable-xxhdpi/node_modules_reactnativedropdownalert_assets_info.png
android/app/src/main/res/drawable-xxhdpi/node_modules_reactnativedropdownalert_assets_success.png
android/app/src/main/res/drawable-xxhdpi/node_modules_reactnativedropdownalert_assets_warn.png
android/app/src/main/res/drawable-xxhdpi/node_modules_reactnavigation_src_views_assets_backicon.png
android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigation_src_views_assets_backicon.png

What I am wondering is how could you build the app or create the debug apk without having these files in your tree. In that case, why are they not in the repo. Or should we add those to the .gitignore file?

You’ve most likely created them during your attempts to build the app, and you can delete them.

When I delete the files I get the same error as before.

So it seems they are created by the following 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/src/main/res

Without that command It is not possible to run the app in the emulator, because I get this error.

You might want to clear node_modules and all Android build files and start over. This long command I think is to build the production release, but you want the dev one so that you can change a file and reload right away instead of rebuilding everything.

The error you got could be due to a non-running server or maybe the app can’t find it. Try npm start -- --reset-cache to start the server.

Just deleted node_modules and all build files. The server is running - it is started automatically when running react-native run-android. But I also tried your command. Unfortunately I still run into the same error. But when I click on reload when the error appears, I see another error message:

It’s BS that it cannot connect. Why not? It is running. Going to http://127.0.0.1:8081/ gives me:

React Native packager is running.

Visit documentation

I am really puzzled by all this. On my previous machine it worked without issues. I have no idea why this is happening. It just makes no sense.

Maybe a firewall issue or something else already listening on port 8081? Also did you try all the steps they listed in particular the adb reverse command?

If something else was listening on port 8081, I wouldn’t get the React Native packager running on port 8081. No firewall turned on.

I will look at it tomorrow again.

I am at a loss. It makes no sense. All services are running on the correct ports, but it still does not work.