auto-build seems to be erroring (and thus IJ features are not working) with the following error (on jvmMain):

Error:Kotlin: [Internal Error] java.lang.IllegalStateException: The provided plugin androidx.compose.compiler.plugins.kotlin.ComposeComponentRegistrar is not compatible with this version of compiler
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinCoreEnvironment$Companion.registerExtensionsFromPlugins$cli(KotlinCoreEnvironment.kt:675)
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinCoreEnvironment$ProjectEnvironment.registerExtensionsFromPlugins(KotlinCoreEnvironment.kt:169)
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinCoreEnvironment.<init>(KotlinCoreEnvironment.kt:216)
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinCoreEnvironment.<init>(KotlinCoreEnvironment.kt:111)
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinCoreEnvironment$Companion.createForProduction(KotlinCoreEnvironment.kt:485)
	at org.jetbrains.kotlin.cli.jvm.K2JVMCompiler.createCoreEnvironment(K2JVMCompiler.kt:227)
	at org.jetbrains.kotlin.cli.jvm.K2JVMCompiler.doExecute(K2JVMCompiler.kt:153)
	at org.jetbrains.kotlin.cli.jvm.K2JVMCompiler.doExecute(K2JVMCompiler.kt:52)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:92)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:44)
	at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:98)
	at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1542)
	at jdk.internal.reflect.GeneratedMethodAccessor25.invoke(Unknown Source)
	at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.base/java.lang.reflect.Method.invoke(Method.java:566)
	at java.rmi/sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:359)
	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(Native Method)
	at java.rmi/sun.rmi.transport.Transport.serviceCall(Transport.java:196)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:562)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:796)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:677)
	at java.base/java.security.AccessController.doPrivileged(Native Method)
	at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:676)
	at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
	at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
	at java.base/java.lang.Thread.run(Thread.java:829)
Caused by: java.lang.AbstractMethodError: Receiver class androidx.compose.compiler.plugins.kotlin.ComposeComponentRegistrar does not define or inherit an implementation of the resolved method 'abstract void registerProjectComponents(com.intellij.mock.MockProject, org.jetbrains.kotlin.config.CompilerConfiguration)' of interface org.jetbrains.kotlin.compiler.plugin.ComponentRegistrar.
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinCoreEnvironment$Companion.registerExtensionsFromPlugins$cli(KotlinCoreEnvironment.kt:667)
	... 27 more

My build.gradle.kts:

import org.jetbrains.compose.compose

plugins {
    kotlin("multiplatform") version "1.5.31"
    kotlin("plugin.serialization") version "1.5.31"

    id("org.jetbrains.compose") version "1.0.0"
    application

    id("com.github.ben-manes.versions") version "0.39.0"
}

group = "com.martmists.mods"
version = "1.0"

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

kotlin {
    js(IR) {
        browser {

        }
        binaries.executable()
    }
    jvm {
        compilations.all {
            kotlinOptions.jvmTarget = "16"
        }
        withJava()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(npm("highlight.js", "10.7.2"))
                implementation(compose.web.core)
                implementation(compose.runtime)
                implementation("io.ktor:ktor-client-core:1.6.3")
            }
        }
        val jvmMain by getting {
            dependencies {
                implementation("io.ktor:ktor-server-tomcat:1.6.3")
                implementation("io.ktor:ktor-html-builder:1.6.3")
                implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.7.2")
                implementation("ch.qos.logback:logback-classic:1.2.6")
                implementation("org.jetbrains:markdown:0.2.4")
            }
        }
        val commonMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.0")
                api(compose.runtime)  // Needed to make jvmMain/commonMain compile despite only using compose web for frontend
            }
        }
    }
}

application {
    mainClass.set("com.martmists.mods.backend.ServerKt")
}

tasks.named<Copy>("jvmProcessResources") {
    val jsBrowserDistribution = tasks.named("jsBrowserDistribution")
    from(jsBrowserDistribution)
}

tasks.named<JavaExec>("run") {
    dependsOn(tasks.named<Jar>("jvmJar"))
    classpath(tasks.named<Jar>("jvmJar"))
}

Using Java 16/17 and gradle 7.3

\

Hi there people, I'm glad to be here. Few days ago I've started reading about Compose for Web, and to be honest I immediately got some ideas for my future projects where I can explore it furthermore! 🙂 Now I also have few questions. I want to create a project with Ktor as a back-end server and Compose Web for front-end. Now I'm having troubles setting up the basic project manually in Intelij IDEA. Can someone provide me some maybe useful resource where I can read more about it, or even explain it to me here. Is there any kind of template for creating that project which includes Ktor and Compose Web, like we have it on start.ktor.io (Even tho it would be even better to be able to generate that kind of project directly inside Intelij IDEA, and not externally like that) :D

Hello there. 👋 I started a new multiplatform project a few days ago to work with compose web. Now I have two questions regarding CSS. First question: How would I transfer some CCS like this for my StyleSheet?

.container.button-pressed .show-overlay {
    transform: translateX(0);
}

At the moment my Stylesheets look similar to this:

object SpanStyleSheet : StyleSheet() {
    val span by style {
        fontSize(12.px)
        maxWidth(20.vw)
    }
}

