Hey folks, I am trying to configure npm dependenci...

# javascript

[Tobi]

Hey folks, I am trying to configure npm dependencies through gradle, but apparently I am doing it wrong 😕

My build.gradle looks like this and I am getting the following error:
Could not find method npm() for arguments [org.jetbrains:kotlin-react, 16.9.0-pre.83] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Thanks in advance.

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.61'
    id 'org.jetbrains.kotlin.plugin.serialization' version '1.3.61'
}

group 'org.example'
version '1.0-SNAPSHOT'

repositories {
    maven {
        url "<https://dl.bintray.com/kotlin/kotlin-eap>"
    }
    mavenCentral()
    jcenter()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:0.14.0"
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.3.2'
    implementation "io.ktor:ktor-client-js:1.2.6"
    implementation "io.ktor:ktor-client-json-js:1.2.6"
    implementation("io.ktor:ktor-client-serialization-js:1.2.6")
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
    implementation(npm("org.jetbrains:kotlin-react", "16.9.0-pre.83"))
    implementation(npm("org.jetbrains:kotlin-react-dom", "16.9.0-pre.83"))

}

kotlin {
    target {
        browser {}
        nodejs {}
    }
}

[Robert Jaros]

You should use npm() dependencies for npmjs deps. kotlin-react or kotlin-react-dom are standard gradle/maven artifacts so just use implementation alone

[Tobi]

Mmh, I am trying to follow the sample from this talk and he is using the npm prefix:

https://www.youtube.com/watch?v=_AhTzpIQJTw▾

Also, when I remove npm I get Could not find org.jetbrains:kotlin-react:16.9.0-pre.83 🤔

[Robert Jaros]

@jetbrains/kotlin-react is a npmjs package (https://www.npmjs.com/package/@jetbrains/kotlin-react) but "org.jetbrains:kotlin-react" is a maven artifact (but you need maven { url = uri("<https://dl.bintray.com/kotlin/kotlin-js-wrappers>") } in your build.gradle repositories section).

[Robert Jaros]

it's published both on bintray and npm

[Robert Jaros]

you probably can use one or another but i'm not quite sure if there is any significant difference 😉

[Tobi]

Thanks Robert, we're getting closer 😅

But there still seems to be still an issue with the syntax. My gradle script uses goovy but the slides are in kotlin 😕

> Could not find method npm() for arguments [@jetbrains/kotlin-react, 16.9.0-pre.83] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.61'
    id 'org.jetbrains.kotlin.plugin.serialization' version '1.3.61'
}

group 'org.example'
version '1.0-SNAPSHOT'

repositories {
    maven {
        url "<https://dl.bintray.com/kotlin/kotlin-eap>"
    }
    maven {
        url "<https://dl.bintray.com/kotlin/kotlin-js-wrappers>"
    }
    mavenCentral()
    jcenter()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:0.14.0"
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.3.2'
    implementation "io.ktor:ktor-client-js:1.2.6"
    implementation "io.ktor:ktor-client-json-js:1.2.6"
    implementation("io.ktor:ktor-client-serialization-js:1.2.6")
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
    implementation npm("@jetbrains/kotlin-react", "16.9.0-pre.83")
    implementation npm("@jetbrains/kotlin-react-dom", "16.9.0-pre.83")
}

kotlin {
    target {
        browser {}
        nodejs {}
    }
}

[Robert Jaros]

I don't know how to use npm() with groovy syntax :(

[Robert Jaros]

I'm using kotlin dsl for my projects

[Ilya Goncharov [JB]]

Hi, in 1.3.61 you can’t declare npm dependencies in root ‘dependencies’ section
You need to declare it in source sets
’’’
kotlin {
sourceSets {
main {
dependencies {
implementation(npm(...))

}

}

}

}
‘‘‘

But since 1.3.70 declaration npm dependencies in root dependencies section will appear

[Tobi]

Thanks @Ilya Goncharov [JB]
The IDE seems to be happy about this, just that the compiler is still complaining :

> Task :compileKotlinJs FAILED
e: /Users/X/Documents/repos/cats-js/src/main/kotlin/main.kt: (2, 8): Unresolved reference: react

That's my buildscript:

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.61'
    id 'org.jetbrains.kotlin.plugin.serialization' version '1.3.61'
}

group 'org.example'
version '1.0-SNAPSHOT'

