(Not sure if this is the right channel) I got a mi...

# compose-web

[Antonius Naumann]

(Not sure if this is the right channel) I got a minor problem with IntelliJ Code Highlighting for a project which targets both Compose Android, Desktop and Web. (Problem description and Gradle snippet below)

[Antonius Naumann]

I am trying to write a UI component, which is usable from Compose Desktop and Android as well as from Compose Web by using the actual/expect pattern in common code. I then provide two implementations, one for Android & JVM/Desktop, the other for Web.

To achieve this, I added a jsMain and a nonJsMain source set (which desktopMain and androidMain depend on) to the Compose Multiplatform template provided by IntelliJ. However, IntelliJ marks usages of @Composable, etc. as an error in the nonJsMain source set. The demo application which uses the code builds and runs fine. Is this an error with IntelliJ or am I missing something?

[Antonius Naumann]

build.gradle.kts looks like this:

import org.jetbrains.compose.compose

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

group = ...
version = ...

kotlin {
    android()
    jvm("desktop") {
        compilations.all {
            kotlinOptions.jvmTarget = "11"
        }
    }
    js(IR) {
        browser {
            testTask {
                testLogging.showStandardStreams = true
                useKarma {
                    useChromeHeadless()
                    useFirefox()
                }
            }
        }
        binaries.executable()
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                api(compose.runtime)
            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }

        val nonJsMain by creating {
            dependsOn(commonMain)
            dependencies {
                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                api(compose.material3)
                api(compose.foundation)
            }
        }

        val androidMain by getting {
            dependsOn(nonJsMain)
            dependencies {
                api("androidx.appcompat:appcompat:1.4.1")
                api("androidx.core:core-ktx:1.7.0")
            }
        }
        val androidTest by getting {
            dependencies {
                implementation("junit:junit:4.13.2")
            }
        }
        val desktopMain by getting {
            dependsOn(nonJsMain)
            dependencies {
                api(compose.preview)
            }
        }
        val desktopTest by getting

        val jsMain by getting {
            dependencies {
                api(compose.web.core)
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }
    }
}

android { ... }

[Oleksandr Karpovich [JB]]

Perhaps, as a workaround for an IDEA issue (please see the screenshot).

It looks like something gets mixed up and IDEA can't figure out the dependencies, since if we remove dependsOn(nonJsMain) from androidMain then the error in IDEA goes away.

Could you please also describe this issue here - https://github.com/JetBrains/compose-jb/issues?

[Antonius Naumann]

Thank you for your answer. I will open an issue during the next days!