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

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 getPackages() {
            return Arrays.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

user_1349269 · Answer

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

user_6749177 · Answer

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

user_2519791 · Answer

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

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

3 Answers