Backend Internal Error During IR Lowering When Applying Clickable Modifier in Jetpack Compose

Backend
1

I’m encountering a compilation error while trying to build a custom checkable component in Jetpack Compose. This issue arises when I include a clickable modifier in my implementation.

Here’s the code I used:

Surface(
    modifier = Modifier
        .clickable(
            enabled = isEnabled,
            interactionSource = touchSource,
            indication = rememberRipple(),
            role = Role.Checkbox,
            onClick = { onToggleChange(!isToggled) }
        )
        .then(customModifier),
) {
    Row {
        Checkbox(checked = isToggled, onCheckedChange = {}, colors = checkboxColors)
        Text(text = labelText ?: "")
    }
}

The build process fails and shows this error:

org.jetbrains.kotlin.backend.common.BackendException: Backend Internal error: Exception during IR lowering
File being compiled: /path/to/project/ui/components/CustomCheckbox.kt

Everything compiles without the clickable modifier. I’ve also experimented with various version setups, but nothing resolves the issue.

Here are my current configuration details:

ext.versions = [
    'compileSdk': 31,
    'targetSdk' : 30,
    'minSdk'    : 26,
    'kotlin'    : '1.5.30',
    'navigation': '2.3.5',
    'compose'   : '1.0.2'
]

Does anyone have any ideas on how to fix this compilation error?

2

Your Kotlin 1.5.30 with Compose 1.0.2 is likely causing this IR lowering issue. I hit the same backend compilation errors with older Kotlin versions and Compose. The Kotlin compiler and Compose compiler versions don’t play nice together. Upgrade to Kotlin 1.5.31 or later - they fixed specific IR lowering issues for Compose apps. Also check if your customModifier has lambda expressions or complex state handling that’s clashing with the clickable modifier’s internal IR transformations. This error usually happens when the compiler can’t process the combined modifier chain during lowering.

3

Had the same problem last week. Wrap your onclick lambda in remember{} like onClick = remember { { onToggleChange(!isToggled) } }. IR lowering gets confused with lambda captures and state changes sometimes.

4

that’s weird! try removing role = Role.Checkbox temporarily and see if that fixes the ir lowering issue. also, what happens if you put .clickable() after .then(customModifier) instead of before?