React Native Map Box Execution Failed transform classes with Dex / JarMerging - mapbox

Question

I've just started using MapBox in react-native but I appear to be getting the following error
* What went wrong:
Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
Enabling multidex with
multiDexEnabled true
I then get the following
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:transformClassesWithJarMergingForDebug'.
> com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: okhttp3/internal/ws/RealWebSocket$1.class
Here's the config
build.gradle .../android
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
// Add jitpack repository (added by tipsi-stripe)
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
build.gradle ../app
dependencies {
compile project(':mapbox-react-native-mapbox-gl')
compile project(':react-native-branch')
compile project(':react-native-camera')
compile project(':tipsi-stripe')
compile project(':react-native-device-info')
compile project(':react-native-vector-icons')
compile project(':react-native-i18n')
compile project(':react-native-geocoder')
compile project(':react-native-fbsdk')
compile(project(':react-native-maps')) {
exclude group: 'com.google.android.gms', module: 'play-services-base'
exclude group: 'com.google.android.gms', module: 'play-services-maps'
}
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:25.0.0"
compile "com.facebook.react:react-native:+" // From node_modules
compile 'com.google.android.gms:play-services-base:11.+'
compile 'com.google.android.gms:play-services-maps:11.+'
}
settings.gradle
include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/#mapbox/react-native-mapbox-gl/android/rctmgl')
include ':react-native-branch'
project(':react-native-branch').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-branch/android')
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
include ':tipsi-stripe'
project(':tipsi-stripe').projectDir = new File(rootProject.projectDir, '../node_modules/tipsi-stripe/android')
include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-i18n'
project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-i18n/android')
include ':react-native-geocoder'
project(':react-native-geocoder').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-geocoder/android')
include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':app'
MainApplication.java
import android.app.Application;
import android.content.Intent;
import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.react.ReactApplication;
import com.mapbox.rctmgl.RCTMGLPackage;
import io.branch.rnbranch.RNBranchPackage;
import io.branch.referral.Branch;
import com.lwansbrough.RCTCamera.RCTCameraPackage;
import com.gettipsi.stripe.StripeReactPackage;
import com.learnium.RNDeviceInfo.RNDeviceInfo;
import com.oblador.vectoricons.VectorIconsPackage;
import com.i18n.reactnativei18n.ReactNativeI18n;
import com.devfd.RNGeocoder.RNGeocoderPackage;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.airbnb.android.react.maps.MapsPackage;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
protected static CallbackManager getCallbackManager() {
return mCallbackManager;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
#Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTMGLPackage(),
new RNBranchPackage(),
new RCTCameraPackage(),
new StripeReactPackage(),
new RNDeviceInfo(),
new MapsPackage(),
new VectorIconsPackage(),
new ReactNativeI18n(),
new RNGeocoderPackage(),
new FBSDKPackage(mCallbackManager)
);
}
};
#Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
#Override
public void onCreate() {
super.onCreate();
FacebookSdk.sdkInitialize(getApplicationContext());
SoLoader.init(this, /* native exopackage */ false);
// initialize the Branch object
Branch.setPlayStoreReferrerCheckTimeout(0);
Branch.getAutoInstance(this);
}
}
Stacktrace
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:transformDexArchiveWithDexMergerForDebug'.
> com.android.build.api.transform.TransformException: com.android.dex.DexException: Multiple dex files define Lokhttp3/internal/ws/WebSocketReader;
* Try:
Run with --info or --debug option to get more log output.
* Exception is:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:transformDexArchiveWithDexMergerForDebug'.
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:100)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:70)
at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:63)
at org.gradle.api.internal.tasks.execution.ResolveTaskOutputCachingStateExecuter.execute(ResolveTaskOutputCachingStateExecuter.java:54)
at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:58)
at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:88)
at org.gradle.api.internal.tasks.execution.ResolveTaskArtifactStateTaskExecuter.execute(ResolveTaskArtifactStateTaskExecuter.java:52)
at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:52)
at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:54)
at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43)
at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute(CatchExceptionTaskExecuter.java:34)
at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker$1.run(DefaultTaskGraphExecuter.java:248)
at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:336)
at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:328)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:197)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:107)
at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:241)
at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWorker.execute(DefaultTaskGraphExecuter.java:230)
at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.processTask(DefaultTaskPlanExecutor.java:124)
at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.access$200(DefaultTaskPlanExecutor.java:80)
at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:105)
at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:99)
at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.execute(DefaultTaskExecutionPlan.java:625)
at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.executeWithTask(DefaultTaskExecutionPlan.java:580)
at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.run(DefaultTaskPlanExecutor.java:99)
at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExecute(ExecutorPolicy.java:63)
at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImpl.java:46)
at org.gradle.internal.concurrent.ThreadFactoryImpl$ManagedThreadRunnable.run(ThreadFactoryImpl.java:55)
Caused by: java.lang.RuntimeException: com.android.build.api.transform.TransformException: com.android.dex.DexException: Multiple dex files define Lokhttp3/internal/ws/WebSocketReader;
at com.android.builder.profile.Recorder$Block.handleException(Recorder.java:55)
at com.android.builder.profile.ThreadRecorder.record(ThreadRecorder.java:104)
at com.android.build.gradle.internal.pipeline.TransformTask.transform(TransformTask.java:213)
at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73)
at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$IncrementalTaskAction.doExecute(DefaultTaskClassInfoStore.java:173)
at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.execute(DefaultTaskClassInfoStore.java:134)
at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$StandardTaskAction.execute(DefaultTaskClassInfoStore.java:121)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$1.run(ExecuteActionsTaskExecuter.java:122)
at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:336)
at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:328)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:197)
at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:107)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:111)
at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:92)
... 27 more
Caused by: com.android.build.api.transform.TransformException: com.android.dex.DexException: Multiple dex files define Lokhttp3/internal/ws/WebSocketReader;
at com.android.build.gradle.internal.transforms.DexMergerTransform.transform(DexMergerTransform.java:230)
at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTask.java:222)
at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTask.java:218)
at com.android.builder.profile.ThreadRecorder.record(ThreadRecorder.java:102)
... 39 more
Caused by: com.android.dex.DexException: Multiple dex files define Lokhttp3/internal/ws/WebSocketReader;
at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:661)
at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:616)
at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:598)
at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
at com.android.dx.merge.DexMerger.merge(DexMerger.java:198)
at com.android.builder.dexing.DexArchiveMergerCallable.call(DexArchiveMergerCallable.java:61)
at com.android.builder.dexing.DexArchiveMergerCallable.call(DexArchiveMergerCallable.java:36)
* Get more help at https://help.gradle.org
BUILD FAILED in 8s
148 actionable tasks: 4 executed, 144 up-to-date
I'm not sure if this is a matter of my current project config or what not, but i've not seen reports of this so far.
Update with adding in workaround enables app to launch but then another issue arises: NoClassDefFoundError: com.google.android.gms.wallet.MaskedWalletRequest
I've now added in configurations.all { resolutionStrategy.force 'com.squareup.okhttp3:okhttp:3.4.1' } as suggested by https://github.com/facebook/react-native/issues/12646 which enables the app to build succesfully but then there is an issue of NoClassDefFoundError: com.google.android.gms.wallet.MaskedWalletRequest
Just to clarify moving over to mapbox, I'll no longer need react-native-maps, and the reason for the move over is the greater level of detail i.e. in the buildings.
Thanks, appreciate you're help