Second question: How can I combine multiple StyleSheets together?

Any ideas what might be causing this?

e: Could not find "org.jetbrains.compose.web:web-svg" in [C:\Users\Greg\AppData\Local\kotlin\daemon]
e: java.lang.IllegalStateException: FATAL ERROR: Could not find "org.jetbrains.compose.web:web-svg" in [C:\Users\Greg\AppData\Local\kotlin\daemon]

I have some HTML as a String that I want to display in a

Div

. Do we have something like React's

__dangerouslySetInnerHtml

function?

How to add SVG in compose and change its color by CSS color or fill param?

Hello there. 👋 I use Compose for Web, but when I use following dependency on another multiplatform module:

implementation(project(":shared:gallery"))

kotlin {
    js(IR) {
        browser()
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(compose.web.core)
                implementation(compose.runtime)
                implementation(project(":shared:gallery"))
            }
        }
    }
}

then I receive blank screen and error in Web Inspector (Safari). Without dependency is everything ok. I can share more details. Thank you.

Has anyone built the new mine sweeper sample for compose web that appears to be using canvas? https://github.com/JetBrains/compose-jb/tree/master/examples/minesweeper

Does anyone have experience with creating compose-web wrappers for React components?

Hi, I have a little experience with Flutter and more experience with Kotlin, I like kotlin better, I learned about compose on Android, from what I saw in the comments, compose for WEB is different, will it ever be the same? How long do you estimate 1, 2 or more years?

Seeing something weird when trying to define the "after" psuedo-element (code in thread) Edit: Solved, feel free to ignore

Hello, I wanted to know that how can I add

modals/dialog forms

compose web I added Bootstrap modal but it's loaded as different screen

I am trying to add animation to a particular Div here by using StyleSheet Keyframes

object ModalStyle: StyleSheet() {
    val btsModal by style {
        keyframes {
            from { this.property("top",0.px) }
            to { this.property("top", 30.px) }
        }
    }
}

I added this to my div's style like below, but its not animating

Div(
        attrs = {
            classes("modal")
            id(id)
            tabIndex(-1)
            attr("aria-labelledby", label)
            style {
                display(displayState.value)
//                background("#0000004d")
                position(Position.Relative)
                animation(ModalStyle.btsModal) {
                    duration(10.s)
                }
            }
        }
    )

But no animation happens

❗ Hello, everyone! My name is Ilya and I’m product manager at Kotlin/JS :kotlinnew:. I’m looking for Compose for Web users that are willing to have a 30-45 mins chat with me regarding their experience with Compose for Web (especially if you are using it in production). If you are willing to talk, please, write me in the DM or leave a reaction on this message and I will write you. Thank’s to all the responders in advance 😉

Hello, I’d like to URL encode / decode Strings in a simple compose-web only project. What would be the most sane way to do so? Coming from Java,

java.net.URI

is not accessible, obviously 🤔

Does anyone else have issues using a

dynamic

as the type of a parameter in a composable function? (Stack trace in thread)

@Composable
fun myComposable(value: dynamic) {
}

FYI:

routing-compose:0.1.7

is out, with support for redirection if the routing tree changed. Simple use case: You got a link which requires a login first. https://github.com/hfhbd/routing-compose

I'm wondering how

StyleSheet

s work under the hood. I'd like to save my page after it renders once and see the styles in the DOM, but instead, it seems like only empty

<style>

tags are there.

Can I share Compose code from Android/Desktop with a website project to get the same UI on the web? I heard there are two versions of Compose Web, one based on HTML and one on canvas rendering. What's the current situation?

Hello. just wondering, trying Jetpack compose for web. Everything ok, but production file size is around 2,5 MB 🙂 any advice with kotlin JS IR dce? or some lazyloading for kotlin js?

Should HMR work with Kotlin/JS and compose/web?

I have 3 pages:

/

,

/users

and

/profile

. What is the best approach for navigation? Should my backend serve different html files with different Compose js scrips inside for each of this pages or can I use just one entry point (backend returns the same html file for all 3 urls) in the Compose app and show different content depending on url?

Why is

ElementBuilderImplementation

private? How do you implement new html elements, without copying this class?

My project now supports exporting your Compose for Web project in a format that allows it to be served by static website hosting providers. If this is something you might be excited about, you can read more here: https://bitspittle.dev/blog/2022/staticdeploy

Can anyone tell me why the following isn’t working

Img(
                src = "../resources/ic_splash.svg",
                attrs = {
                    style {
                        width(300.px)
                        height(300.px)
                    }
                }
            )

This message was deleted.

I’ve been trying to add sqldelight to my jetpack compose web’s project and it’s giving me the following error

Module not found: Error: Can't resolve 'fs' in '/Users/rahulrawat/Desktop/Projects/web/Address/build/js/node_modules/sql.js/dist'

Has anyone faced this and been able to resolve?

What's the reasoning behind removing DomSideEffect in 1.1.0? I find that ref {} is better suited for initialisation and destruction of the dom effects, while DomSideEffect was great for propagating compose state changes to external state. It's now doable with RefEffect, but onDispose lambda is pretty much always empty for me (which feels dirty).