I have an KMP project with android and web targets...

# javascript

[Remy Benza]

I have an KMP project with android and web targets (kotlin js app). I have a shared module with commonMain for platform independent code and submodules for android/web with platform specific code. On Android everything works fine. I can use code from both commonMain and androidMain in the Shared module. On web however I can only reach / see code inside the submodule jsMain and not the code from commonMain (platform independent code)

[Remy Benza]

I've been pullig my hair out why this is, tried ChatGPT, Claude and Grok but the cant help me futher. Anyone here that can spot my issue?

[broadway_lamb]

Could you share your build.gradle.kts by any chance?

[Remy Benza]

this is my build.gradle for shared module (with commonMain / androidMain / jsMain)

build.gradle.kts

[Remy Benza]

This is my build.gradle for the web module

build.gradle.kts

[Remy Benza]

and my settings.gradle

pluginManagement {
repositories {
google()
mavenCentral()
gradlePluginPortal()
}
}

dependencyResolutionManagement {
versionCatalogs {
create("libs") {
from(files("libs.versions.toml"))
}
}
}

rootProject.name = "MyProject"
include(":shared", ":androidApp", ":webApp")

[Artem Kobzar]

The problem is sitting in the builld.gradle of the web application. You use outdated (and deprecated) kotlin("js") plugin, however to use all the features of the multiplatform code you need to use kotlin("multiplatform") instead. It should give you access to the commonMain of other modules.
So, your web application build.gradle.kts :

import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalDistributionDsl
// WebApp
plugins {
    kotlin("multiplatform")
}
group = "com.example"
version = "1.0-SNAPSHOT"
repositories {
    mavenCentral()
    google()
}
kotlin {
    js(IR) {
        browser {
            // Enables webpack dev server, source maps, etc.
            commonWebpackConfig {
                cssSupport {
                    enabled = true
                }
            }
            webpackTask {
                mainOutputFileName = "main.js"
            }
            @OptIn(ExperimentalDistributionDsl::class)
            distribution {
                // Copy font files to output directory
                copy {
                    from("$projectDir/src/jsMain/resources/fonts")
                    into("${layout.buildDirectory}/distributions/fonts")
                }
            }
        }
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(project(":shared"))
                implementation("org.jetbrains.kotlin:kotlinx-atomicfu-runtime:2.1.20")
                implementation("com.juul.indexeddb:core:0.7.1")
                val version = "2025.3.11"
                val prefix = "org.jetbrains.kotlin-wrappers:kotlin-"
                implementation("${prefix}react:$version-19.0.0")
                implementation("${prefix}react-dom:$version-19.0.0")
                implementation("${prefix}react-router:$version-6.28.2")
                implementation(libs.kotlinx.serialization.json)
                implementation("${prefix}css:$version")
                implementation("${prefix}browser:$version")
                implementation("${prefix}js:$version")
                implementation("${prefix}styled-next:$version")
                implementation("${prefix}js-core:$version")
                implementation("${prefix}emotion:$version")
                implementation("${prefix}mui-material:$version-5.16.14")
            }
        }
    }
}
tasks.withType<Copy> {
    duplicatesStrategy = DuplicatesStrategy.INCLUDE
}

NB: the source set (with its directory) you named main should be renamed to jsMain

[Remy Benza]

tried that, but then all my code inside my own web module is even no longer clickable / reachable. Meaning my own classes

[Remy Benza]

i just pasted your code from above into the web module build.gradle file

[Remy Benza]

when I wa

[Remy Benza]

RecordingManager is code from the web module itself, when i switch back to the 'old' js plugin it works normally again

[Artem Kobzar]

Even restarting of the IDEA doesn't help?

[Remy Benza]

I'll do a invalidate cache / restart now

[Artem Kobzar]

Hmm, it's weird. Could you please share the version of the multiplatform plugin you use?

[Remy Benza]

below my project wide build.gradle

[Remy Benza]

// Project global build.gradle

plugins {
val kotlinVersion = "2.1.20"
// KSP plugin
id("com.google.devtools.ksp") version "$kotlinVersion-2.0.0" apply false

// Android plugins
id("com.android.application") version "8.8.2" apply false
id("org.jetbrains.kotlin.android") version kotlinVersion apply false

// Kotlin Multiplatform libs
kotlin("multiplatform") version kotlinVersion apply false
kotlin("plugin.serialization") version kotlinVersion apply false
}



buildscript {
repositories {
google()
mavenCentral()
gradlePluginPortal()
maven { url = uri("<https://jitpack.io>") }
}

dependencies {
val kotlinVersion = libs.versions.kotlin
classpath("com.android.tools.build:gradle:8.8.2")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
classpath("org.jetbrains.kotlin:kotlin-serialization:$kotlinVersion")
classpath("com.google.dagger:hilt-android-gradle-plugin:2.56.1")
classpath("com.google.gms:google-services:4.4.2")
classpath("com.google.firebase:firebase-crashlytics-gradle:3.0.3")
}

}

[Remy Benza]

libs.versions.kotlin is also 2.1.20, for some reason i could not reference this toml file version inside plugins {} block

[Remy Benza]

im now seeing this in build log

Registered task dependencies: androidApp:releaseCompileClasspath
Skipping misunderstood TO dep string: project :shared
Skipping misunderstood TO dep string: com.google.firebase:firebase-analytics
Skipping misunderstood TO dep string: com.google.firebase:firebase-crashlytics
Skipping misunderstood TO dep string: com.google.firebase:firebase-appcheck-debug
Skipping misunderstood TO dep string: com.google.firebase:firebase-appcheck-playintegrity
Skipping misunderstood TO dep string: com.google.firebase:firebase-perf
Skipping misunderstood TO dep string: com.google.firebase:firebase-messaging
Skipping misunderstood TO dep string: com.squareup.okhttp3:okhttp
Skipping misunderstood TO dep string: com.squareup.okhttp3:logging-interceptor
Skipping misunderstood TO dep string: org.jetbrains.kotlin:kotlin-reflect
Starting dependency analysis
Registered task dependencies: androidApp:kotlinCompilerPluginClasspathRelease
Starting dependency analysis
Registered task dependencies: androidApp:kotlinCompilerPluginClasspathReleaseUnitTest
Starting dependency analysis
Variant Selection Exception: org.gradle.internal.component.resolution.failure.exception.VariantSelectionByAttributesException caused by Resolution Failure: org.gradle.internal.component.resolution.failure.type.NoCompatibleVariantsFailure
Variant Selection Exception: org.gradle.internal.componen

[Remy Benza]

not sure what it means

[Remy Benza]

should i downgrade to different kotlin version?

[Remy Benza]

@Artem Kobzar THANK YOU

[Remy Benza]

all it took was renaming my folder 'main' to 'jsMain'

[Remy Benza]

inside the web module