Entire app fails because of the `LazyColumn` with `v1.5.0-beta01`

[JamshedAlamQaderi]

Describe the bug I'm trying to create a scrollable column. When i've tried with LazyColumn then it crashes the app with below error into browser when loading.

IllegalArgumentException {message: 'Failed requirement.', cause: undefined, name: 'IllegalArgumentException', stack: 'IllegalArgumentException: Failed requirement.\n    …d (http://localhost:8080/fmadmin-web.js:49611:17)'}cause: undefinedmessage: "Failed requirement."name: "IllegalArgumentException"stack: "IllegalArgumentException: Failed requirement.\n    at BringIntoViewResponderNode.get_current [as get_current_76jhw1_k$] (http://localhost:8080/fmadmin-web.js:3024:13)\n    at _get_localParent__9fzpok (http://localhost:8080/fmadmin-web.js:212209:18)\n    at protoOf.get_parent_hy4reb_k$ (http://localhost:8080/fmadmin-web.js:212239:26)\n    at syncAggregateChildKindSet (http://localhost:8080/fmadmin-web.js:164695:19)\n    at protoOf.updateFrom_rn6bgr_k$ (http://localhost:8080/fmadmin-web.js:165165:7)\n    at protoOf.set_modifier_cidbkm_k$ (http://localhost:8080/fmadmin-web.js:159452:18)\n    at ComposeUiNode$Companion$SetModifier$lambda (http://localhost:8080/fmadmin-web.js:155501:16)\n    at http://localhost:8080/fmadmin-web.js:46948:7\n    at http://localhost:8080/fmadmin-web.js:47321:13\n    at applyChangesInLocked (http://localhost:8080/fmadmin-web.js:49611:17)"[[Prototype]]: RuntimeExceptionconstructor: ƒ IllegalArgumentException()[[Prototype]]: Exception

I'm using this code for LazyColumn

@OptIn(ExperimentalResourceApi::class)
@Composable
fun DrawerContent() {
    val avatarPicture = resource("jamshed_pic.jpg").rememberImageBitmap()
    Column(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(top = 20.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Avatar(avatarPicture.orEmpty())
            Spacer(Modifier.height(10.dp))
            Text("Jamshed Alam Qaderi", style = MaterialTheme.typography.bodyLarge)
            Spacer(Modifier.height(5.dp))
            Text("[email protected]", style = MaterialTheme.typography.bodySmall)
            Spacer(Modifier.height(10.dp))
            Divider()
        }
        Spacer(Modifier.height(10.dp))
        LazyColumn {
            items(DrawerListItems) { state ->
                when (state) {
                    is DrawerListState.Header -> DrawerItemHeader(state.title)
                    is DrawerListState.Item -> DrawerItem(state.icon, state.type.text)
                }
            }
        }
    }
}

Affected platforms Select one of the platforms below:

• Web (K/JS) - Canvas based API

If the bug is Android-only, report it in the Jetpack Compose tracker

Versions

• Kotlin version*: 1.9.0
• Compose Multiplatform version*: 1.5.0-beta01
• OS version(s)* (required for Desktop and iOS issues):
• OS architecture (x86 or arm64): MAC ARM64
• JDK (for desktop issues):

To Reproduce Steps and/or the code snippet to reproduce the behavior:

1. Use the kotlin.version to 1.9.0 and compose.version to 1.5.0-beta01
2. Use the below code in the web module

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    onWasmReady {
        CanvasBasedWindow("FM Admin") {
            LazyColumn {
                items(DrawerListItems) { state ->
                    when (state) {
                        is DrawerListState.Header -> DrawerItemHeader(state.title)
                        is DrawerListState.Item -> DrawerItem(state.icon, state.type.text)
                    }
                }
            }
        }
    }
}

3. Then run it using ./gradlew :web:jsBrowserRun
4. You'll see nothing is rendering and an error in the console

Expected behavior LazyColumn was working with 1.4.0 but idk what happens with LazyColumn in 1.5.0-beta01

Screenshots

Additional context Thank you all for bringing the awesome leading edge technology. I always wanted to make multiplatform apps using kotlin...

[eymar]

Thanks! It's a known issue. It will be fixed in k/js: https://youtrack.jetbrains.com/issue/KT-60635/K-JS-Class-internal-methods-may-clash-with-child-methods-from-other-module-that-have-the-same-name

As a workaround you can add kotlin.incremental.js.ir=false to your gradle.properties

[eymar]

We'll add a workaround on Compose side: https://github.com/JetBrains/compose-multiplatform-core/pull/734 So it should start working without kotlin.incremental.js.ir=false in the next compose builds.

[JamshedAlamQaderi]

Thanks. I'm gonna give it a try

[JamshedAlamQaderi]

Thank you @eymar it worked. Also waiting for the build to use IR compiler

[sureshmaidaragi1919]

Any update on this issue?

[okushnikov]

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