Howdy folks I have been exploring Compose web and have been

Question

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 <https github com mpetuska kmdc|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

Kelvin Ojiako · Answer

The block below shows my dependencies ``` 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 lt YarnRootExtension gt yarnLockMismatchReport = YarnLockMismatchReport WARNING NONE | FAIL rootProject the lt YarnRootExtension gt reportNewYarnLock = false true rootProject the lt YarnRootExtension gt 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 maven 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 lt Copy gt backendProcessResources val frontendBrowserDistribution = tasks named frontendBrowserDistribution from frontendBrowserDistribution tasks named lt JavaExec gt run dependsOn tasks named lt Jar gt backendJar classpath tasks named lt Jar gt backendJar ```

Kelvin Ojiako · Answer

I have also attached the main region that i am working on ``` 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 gt `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 gt at org jetbrains kotlin ir declarations impl IrPropertyImpl lt init gt IrPropertyImpl kt 72 gt at org jetbrains kotlin ir declarations impl AbstractIrFactoryImpl createProperty IrFactoryImpl kt 185 gt at org jetbrains kotlin ir declarations impl IrFactoryImplForJsIC createProperty IrFactoryImplForJsIC kt 274 gt at org jetbrains kotlin ir declarations IrFactory$DefaultImpls createProperty$default IrFactory kt 138 gt at org jetbrains kotlin backend common serialization IrDeclarationDeserializer$deserializeIrProperty$1$prop$2 invoke IrDeclarationDeserializer kt 734 gt at org jetbrains kotlin backend common serialization IrDeclarationDeserializer$deserializeIrProperty$1$prop$2 invoke IrDeclarationDeserializer kt 733 gt at org jetbrains kotlin ir util SymbolTable declareProperty SymbolTable kt 1641 gt at org jetbrains kotlin backend common serialization IrDeclarationDeserializer deserializeIrProperty IrDeclarationDeserializer kt 733 gt at org jetbrains kotlin backend common serialization IrDeclarationDeserializer deserializeDeclaration IrDeclarationDeserializer kt 789 gt at org jetbrains kotlin backend common serialization IrDeclarationDeserializer deserializeDeclaration$default IrDeclarationDeserializer kt 782 gt at org jetbrains kotlin backend common serialization IrFileDeserializer deserializeDeclaration IrFileDeserializer kt 40 gt at org jetbrains kotlin backend common serialization FileDeserializationState deserializeAllFileReachableTopLevel IrFileDeserializer kt 125 gt at org jetbrains kotlin backend common serialization BasicIrModuleDeserializer$ModuleDeserializationState deserializeReachableDeclarations BasicIrModuleDeserializer kt 190 gt at org jetbrains kotlin backend common serialization BasicIrModuleDeserializer deserializeReachableDeclarations BasicIrModuleDeserializer kt 158 gt at org jetbrains kotlin backend common serialization KotlinIrLinker deserializeAllReachableTopLevels KotlinIrLinker kt 111 gt at org jetbrains kotlin backend common serialization KotlinIrLinker findDeserializedDeclarationForSymbol KotlinIrLinker kt 122 gt at org jetbrains kotlin backend common serialization KotlinIrLinker deserializeOrResolveDeclaration KotlinIrLinker kt 159 gt at org jetbrains kotlin backend common serialization KotlinIrLinker getDeclaration KotlinIrLinker kt 148 gt at org jetbrains kotlin ir util ExternalDependenciesGeneratorKt getDeclaration ExternalDependenciesGenerator kt 57 gt at org jetbrains kotlin ir util ExternalDependenciesGenerator generateUnboundSymbolsAsDependencies ExternalDependenciesGenerator kt 44 gt at org jetbrains kotlin ir backend js KlibKt getIrModuleInfoForKlib klib kt 294 gt at org jetbrains kotlin ir backend js KlibKt loadIr klib kt 236 gt at org jetbrains kotlin ir backend js CompilerKt compile compiler kt 55 gt at org jetbrains kotlin ir backend js CompilerKt compile$default compiler kt 39 gt at org jetbrains kotlin cli js K2JsIrCompiler$Ir2JsTransformer lowerIr K2JsIrCompiler kt 129 gt at org jetbrains kotlin cli js K2JsIrCompiler$Ir2JsTransformer makeJsCodeGenerator K2JsIrCompiler kt 152 gt at org jetbrains kotlin cli js K2JsIrCompiler$Ir2JsTransformer compileAndTransformIrNew K2JsIrCompiler kt 160 gt at org jetbrains kotlin cli js K2JsIrCompiler doExecute K2JsIrCompiler kt 403 gt at org jetbrains kotlin cli js K2JSCompiler doExecute K2JSCompiler java 180 gt at org jetbrains kotlin cli js K2JSCompiler doExecute K2JSCompiler java 72 gt at org jetbrains kotlin cli common CLICompiler execImpl CLICompiler kt 100 gt at org jetbrains kotlin cli common CLICompiler execImpl CLICompiler kt 46 gt at org jetbrains kotlin cli common CLITool exec CLITool kt 101 gt at org jetbrains kotlin daemon CompileServiceImpl compile CompileServiceImpl kt 1486 gt at java base jdk internal reflect NativeMethodAccessorImpl invoke0 Native Method gt at java base jdk internal reflect NativeMethodAccessorImpl invoke NativeMethodAccessorImpl java 77 gt at java base jdk internal reflect DelegatingMethodAccessorImpl invoke DelegatingMethodAccessorImpl java 43 gt at java base java lang reflect Method invoke Method java 568 gt at java rmi sun rmi server UnicastServerRef dispatch UnicastServerRef java 360 gt at java rmi sun rmi transport Transport$1 run Transport java 200 gt at java rmi sun rmi transport Transport$1 run Transport java 197 gt at java base java security AccessController doPrivileged AccessController java 712 gt at java rmi sun rmi transport Transport serviceCall Transport java 196 gt at java rmi sun rmi transport tcp TCPTransport handleMessages TCPTransport java 587 gt at java rmi sun rmi transport tcp TCPTransport$ConnectionHandler run0 TCPTransport java 828 gt at java rmi sun rmi transport tcp TCPTransport$ConnectionHandler lambda$run$0 TCPTransport java 705 gt at java base java security AccessController doPrivileged AccessController java 399 gt at java rmi sun rmi transport tcp TCPTransport$ConnectionHandler run TCPTransport java 704 gt at java base java util concurrent ThreadPoolExecutor runWorker ThreadPoolExecutor java 1136 gt at java base java util concurrent ThreadPoolExecutor$Worker run ThreadPoolExecutor java 635 gt at java base java lang Thread run Thread java 833 gt gt Errors were stored into C codeBase kotlin Aikai Web gradle kotlin errors errors 1683620948150 log

Foso · Answer

Hi there is a < CNR7ARJGJ|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

Kelvin Ojiako · Answer

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

Foso · Answer