KMM应用添加Web模块后无法复用共享库，求解决方法

一、调整模块结构（核心解决依赖访问问题） #

不要单独创建Web模块或把Web模块移入共享库内部，正确的做法是在共享的Multiplatform模块中直接添加Web Target，自动建立与commonMain的依赖关系：

1. 打开共享模块的build.gradle.kts，添加Web相关配置：

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

kotlin {
    // 保留现有Android、iOS Target配置
    android()
    iosX64()
    iosArm64()
    iosSimulatorArm64()

    // 添加Web Target（IR模式为Compose Web当前推荐模式）
    js(IR) {
        browser()
        binaries.executable()
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                // 保留原有的共享依赖，如Compose基础库
                implementation(compose.runtime)
                implementation(compose.foundation)
                implementation(compose.material)
            }
        }
        // 配置Web专属SourceSet，自动依赖commonMain
        val webMain by getting {
            dependsOn(commonMain)
            dependencies {
                implementation(compose.web.core)
                implementation(compose.web.dom)
            }
        }
        // 其他SourceSet（如commonTest、androidMain等）配置保持不变
    }
}

2. 删除之前单独创建的Web模块，避免结构混乱。

二、修复Web端UI加载问题 #

1. 检查Web入口文件（webMain下的Main.kt），确保正确初始化Compose Web并加载UI：

fun main() {
    // 绑定到HTML中的根元素，渲染共享UI组件
    renderComposable(rootElementId = "root") {
        // 调用commonMain中的主UI组件，例如SharedMainScreen()
        SharedMainScreen()
    }
}

2. 确认Web模块的index.html中存在对应根元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>KMM Web App</title>
</head>
<body>
    <!-- 需与renderComposable中的rootElementId完全一致 -->
    <div id="root"></div>
    <!-- 自动生成的JS文件名，需与模块名匹配 -->
    <script src="shared-web.js"></script>
</body>
</html>

三、同步与缓存清理 #

执行以下Gradle命令，确保配置生效：

./gradlew clean
./gradlew sync

四、常见坑点排查 #

• 确保Kotlin版本与Compose版本兼容（如Kotlin 1.9.x对应Compose 1.5.x），版本不匹配会导致编译或运行错误。
• 检查commonMain中的代码是否包含Android/iOS专属API，Web Target无法识别平台特有代码，需用expect/actual封装平台逻辑。
• 若Web端仍无法访问共享代码，检查SourceSet的dependsOn配置是否正确，确保webMain依赖commonMain。

内容的提问来源于stack exchange，提问作者Ruben Mim