https://kotlinlang.org logo
Join Slack
Powered by
I am trying to build the app for JS/Canvas. It com...
# compose-web
d
I am trying to build the app for JS/Canvas. It compiles correctly, but after running 
jsBrowserRun
, the browser shows a blank page and the console shows this error:
Copy code
Uncaught Error: Error loading module 'cms'. Its dependency 'androidx-runtime' was not found. Please, check whether 'androidx-runtime' is loaded prior to 'cms'.
    at cms.js:8:13
    at cms.js:21:2
Using Kotlin 1.8.20 and Compose Multiplatform 1.4.1 Any idea?
This is my shared gradle file:
Copy code
plugins {
    kotlin("multiplatform")
    kotlin("plugin.serialization")
    id("com.android.library")
    id("org.jetbrains.compose")
}

dependencies {
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.3")
}


kotlin {
    android ()
    jvm("desktop") {
        compilations.all {
            kotlinOptions.jvmTarget = "18"
        }
    }

    js(IR) {
        browser()
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                api(compose.foundation)
                api(compose.ui)
                api(compose.material)
                api(compose.runtime)
                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                api(compose.components.resources)
                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.0")
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.2")
                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
                implementation("io.ktor:ktor-client-core:"+extra["ktor.version"])
                implementation("io.ktor:ktor-client-logging:"+extra["ktor.version"])
                implementation("io.ktor:ktor-client-content-negotiation:"+extra["ktor.version"])
                implementation("io.ktor:ktor-client-auth:"+extra["ktor.version"])
                implementation("io.ktor:ktor-serialization-kotlinx-json:"+extra["ktor.version"])
                implementation("com.russhwolf:multiplatform-settings-no-arg:"+extra["multiplatformSettings.version"])
            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
                implementation("com.russhwolf:multiplatform-settings-test:"+extra["multiplatformSettings.version"])
            }
        }
        val androidMain by getting {
            dependencies {
                implementation("io.ktor:ktor-client-okhttp:"+extra["ktor.version"])
            }
        }
        val androidUnitTest by getting {
            dependencies {
                implementation(kotlin("test-junit"))
                implementation("junit:junit:4.13.2")
            }
        }
        val desktopMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.7.2")
                implementation("io.ktor:ktor-client-apache:"+extra["ktor.version"])
                implementation("ch.qos.logback:logback-classic:1.4.7")
            }
        }
        val desktopTest by getting
        val jsMain by getting {
            dependencies {
                implementation(compose.html.core)
                implementation("io.ktor:ktor-client-js:"+extra["ktor.version"])
            }
        }
        val jsTest by getting
    }
}

android {
    namespace = "eu.baroncelli.dkmpsample.shared"
    compileSdk = extra["android.compileSdk"].toString().toInt()
    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_18
        targetCompatibility = JavaVersion.VERSION_18
        isCoreLibraryDesugaringEnabled = true
    }
    defaultConfig {
        minSdk = extra["android.minSdk"].toString().toInt()
    }
    buildTypes {
        getByName("release") {
            isMinifyEnabled = true
        }
    }
}
This is my jsApp gradle file:
Copy code
plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

kotlin {
    js(IR) {
        moduleName = "cms"
        browser()
        binaries.executable()
    }

    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(project(":shared"))
            }
        }
    }
}

compose.experimental {
    web.application {}
}

repositories {
    mavenCentral()
}
This is my index.html file:
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="skiko.js"></script>
    <title></title>
</head>
<body>
<canvas id="ComposeTarget" width="1" height="1"></canvas>
<script src="cms.js"></script>
</body>
</html>
o
Could you please try with 
kotlin.js.ir.output.granularity=whole-program
in gradle.properties?
d
now I get a different console error:
Copy code
Uncaught Error: Error loading module 'cms'. Its dependency '@js-joda/core' was not found. Please, check whether '@js-joda/core' is loaded prior to 'cms'.
    at cms.js:99:13
    at cms.js:103:2
o
I'm trying to reproduce it. And noticed such a thing: when I added 
moduleName = "cms"
in build.gradle.kts, I received a similar error. I keep looking into why it's happening. In the meantime you can test if removing "moduleName=..." helps. The default script name can be found in 
/.../build/compileSync/js/main/developmentExecutable/kotlin
after running jsBrowserRun So index.html would need to be updated too The default name should be the same as the gardle module name iirc
This seems to help:
Copy code
js(IR) {
        moduleName = "cms"
        browser {
            commonWebpackConfig {
                outputFileName = "cms.js"
            }
        }
        binaries.executable()
    }
also 
kotlin.js.ir.output.granularity=whole-program
shouldn't be necessary now
d
I removed 
kotlin.js.ir.output.granularity=whole-program
. Without specifying the moduleName and linking the "CMS-jsApp.js" file, I still get:
Copy code
CMS-jsApp.js:8 Uncaught Error: Error loading module 'cms'. Its dependency 'androidx-runtime' was not found. Please, check whether 'androidx-runtime' is loaded prior to 'cms'.
    at CMS-jsApp.js:8:13
    at CMS-jsApp.js:21:2
but it works correctly if I link "cms.js" and I specify:
Copy code
moduleName = "cms"
        browser {
            commonWebpackConfig {
                outputFileName = "cms.js"
            }
        }
        binaries.executable()
o
Copy code
CMS-jsApp.js:8 Uncaught Error: Error loading module 'cms'
It's weird that no module name specified but it still mentiones module 'cms'. Maybe something was cached. Anyway, good to hear the last configuration worked for you
d
maybe because I specified in gradle
Copy code
rootProject.name = "CMS"
actually I cleaned the project and tried again, and the error is:
Copy code
CMS-jsApp.js:8 Uncaught Error: Error loading module 'CMS-jsApp'. Its dependency 'androidx-runtime' was not found. Please, check whether 'androidx-runtime' is loaded prior to 'CMS-jsApp'.
    at CMS-jsApp.js:8:13
    at CMS-jsApp.js:21:2
o
actually I cleaned the project and tried again, and the error is
Was it without this config?
Copy code
moduleName = "cms"
        browser {
            commonWebpackConfig {
                outputFileName = "cms.js"
            }
        }
d
yes, the error happens when specifying "CMS-jsApp.js" in the index.html with this config?
Copy code
js(IR) {
    browser()
    binaries.executable()
}
One weird warning I get in the latest IntellijIdea Community (2023.1.3) is this one:
despite I am specifying "JS(IR)" in both gradle files
o
got it. I'll see if it's possible to create a minimal repro without compose to report to k/js team. I created an issue for now in our project https://github.com/JetBrains/compose-multiplatform/issues/3345 so others can find the workaround _ As for IDEA warning, I guess it just doesn't see/recongize what type of JS target is used. Should be safe to click "Do not show again"
z
I filed a repro for the js-joda issue here: https://github.com/Kotlin/kotlinx-datetime/issues/334
25 Views
Open in Slack
PreviousNext
Powered by