Kotlin Multiplatform Compose + Desktop + Web + Mobile

Question

Is it possible at the moment to have a kotlin multiplatform project using compose for sharing the ui code for desktop, web, and mobile at the same time? All the examples i found only cover multiplatform with JS Front + Jvm Backend, or JVM Android + Desktop + Common Module, and I'm having trouble setting a project with all those at the same time.

I tried doing:

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose") version "1.0.1-rc2"
    id("com.android.library")
}
kotlin {
    android()
    jvm("desktop") {
       ...
    }
    js{
       ...
    }
    sourceSets {
        val commonMain by getting {
            dependencies {
               ...
            }
        }
        val commonTest by getting {
            dependencies {
               ...
            }
        }
        val androidMain by getting {
            dependencies {
                ...
            }
        }
        val androidTest by getting {
            dependencies {
                ...
            }
        }
        val desktopMain by getting {
            dependencies {
                ...
            }
        }
        val desktopTest by getting
        val jsMain by getting{
            dependencies{
                ...
            }
        }
        val jsTest by getting {
            dependencies {
                ...
            }
        }
    }
}

But it produces the error:

:common:jsMain: Could not resolve org.jetbrains.compose.runtime:runtime:1.0.1-rc2.
Required by:
    project :common

If i comment the JS related sections it works, or if i comment all the non-js related stuff it also works

Commenting everything compose-related also works

The problem is only when combining everything

Answer 1

The short answer is: No, this is not possible at this time.

The JB team is working on such support, which can be tested in these examples, but for now it is experimental and there is no guarantee that it will be released any time soon. Compose JB version is now synced with Android Compose, so I expect that 1.2.0 will be released around the same time by both of them, even if Web support is not yet complete.

---

I have not been able to reproduce your error, but I assume that you have not removed compose.foundation and compose.material from the common dependencies.

At the moment, only compose.runtime is available for the common module, and this makes it almost impossible to do any layout at this point: even Button and Text are not available.

As you can see in the JS application example, Text is not imported from androidx.compose.material.Text, but from org.jetbrains.compose.web.dom.Text, which is a completely different element, so it cannot be used in a common module.

At this point, I would say that Compose JS is another framework that allows you to write UI in Compose style.

Answer 2

Jetbrains updated the Github repo with some samples:

https://github.com/JetBrains/compose-multiplatform/tree/e22ed2384b3c36a56d1c1d0e9ea4b1873b7ca615/examples