Hi guys. How are you? I created a KMP library to s...

# multiplatform

[nguyen tuan]

Hi guys. How are you?
I created a KMP library to share business logic between Android, Ios and Reactjs. Currently, I can do it with Android and Ios by including local project, but I cannot import that module with Reactjs.
Below is my setup inside KMP build.gradle.
Can you help me?

plugins {
    kotlin("multiplatform")
    kotlin("native.cocoapods")
    id("com.android.library")
}

kotlin {
    android()
    iosX64()
    iosArm64()
    iosSimulatorArm64()


    js(IR) {
        nodejs()
        binaries.library()
    }

    cocoapods {
        summary = "Some description for the Shared Module"
        homepage = "Link to the Shared Module homepage"
        version = "1.0"
        ios.deploymentTarget = "14.1"
        framework {
            baseName = "kotlinmultiplatformsharedmodule"
        }
    }

    sourceSets {
        val commonMain by getting
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
        val androidMain by getting
        val androidTest by getting
        val iosX64Main by getting
        val iosArm64Main by getting
        val iosSimulatorArm64Main by getting

        val iosMain by creating {
            iosX64Main.dependsOn(this)
            iosArm64Main.dependsOn(this)
            iosSimulatorArm64Main.dependsOn(this)
        }
        val iosX64Test by getting
        val iosArm64Test by getting
        val iosSimulatorArm64Test by getting
        val iosTest by creating {
            iosX64Test.dependsOn(this)
            iosArm64Test.dependsOn(this)
            iosSimulatorArm64Test.dependsOn(this)
        }

        val mobileMain by creating {
            dependsOn(commonMain)
            androidMain.dependsOn(this)
            iosMain.dependsOn(this)
        }
        val mobileTest by creating {
            dependsOn(commonTest)
            androidTest.dependsOn(this)
            iosTest.dependsOn(this)
        }
        val jsMain by getting
        val jsTest by getting
    }
}

tasks.register("nodeJsSetup") {
    group = "setup"
    description = "Setup Node.js for Kotlin Multiplatform project"

    doLast {
        // Perform necessary Node.js setup steps here
        exec {
            commandLine("npm", "install") // For npm
            // Or commandLine("yarn", "install") // For Yarn
        }
    }
}

tasks.named("compileKotlinJs").configure {
    dependsOn("nodeJsSetup")
}

android {
    namespace = "com.example.kotlinmultiplatformsharedmodule"
    compileSdk = 32
    defaultConfig {
        minSdk = 21
        targetSdk = 32
    }
}
tasks.clean {
    doLast {
        tasks.register<Delete>("clean") {
            delete(rootProject.buildDir)
        }
    }
}

[Taush Sampley]

If I understand correctly, it would help to also see your ReactJs project setup that is consuming this module. What is the error you're seeing when trying to import this module?

[nguyen tuan]

@Taush Sampley I already import kmm library inside package.json like this:
“dependencies”: {
“react”: “^18.0.0”,
“react-dom”: “^18.0.0”,
“kmp-lib”: “file:../kmmsharelib”
},
After that I tried to call method greeting inside Greeting class of KMM common folder. I keep getting not resolved import dependencies when build reactjs app:

[nguyen tuan]

This is the code inside Greeting class of KMM common folder.

[khalid64927]

I believe in ReactJS project you need to point to correct generated js file/tgz file. I’m using npm publish plugin to generate js files.

[nguyen tuan]

@khalid64927 After successfully add npm-publish to KMP gradle, I still get the error message cannot resolve import when run reactjs app.
Can you please help me?

[khalid64927]

@nguyen tuan Run below command
./gradlew kmmsharedlib:packJsPackage

This will generate .tgz file in "kmmsharedlib/build/package/js/<filename>.tgz "
then link that file in your React package.json as file dependency.

[nguyen tuan]

Hi @khalid64927
when run above command I keep getting this error:
Could not determine the dependencies of task ‘:kotlinYarnSetup’.

Build was configured to prefer settings repositories over project repositories but repository ‘Yarn Distributions at https://github.com/yarnpkg/yarn/releases/download’ was added by unknown code.

I also tryied to add yarn download inside settings.gradle but i not work.
Can you give me some advises?

[khalid64927]

Run ./gradlew kotlinYarnSetup

[nguyen tuan]

I tried but it keep error:
TaskDependencyResolveException: Could not determine the dependencies of task ‘:kotlinYarnSetup’.

[khalid64927]

First time you have to run this command

./gradlew kotlinStoreYarnLock

And if you get below error follow instruction

* What went wrong:
Execution failed for task ':kotlinStoreYarnLock'.
> yarn.lock was changed. Run the `kotlinUpgradeYarnLock` task to actualize yarn.lock file

Then run

./gradlew kotlinUpgradeYarnLock

[nguyen tuan]

If I run ‘./gradlew kotlinStoreYarnLock’ it will show error:
Could not determine the dependencies of task ‘:kotlinYarnSetup’.

Build was configured to prefer settings repositories over project repositories but repository ‘Yarn Distributions at https://github.com/yarnpkg/yarn/releases/download’ was added by unknown code.

After that if i run ./gradlew kotlinUpgradeYarnLock, it will got this error message:
Task ‘kotlinUpgradeYarnLock’ not found in root project ‘kmmsharelib’.
What should i do now?

[khalid64927]

You should replace “kmmsharedlib” module with whatever your module is. I think you now have it named “kotlinmultiplatformsharedmodule”.

[nguyen tuan]

Sorry I don’t get your point. I only can find that module name use inside setting.gradle. Should i change it in here?