How to disable WASM ⚠️ in a Kotlin Multiplatform project using Fleet?

Let me guess, you finally had setup a Kotlin Multiplatform project targeting Android, iOS and Web (Web Assembly or Wasm) in JetBrains’ brand new IDE Fleet. And when trying to add a library, you see there is an error related to Wasm and you would like to disable it to see if that solves the issue? Or maybe you just want to focus on mobile and disregard the web version? You can actually disable WASM without much effort. I’ll show you how 👇.

Fleet is the new Jetbrains’ IDE that is mainly recommended for multiplatform projects. To create a new project we can use the online wizard where we can select to target Android, iOS and Web. This wizard uses Kotlin/Wasm which is in Alpha by this time.

Once we have downloaded our project and have set it up in Fleet testing that we can deploy the app for all the targets, we can simulate a situation in which we need to remove the web target for any reason.

For this article I’ll integrate the navigation library called Voyager which as of version 1.0.0 doesn’t support WASM.

We add to the gradle/libs.version.toml file our new library and version.

[versions]
navigation-voyager = "1.0.0"

[libraries]
navigation-voyager-default = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "navigation-voyager" }

Once synchronized, we add Voyager as a dependency in our build.gradle.kts file.

commonMain.dependencies {
  implementation(libs.navigation.voyager.default)
}

When we synchronize the gradle build, then everything explodes 💣.

Capture of the build output with the failed task.

We can see that the gradle task :composeApp:wasmJsCompileClasspath is failing because the project expects a wasm compatible library.

As this article’s title states, our solution is to disable wasm for the project. So we have to make a few changes to some files.

First we go to our gradle.properties file where we have to disable the wasm related property:

org.jetbrains.compose.experimental.wasm.enabled=false

You’ll be tempted to synchronize gradle, but you’ll have to make one more change before things work correctly.

You have to go back to build.gradle.kts and remove wasm related tasks. Within kotlin we find that wasmJvm is defined as a target between lines 12 until 21 of the captured image. We must delete all of that code, therefore removing the web target from the multiplatform project.

Capture of the gradle script before wasm removal.

After deletion our build.gradle.kts file should look like this.

Capture of the gradle script after wasm removal.

Now it’s time to launch a gradle build. Everything should go fine indicating that we have successfully disabled wasm and now our project builds, allowing us to use the added navigation library.

We can execute the project for both Android and iOS without any issues.

Going one step further is if you decide to eliminate definitively all wasm related code. For this, you’ll need to delete the wasmJsMain source directory of the composeApp module.

Module structure after wasmJsMain deletion.

After this action launch again the app for Android or iOS and you’ll see it all works correctly. Be warned that this is a sample app, and when doing this deletion in a more mature project you’re risking to lose all your code within that directory.

That’s a wrap. Hope this article helps you deal with disabling WASM in your multiplatform project whenever you need.

Thanks for reading!