I made a simple Compose Web project using the getting started guide. It works when just using the Web API, so Composables like Div
and Span
.
However, the whole point of multiplatform is being able to reuse components, so I added common
and jvm
(Compose Desktop, not Android) modules. I can use the Composables from common
in jvm
just fine, but when I use them in the Web project, I get errors in my browser console: CompositionLocal X not present
, where X includes LocalDensity
, LocalLayoutDirection
, LocalViewConfiguration
, LocalFontFamilyResolver
and LocalInputManager
. I might be able to provide those one by one, but this is just setup that should be automatic. So, what can I do to use my common
Composables in js
with Compose Web?
The build.gradle.kts
file contains:
plugins {
kotlin("multiplatform")
id("org.jetbrains.compose")
}
kotlin {
jvm("desktop") { ... }
js(IR) {
browser()
binaries.executable()
}
sourceSets {
val commonMain by getting {
dependencies {
api(compose.runtime)
api(compose.foundation)
api(compose.material)
}
}
val desktopMain by getting { ... }
val jsMain by getting {
dependencies {
api(compose.web.core)
api(compose.runtime)
}
}
}
}
// plus the afterEvaluate workaround from the guide, which isn't relevant for this question
Currently using Kotlin 1.8.10 and Compose 1.3.1