Console Error when running Compose Web in KMM project ?

RageshAntony commented 1 year ago

I successfully added Kotlin JavaScript Target in my Kotlin Mutliplatform Mobile.

Then I included the Compose Web and designed a basic compose kotlin page.

I have added the index.html file in jsMain/resources folder and it's being served when running the gradle task jsProductionWebpack

Now when I open the index.html, I am getting some errors in the Browser console.

I can't understand the stacktrace.

If I run a page designed in Kotlinx Html, it's working perfectly

But compose web page throwing error

My Compose Page:

fun main() {
    var count: Int by mutableStateOf(0)

    renderComposable(rootElementId = "root") {
        Div({ style { padding(25.px) } }) {
            Button(attrs = {
                onClick { count -= 1 }
            }) {
                Text("-")
            }

            Span({ style { padding(15.px) } }) {
                Text("$count")
            }

            Button(attrs = {
                onClick { count += 1 }
            }) {
                Text("+")
            }
        }
    }
}

index.html:

<!doctype html>
<html lang="en">
<head>

    <title>Hello, Kotlin/JS!</title>
</head>
<body>
<script src="shared.js"></script>

</body>
</html>

gradle

import org.jetbrains.compose.compose

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose") version "1.2.0-beta02"
    kotlin("native.cocoapods")
    id("com.android.library")
}

version = "1.0"

kotlin {
    android()
    iosX64()
    iosArm64()
    iosSimulatorArm64()
    js(IR) {
        binaries.executable()
        //useCommonJs()
        nodejs()
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
            }
        }
    }

    cocoapods {
        summary = "Some description for the Shared Module"
        homepage = "Link to the Shared Module homepage"
        ios.deploymentTarget = "14.1"
        podfile = project.file("../FullTariosApp/Podfile")
        framework {
            baseName = "shared"
        }
    }

    sourceSets {
        val commonMain by getting
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
        val androidMain by getting {
            dependencies {
                implementation(compose.runtime)
            }
        }
        val androidTest by getting
        val iosX64Main by getting
        val iosArm64Main by getting
        val iosSimulatorArm64Main by getting
        val iosMain by creating {
            dependsOn(commonMain)
            iosX64Main.dependsOn(this)
            iosArm64Main.dependsOn(this)
            iosSimulatorArm64Main.dependsOn(this)
        }
        val iosX64Test by getting
        val iosArm64Test by getting
        val iosSimulatorArm64Test by getting
        val iosTest by creating {
            dependsOn(commonTest)
            iosX64Test.dependsOn(this)
            iosArm64Test.dependsOn(this)
            iosSimulatorArm64Test.dependsOn(this)
        }
        val jsMain by getting {
            dependencies {
                implementation(compose.web.core)
                implementation(compose.runtime)
                implementation(kotlin("stdlib-js"))
                implementation("org.jetbrains.kotlinx:kotlinx-html:0.7.2")
            }
        }
        val jsTest by getting {
            dependencies {
                // you don't need this if you already have
                // kotlin("test") as your `commonTest` dependency
               // implementation(kotlin("test-js"))
            }
        }
    }
}

android {
    compileSdk = 32
    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
    defaultConfig {
        minSdk = 21
        targetSdk = 32
    }
}

eymar commented 1 year ago

renderComposable(rootElementId = "root")

here root is an ID of an element (div for example) that is expected to be present in your html.

You need either add <div id="root"></div>(see https://github.com/JetBrains/compose-jb/blob/master/tutorials/Web/Getting_Started/README.md#6-add-the-indexhtml-file-to-the-resources) or use renderComposableInBody

wakaztahir commented 1 year ago

I have a question , though I don't want to create a new issue for it , Whenever compose gets an error on the web , the whole application freezes , is there a way to ignore runtime errors and keep going like javascript applications do If there is , how can I do that ?

okushnikov commented 2 weeks ago

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

JetBrains / compose-multiplatform

Console Error when running Compose Web in KMM project ? #2356