https://kotlinlang.org logo
Join Slack
Powered by
Howdy folks, I have been exploring Compose web and...
# compose-web
k
Howdy folks, I have been exploring Compose web and have been trying to use material components with the framework. Initially I tried to use compose ui and material3 frameworks but then found out they are not supported and now I am experimenting with the KMDC component library for compose. I keep getting a 
java.lang.IllegalStateException: IrPropertyPublicSymbolImpl for org.jetbrains.compose.web.attributes/setInputValue|-1139008128042356648[0] is already bound: PROPERTY name:setInputValue visibility:internal modality:FINAL [val]
error while using the MDCTopAppBar component, I have added 2 replies to this question adding the build file, the full error message and the section that I am working on. Its also kind of tricky cause the error messages do not tell me the specific lines in my code where the errors are coming from
The block below shows my dependencies
Copy code
import org.jetbrains.kotlin.gradle.targets.js.yarn.YarnLockMismatchReport
import org.jetbrains.kotlin.gradle.targets.js.yarn.YarnRootExtension

rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.yarn.YarnPlugin::class.java) {
    rootProject.the<YarnRootExtension>().yarnLockMismatchReport =
        YarnLockMismatchReport.WARNING // NONE | FAIL
    rootProject.the<YarnRootExtension>().reportNewYarnLock = false // true
    rootProject.the<YarnRootExtension>().yarnLockAutoReplace = false // true
}

plugins {
    kotlin("multiplatform") version "1.8.20"
    kotlin("plugin.serialization") version "1.6.10"
    id("org.jetbrains.compose") version "1.4.0"
    application
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    jcenter()
    mavenCentral()
    maven("<https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven>")
    maven("<https://maven.pkg.jetbrains.space/public/p/compose/dev>")
    google()

}

