Hello while working on multiplatform project, I am...

# compose-web

[Rohan Maity]

Hello while working on multiplatform project, I am sharing mu compose UI between android and Web
I have created a  composable  shared multiplatform module, inside that I have put some compose libraries as commonMain
Android app runs fine, but when I try to run ./gradlew jsBrowserRun  it fails to resolve all the compose dependencies

[Rohan Maity]

Here is the stacktrace

* What went wrong:
Could not determine the dependencies of task ':composables:webPackageJson'.
> Could not resolve all dependencies for configuration ':composables:webNpm'.
   > Could not resolve org.jetbrains.compose.foundation:foundation:1.0.1.
     Required by:
         project :composables
      > No matching variant of org.jetbrains.compose.foundation:foundation:1.0.1 was found. The consumer was configured to find a usage of 'kotlin-runtime' of a library, preferably optimized for non-jvm, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js', attribute 'org.jetbrains.kotlin.js.compiler' with value 'ir' but:
          - Variant 'debugApiElements-published' capability org.jetbrains.compose.foundation:foundation:1.0.1 declares a library:
              - Incompatible because this component declares an API of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a usage of 'kotlin-runtime' of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js'
              - Other compatible attributes:
                  - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
                  - Doesn't say anything about org.jetbrains.kotlin.js.compiler (required 'ir')
          - Variant 'debugRuntimeElements-published' capability org.jetbrains.compose.foundation:foundation:1.0.1 declares a runtime of a library:
              - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js'
              - Other compatible attributes:
                  - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
                  - Doesn't say anything about org.jetbrains.kotlin.js.compiler (required 'ir')
          - Variant 'desktopApiElements-published' capability org.jetbrains.compose.foundation:foundation:1.0.1 declares a library:
              - Incompatible because this component declares an API of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' and the consumer needed a usage of 'kotlin-runtime' of a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js'
              - Other compatible attributes:
                  - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
                  - Doesn't say anything about org.jetbrains.kotlin.js.compiler (required 'ir')

[Big Chungus]

Only compose.web.core and compose.runtime dependencies are available on js target

[Rohan Maity]

but web.core and runtime are also getting failed for me
Let me try again with that

[Rohan Maity]

Hello @Big Chungus Thanks for this, After removing compose ui and other modules from commonMain
But I had to remove compose.runtime from commonMain as well

[Rohan Maity]

Infact I had to remove compose.web.core from webMain sourceSet from the shared composable module

[Rohan Maity]

Also even after I add

compose.runtime
compose.web.core

in my webApp dependencies
I am still not able to see/use any composable function classes

[Big Chungus]

compose.runtime should work in commonMain, provided you use jb compose plugin as opposed to jetpack. Same for web.core on jsMain

[Big Chungus]

You can inspect supported platforms of compose dependencies on kamp.petuska.dev (search for org.jetbrains.compose)

[Rohan Maity]

I am using the plugin with this id `

id("org.jetbrains.compose") version Version.MPP_COMPOSE

`

[Big Chungus]

Note that on JS compose only works with IR backend. You can enable it when declaring target

js("web", IR) {}

[Rohan Maity]

Yes, I did the IR compiler only

[Rohan Maity]

Still no composable function available
And compose.runtime and compose.web.core does not work when I put them inside the shared module :\

[Big Chungus]

Let me inspect that module's buildfile

[Big Chungus]

Here's an example of working mpp setup
https://github.com/mpetuska/kamp/blob/feature/compose/app/client/build.gradle.kts

[Rohan Maity]

here is my build file

import org.jetbrains.compose.compose

plugins {
    kotlin("multiplatform")
    id("com.android.library")
    id("org.jetbrains.compose") version Version.MPP_COMPOSE
}



kotlin {
    android ()

    js("web") {
        browser()
        binaries.executable()
    }


    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(project(":shared"))
                api(compose.runtime)
            }
        }
        val androidMain by getting {
            dependencies {
                implementation(compose.foundation)
                implementation(compose.ui)
                implementation(compose("org.jetbrains.compose.ui:ui-tooling"))
                implementation(compose.material)
                implementation(compose.materialIconsExtended)
                api("androidx.activity:activity-compose:1.4.0")
            }
        }

        val webMain by getting {
            dependencies {
                api(compose.web.core)
            }
        }
    }
}

android {
    compileSdk = Version.COMPILE_SDK
    buildToolsVersion = Version.ANDROID_BUILD_TOOLS
    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
    defaultConfig {
        minSdk = Version.MIN_SDK
        targetSdk = Version.TARGET_SDK
    }
    buildTypes {
        getByName("release") {
            isMinifyEnabled = true
        }
    }
}

[Rohan Maity]

this fails with message that compose.runtime and compose.web.core for JS not available

[Big Chungus]

How are you enabling ir backend. Both issues look to be related to IR backend not being enabled

[Rohan Maity]

Oh, I think I reverted that IR backend thing somehow

[Rohan Maity]

Now its working

[Rohan Maity]

Thanks @Big Chungus
IR thing I thought I enabled, but somehow I missed. I think I will remember this for sure

[Big Chungus]

Sweet!