How to use Composables from common in Compose Web?

250 Views Asked by At

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

0

There are 0 best solutions below