kotlin {


    jvmToolchain(17)

    jvm("backend") {
        compilations.all {
            kotlinOptions.jvmTarget = "1.8"
        }
        withJava()
        testRuns["test"].executionTask.configure {
            useJUnitPlatform()
        }
    }
    js("frontend", IR) {
        binaries.executable()
        browser {
            commonWebpackConfig {
                cssSupport{
                    enabled.set(true)
                }
                scssSupport { enabled.set(true) }
            }
        }
    }
    sourceSets {
        val commonMain by getting{
            dependencies{
                implementation("io.ktor:ktor-client-core:2.3.0")
                implementation("io.ktor:ktor-client-serialization:2.3.0")
                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2")

            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
        val backendMain by getting {
            dependencies {
                implementation("io.ktor:ktor-server-netty:2.0.1")
                implementation("io.ktor:ktor-server-html-builder-jvm:2.0.1")
                implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.7.2")
                implementation("ch.qos.logback:logback-classic:1.2.3")

                implementation(compose.runtime)
            }
        }
        val backendTest by getting
        val frontendMain by getting {
            dependencies {
                //implementation("org.jetbrains.kotlin-wrappers:kotlin-react:18.0.0-pre.332-kotlin-1.6.21")
               // implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:18.0.0-pre.332-kotlin-1.6.21")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion:11.9.0-pre.332-kotlin-1.6.21")
               // implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.3.0-pre.332-kotlin-1.6.21")

                implementation(compose.runtime)
                implementation(npm("highlight.js", "10.7.2"))
                implementation(compose.html.core)
                implementation(compose.ui)
                implementation(compose.material3)

                implementation("app.softwork:routing-compose:0.2.12")

                implementation("dev.petuska:kmdc:0.1.0")
                implementation("dev.petuska:kmdcx:0.1.0")
            }
        }
        val frontendTest by getting
    }
}

application {
    mainClass.set("org.example.application.ServerKt")
}

tasks.named<Copy>("backendProcessResources") {
    val frontendBrowserDistribution = tasks.named("frontendBrowserDistribution")
    from(frontendBrowserDistribution)
}

tasks.named<JavaExec>("run") {
    dependsOn(tasks.named<Jar>("backendJar"))
    classpath(tasks.named<Jar>("backendJar"))
}
I have also attached the main region that i am working on
Copy code
@Composable
fun sampleNavBar(){
    navigationBarRoutings()
    MDCTopAppBar{
        TopAppBar{
            Row{
                Section{
                    Text("home")
                }


                Section{
                    Text("archive")
                }
            }
        }
    }
}
Also below I have attached the full list of errors that the compiler gives 
java.lang.IllegalStateException: IrPropertyPublicSymbolImpl for org.jetbrains.compose.web.attributes/setInputValue|-1139008128042356648[0] is already bound: PROPERTY name:setInputValue visibility:internal modality:FINAL [val]
at org.jetbrains.kotlin.ir.symbols.impl.IrBindablePublicSymbolBase.bind(IrPublicSymbolBase.kt:58)
at org.jetbrains.kotlin.ir.declarations.impl.IrPropertyImpl.<init>(IrPropertyImpl.kt:72)
at org.jetbrains.kotlin.ir.declarations.impl.AbstractIrFactoryImpl.createProperty(IrFactoryImpl.kt:185)
at org.jetbrains.kotlin.ir.declarations.impl.IrFactoryImplForJsIC.createProperty(IrFactoryImplForJsIC.kt:274)
at org.jetbrains.kotlin.ir.declarations.IrFactory$DefaultImpls.createProperty$default(IrFactory.kt:138)
at org.jetbrains.kotlin.backend.common.serialization.IrDeclarationDeserializer$deserializeIrProperty$1$prop$2.invoke(IrDeclarationDeserializer.kt:734)
at org.jetbrains.kotlin.backend.common.serialization.IrDeclarationDeserializer$deserializeIrProperty$1$prop$2.invoke(IrDeclarationDeserializer.kt:733)
at org.jetbrains.kotlin.ir.util.SymbolTable.declareProperty(SymbolTable.kt:1641)
at org.jetbrains.kotlin.backend.common.serialization.IrDeclarationDeserializer.deserializeIrProperty(IrDeclarationDeserializer.kt:733)
at org.jetbrains.kotlin.backend.common.serialization.IrDeclarationDeserializer.deserializeDeclaration(IrDeclarationDeserializer.kt:789)
at org.jetbrains.kotlin.backend.common.serialization.IrDeclarationDeserializer.deserializeDeclaration$default(IrDeclarationDeserializer.kt:782)
at org.jetbrains.kotlin.backend.common.serialization.IrFileDeserializer.deserializeDeclaration(IrFileDeserializer.kt:40)
at org.jetbrains.kotlin.backend.common.serialization.FileDeserializationState.deserializeAllFileReachableTopLevel(IrFileDeserializer.kt:125)
at org.jetbrains.kotlin.backend.common.serialization.BasicIrModuleDeserializer$ModuleDeserializationState.deserializeReachableDeclarations(BasicIrModuleDeserializer.kt:190)
at org.jetbrains.kotlin.backend.common.serialization.BasicIrModuleDeserializer.deserializeReachableDeclarations(BasicIrModuleDeserializer.kt:158)
at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.deserializeAllReachableTopLevels(KotlinIrLinker.kt:111)
at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.findDeserializedDeclarationForSymbol(KotlinIrLinker.kt:122)
at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.deserializeOrResolveDeclaration(KotlinIrLinker.kt:159)
at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.getDeclaration(KotlinIrLinker.kt:148)
at org.jetbrains.kotlin.ir.util.ExternalDependenciesGeneratorKt.getDeclaration(ExternalDependenciesGenerator.kt:57)
at org.jetbrains.kotlin.ir.util.ExternalDependenciesGenerator.generateUnboundSymbolsAsDependencies(ExternalDependenciesGenerator.kt:44)
at org.jetbrains.kotlin.ir.backend.js.KlibKt.getIrModuleInfoForKlib(klib.kt:294)
at org.jetbrains.kotlin.ir.backend.js.KlibKt.loadIr(klib.kt:236)
at org.jetbrains.kotlin.ir.backend.js.CompilerKt.compile(compiler.kt:55)
at org.jetbrains.kotlin.ir.backend.js.CompilerKt.compile$default(compiler.kt:39)
at org.jetbrains.kotlin.cli.js.K2JsIrCompiler$Ir2JsTransformer.lowerIr(K2JsIrCompiler.kt:129)
at org.jetbrains.kotlin.cli.js.K2JsIrCompiler$Ir2JsTransformer.makeJsCodeGenerator(K2JsIrCompiler.kt:152)
at org.jetbrains.kotlin.cli.js.K2JsIrCompiler$Ir2JsTransformer.compileAndTransformIrNew(K2JsIrCompiler.kt:160)
at org.jetbrains.kotlin.cli.js.K2JsIrCompiler.doExecute(K2JsIrCompiler.kt:403)
at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:180)
at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:72)
at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:100)
at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:46)
at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:101)
at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1486)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:568)
at java.rmi/sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:360)
at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:200)
at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:197)
at java.base/java.security.AccessController.doPrivileged(AccessController.java:712)
at java.rmi/sun.rmi.transport.Transport.serviceCall(Transport.java:196)
at java.rmi/sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:587)
at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:828)
at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:705)
at java.base/java.security.AccessController.doPrivileged(AccessController.java:399)
at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:704)
at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1136)
at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635)
at java.base/java.lang.Thread.run(Thread.java:833)
Errors were stored into C:\codeBase\kotlin\Aikai_Web\.gradle\kotlin\errors\errors-1683620948150.log
f
Hi, there is a #kmdc channel. "Compose for Web" is now using wasm and you can use Compose UI. The Compose version with HTML that Kmdc is using, is now called "Compose Html"
k
hey @Foso are there any sources for using compose ui components with compose web, components like navigation bar, card, buttons, e.t.c with material styles, I already tried using material3 and was getting so many issues I decided it probable was not ready yet
f
31 Views
Open in Slack
PreviousNext
Powered by