Zappar Embed with Ionic

General Discussion
#1

Has anyone successfully built their Ionic application with Zappar?

After getting the API key and Plugin, I followed README which basically shows how you can import Zappar into your Cordova project. However, after importing the plugin into my Ionic project, it doesn’t allow me to build. Apparently, there’s a duplicate in one of the modules Ionic? and Zappar uses.

Here’s my Ionic Info:

Ionic:

   ionic (Ionic CLI)  : 4.3.1 (/Users/michael/.nvm/versions/node/v8.4.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 6.4.0
   Cordova Plugins       : cordova-plugin-ionic-webview 1.2.1, (and 20 other plugins)

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   NodeJS            : v8.4.0 (/Users/michael/.nvm/versions/node/v8.4.0/bin/node)
   npm               : 5.3.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.2 Build version 9C40b

And here’s the error log:

Dex: Error converting bytecode to dex:
Cause: com.android.dex.DexException: Multiple dex files define Lokhttp3/ResponseBody$BomAwareReader;
    UNEXPECTED TOP-LEVEL EXCEPTION:
    com.android.dex.DexException: Multiple dex files define Lokhttp3/ResponseBody$BomAwareReader;

com.android.dex.DexException: Multiple dex files define Lokhttp3/ResponseBody$BomAwareReader;
	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)
	at java.util.concurrent.ForkJoinTask$AdaptedCallable.exec(ForkJoinTask.java:1424)
	at java.util.concurrent.ForkJoinTask.doExec(ForkJoinTask.java:289)
	at java.util.concurrent.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1056)
	at java.util.concurrent.ForkJoinPool.runWorker(ForkJoinPool.java:1692)
	at java.util.concurrent.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:157)
#2

Hi Michael, this is David I work with the various mobile embed components here at Zappar.

We should be able to resolve this, if you could drop me an email with the details of the other frameworks or components that you’re using so we can try to reproduce the issue. It’s likely that one of the others is using okhttp framework, as does the Zappar component, and we can then supply an updated component which will be compatible with your setup.

If you can send this to support@zappar.com I’ll get onto it as soon as I can!

thanks

David

#3

Hi David!

Any specific details that you like me to send via e-mail?

I’m currently using Zappar Cordova plugin. Tried to import to my Ionic project by following the README. It seems that Cordova contains com.squareup.okhttp3 plugin even though there’s no explicit declaration of the plugin in my project so I couldn’t adjust the current project setup to comply with the Zappar component.

#4

Hi Michael - are there any other frameworks in your project? We use okhttp internally in the Zappar plugin, and if it’s linked by anything else in your build it will have that multiple dex problem as the okhttp library can’t be in two places at once.

#5

Hi David!

I sent the build configuration via e-mail :smiley:
Although some values are replaced by a placeholder text

Thank you!

#6

hi michael_ardan2000,

Did you get the solution?
I have the same problem.

#7

Hi @grupolocoff,

Thanks for getting in touch.

Could you send your build configuration, along with any error messages you’re getting on your end, over to support@zappar.com for us to take a closer look at please?

Thanks,
Seb