Answer 1

Looks like a similar issue was raised against the repo and can probably be resolved if you...
exclude android.arch.core module from the mapbox project

Answer 2

compile 'com.google.android.gms:play-services-base:11.+'
compile 'com.google.android.gms:play-services-maps:11.+`
Version for com.google.android.gms:play-services should be same in build.gradle for app. and and in build.gradle of your packages installed.
-Here 11.+ version refers to any version greater then 11 which currently
available.i would suggest to make this version static and copy that version in build.gradle of your package in node-modules which gives error.
it is necessary to have same com.google.android.gms:play-services version throughout the app

Answer 3

Thankfully I was finally able to get mapbox in on my android version in react-native after resolving issues that popped up along the way: First of all my first attempt was on an older version of react-native 0.44.0, I later upgraded to the latest version of react native
"react-native": "^0.50.3",
and using react
"react": "^16.1.1",
Error
* What went wrong:
Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
This was the first, the app exceeds the maximum number of methods so we go ahead and enable multiDex in app/gradle
android {
compileSdkVersion 25
defaultConfig {
...
multiDexEnabled true
The next issue was
* What went wrong:
Execution failed for task ':app:transformClassesWithJarMergingForDebug'.
> com.android.build.api.transform.TransformException: java.util.zip.ZipException: duplicate entry: okhttp3/internal/ws/RealWebSocket$1.class
One approach to resolving this was found to use on the older version of react-native but this was not required it seems on the most recent version following the upgrade with react-native-git-upgrade
configurations.all { resolutionStrategy.force 'com.squareup.okhttp3:okhttp:3.4.1' }
Another issue that popped up was
Failed to resolve: android.arch.lifecycle:extension:1.0.0-alpha3
which was resolved by adding maven { url 'https://maven.google.com' } to
allprojects {
repositories {
jcenter()
mavenCentral()
maven { url 'https://maven.google.com' }
}
}
Then there was an Aapt exception error which was resolved by adding to gradle.properties
android.enableAapt2=false
The app would now build succesfully but on starting irrespective of whether upraded to the latest version or not would show the error
C++ Exception in 'NativeModules': java.lang.NoClassDefFoundError: com.google.android.gms.wallet.MaskedWalletRequest
which was resolved by adding
implementation 'com.google.android.gms:play-services-wallet:11.+'
to our gradle dependencies.
And then the app built and started succesfully with no errors.
I think upgrading to the latest version of react-native, react, helped a great deal with compatability, speed, and performance, as well as by using the latest version of gradle and for example when doing so
configurations.all { resolutionStrategy.force 'com.squareup.okhttp3:okhttp:3.4.1' }
was needed to be added assuming that conflict must have been resolved in a later version.
Anyway, hope this helps someone, and pleased to say I've finally got mapbox in the app.
Thanks to #nitaliano for helping out over at https://github.com/mapbox/react-native-mapbox-gl/issues/785, and providing guidance, a long with the references and help found on https://github.com/tipsi/tipsi-stripe/issues/18 https://github.com/facebook/react-native/issues/12646 https://github.com/mapbox/react-native-mapbox-gl/issues/767 and also the help from Chris Geirman and Rajat Gupta here.
The following references were also helpful
https://facebook.github.io/react-native/docs/upgrading.html
https://reactjs.org/blog/2017/04/07/react-v15.5.0.html
https://reactjs.org/blog/2017/09/26/react-v16.0.html
https://github.com/mlaursen/react-md/issues/325
https://www.npmjs.com/package/prop-types
https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/App.js
https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/components/ShowMap.js
Mapbox: Cant add LocationLayer plugin in gradle
https://github.com/tipsi/tipsi-stripe/issues/18
https://developer.android.com/studio/build/gradle-plugin-3-0-0-migration.html
Thanks again 👍