repositories {
    maven {
        url "<https://dl.bintray.com/kotlin/kotlin-eap>"
    }
    maven {
        url "<https://dl.bintray.com/kotlin/kotlin-js-wrappers>"
    }
    mavenCentral()
    jcenter()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:0.14.0"
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.3.2'
    implementation "io.ktor:ktor-client-js:1.2.6"
    implementation "io.ktor:ktor-client-json-js:1.2.6"
    implementation("io.ktor:ktor-client-serialization-js:1.2.6")
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin {
    target {
        browser {}
        nodejs {}
    }

    sourceSets {
        main {
            dependencies {
                implementation(npm("@jetbrains/kotlin-react", "16.9.0-pre.83"))
                implementation(npm("@jetbrains/kotlin-react-dom", "16.9.0-pre.83"))
            }
        }
    }
}

Any idea what's missing?

[Ilya Goncharov [JB]]

I think it is related with https://youtrack.jetbrains.com/issue/KT-35197
As a wa you can try to use appropriate maven dependencies of Kotlin/JS modules instead of npm

[Tobi]

Yes, you're right 🎉
Doing first a clean fixes it

[Tobi]

Now, the build is fine, but the browser is complaining 🤔

Uncaught Error: Cannot find module 'kotlin-react-dom'
    at webpackMissingModule (cats-js.js:3)
    at eval (cats-js.js:3)
    at eval (cats-js.js:8)
    at Object../kotlin/cats-js.js (cats-js.js:2327)
    at __webpack_require__ (cats-js.js:20)
    at Object.0 (cats-js.js:2339)
    at __webpack_require__ (cats-js.js:20)
    at cats-js.js:84
    at cats-js.js:87

[Tobi]

/kotlin/cats-js.js
Module not found: Error: Can't resolve 'kotlin-react' in '/Users/X/Documents/repos/cats-js/build/js/packages/cats-js/kotlin'

/kotlin/cats-js.js
Module not found: Error: Can't resolve 'kotlin-react-dom' in '/Users/X/Documents/repos/cats-js/build/js/packages/cats-js/kotlin'

[Tobi]

Mmh, the generated packages.json looks good and includes kotlin-react and kotlin-react-dom .

"dependencies": {
    "kotlin": "1.3.61",
    "kotlinx-serialization-kotlinx-serialization-runtime": "0.14.0",
    "ktor-ktor-client-js": "1.2.6",
    "ktor-ktor-client-core": "1.2.6",
    "ktor-ktor-http-cio": "1.2.6",
    "ktor-ktor-http": "1.2.6",
    "ktor-ktor-utils": "1.2.6",
    "kotlinx-io-kotlinx-coroutines-io": "0.1.16",
    "kotlinx-coroutines-core": "1.3.2-1.3.60",
    "kotlinx-io": "0.1.16",
    "kotlinx-atomicfu": "0.14.1",
    "ktor-ktor-client-json": "1.2.6",
    "ktor-ktor-client-serialization": "1.2.6",
    "kotlin-source-map-loader": "1.3.61",
    "kotlin-test-js-runner": "1.3.61",
    "kotlin-test": "1.3.61",
    "@jetbrains/kotlin-react": "16.9.0-pre.83",
    "@jetbrains/kotlin-react-dom": "16.9.0-pre.83",
    "text-encoding": "0.7.0"
  },

[Ilya Goncharov [JB]]

Ohh, yes, seems that, produced js contains import without scope ‘@jetbrains’
You can declare some hack for webpack for it in file in ‘webpack.config.d’ folder

https://github.com/mkraynov/kfsad/blob/kotlin-1.3.40-preview/client/webpack.config.d/03.resolve.js

[Tobi]

Thanks, this plus adding some dependencies from the linked sample made it work in the end 👍

[Paul N]

I'm just reading this as I have a very similar issue (see https://stackoverflow.com/questions/59602634/kotlin-js-isnt-picking-up-dependencies-from-gradle-implementationnpm-section-i )

Can you post your final working build.gradle.kts file ?

[Tobi]

I am using groovy, but here it is:
https://github.com/tobiasheine/cats-js/blob/master/build.gradle

[Paul N]

Thanks, that looks pretty similar to my kotlin version. In my case it seems that the dependencies end up here:

build/js/packages/myprojectname/package.json

which doesn't appear to be sufficient to allow the Kotlin to compile. I guess I'll start my own thread 🙂