Hi there! Is there a thorough documentation somewhere on how to use Kotlin MPP with a Javascript browser target? I've been struggling for hours to get it working but no luck so far. I have a simple function:

fun main() {
    document.addEventListener("DOMContentLoaded", object : EventListener {
        override fun handleEvent(event: Event) {
            println("Foobar")
        }
    })
}

and the corresponding Gradle setup:

plugins {
    kotlinMultiplatform
}

kotlin {

    js {
        browser()
    }
}

but I can't see "Foobar" printed and if I just copy the generated code into my browser's console it says

Error loading module 'mymodule'. Its dependency 'kotlin' was not found

. Can someone point me to the docs so I can figure out how to get this working (and also solve a bunch of other issues like how to rename my module and how to run it in dev mode)?

For the people who are using React with Kotlin/JS, how do you pass functions to child components, like with the onClick attribute? I read the article below about issues with passing lambdas defined in the render method as props because it creates a new instance of the lambda each time the render method is called, so what is the technique you all use to get past that? https://discuss.kotlinlang.org/t/react-in-kotlin-js-what-i-learned-long-but-useful-read/16168

in my multiplatform project i am doing

includeBuild()

in gradle and substitute for a dev version of a dependency this works fine for

browserProductionWebpack

but it seems like

browserDevelopmentWebpack

is choking on it oh, btw i am using 1.3.70-eap-184 will try to make a simple repo for reproduction and create a issue later this is the error the wepack process spits out:

ERROR in ./kotlin/pentagame-frontend.js
  Module not found: Error: Can't resolve 'ksvg' in '/home/nikky/dev/pentagame/build/js/packages/pentagame-frontend/kotlin'
   @ ./kotlin/pentagame-frontend.js 3075:370-385
   @ multi ./kotlin/pentagame-frontend.js

Is there a sample project available that shows how I need to have my build.gradle.kts file setup for multiplatform with Kotlin/Js and Kotlin/JVM?

and when do i need a library to parse/make json?

I am trying to test the JS part of my [FirebaseMultiplatform](https://github.com/lamba92/firebase-multiplatform/) library. But when using it inside a Kotlin/JS project the webpack errors with:

text
ERROR in D:/Progetti/Android-Application/build/js/packages_imported/firebase-multiplatform-auth/0.1.8/firebase-multiplatform-auth.js
Module not found: Error: Can't resolve 'firebase.auth.ActionCodeInfo' in 'D:\Progetti\Android-Application\build\js\packages_imported\firebase-multiplatform-auth\0.1.8'
 @ D:/Progetti/Android-Application/build/js/packages_imported/firebase-multiplatform-auth/0.1.8/firebase-multiplatform-auth.js 3:4-144
 @ ../my-application-kodein-di/kotlin/my-application-kodein-di.js
 @ ./kotlin/my-application-web-client-2.js
 @ multi ./kotlin/my-application-web-client-2.js

Now,

firebase.auth.ActionCodeInfo

is actually a class from the Firebase JS library for which [Dukat](https://github.com/Kotlin/dukat/) wrote [this](https://github.com/lamba92/firebase-multiplatform/blob/9dccf3e1c8b19b5181e8f02266bf6775ecd53f2c/core/src/jsMain/kotlin/firebase/auth/index.firebase.auth.module_firebase.kt#L41-L44) (that i rearranged into packages). Why does this infernal webpack machinery looks for it inside my library instead of the Firebase one?

Is there any documentation/tutorial/sample about setting up gradle kotlin js react project? Everything I can find is either based on npm, not gradle (npm create kotlin react command) or on older

kotlin-frontend-plugin

. For example [modules page](https://kotlinlang.org/docs/reference/js-modules.html) mentions

compileKotlin2Js

config option which is not present in the new kotlin plugin.

I am getting the below error when I use npm dependencies in my grade.build.kts file and then sync in IntelliJ:

I am confused: In the section on calling Kotlin from JavaScript the following line: "_So if you name your module as myModule, all declarations are available to JavaScript via myModule object_" Where in Kotlin do I determine the module name? In Kotlin I can create package or class or object. Which becomes the module?

How do I invoke each of these assuming I have configured "umd" as moduleKind

I see the docs were updated today. They look great by the way Kotlin/Js team, such a huge improvement. Looking at them solved my problem above.

is it possible to extend an external class in KotlinJS? This is what I've tried so far:

open external class Tensor {
...
}
fun Tensor.someInternalFunction() {
...
}

I started migrating from

kotlin2js

&

org.jetbrains.kotlin.frontend

to the new

org.jetbrains.kotlin.js

plugin. Re-writing my

:web

module to be the same as the newly released version for "Building Web Applications with React and Kotlin/JS" worked well, and now I want to make use of another module inside the same project. Previously, in my

build.gradle

, I had the following declaration:

apply plugin: 'kotlin2js'
apply plugin: 'org.jetbrains.kotlin.frontend'

dependencies {
  compile project(':api')
  //...
}

and now I have, on my `build.gradle.kts`:

plugins {
  id("org.jetbrains.kotlin.js")
}

group = "org.example"
version = "1.0-SNAPSHOT"

dependencies {
  implementation(project(":api"))
  //...
}

As I try to run

./gradlew :web:browserDevelopmentRun

, I get the error

project ':api' is not configured for JS usage

Previously it was working fine. My

:api

build.gradle

is as follows:

apply plugin: 'org.jetbrains.kotlin.multiplatform'
apply plugin: 'kotlinx-serialization'

archivesBaseName = 'api'

kotlin {
  js {
    compilations.main.kotlinOptions {
      moduleKind = 'umd'
    }
  }

  sourceSets {
    commonMain {
      dependencies {
        api deps.kotlin.stdlib.common
        api deps.kotlin.coroutines.common
        api project(':backend:model')
        implementation deps.kotlin.serialization.common
      }
    }
    jsMain {
      dependencies {
        api deps.kotlin.stdlib.js
        api deps.kotlin.coroutines.js
        api deps.kotlin.serialization.js
      }
    }
  }
}

Hello Everyone! I noticed an odd quirk when you have a Kotlin/JS module that depends on a multiplatform module: If you have an enum in the multiplatform project and you use

EnumClassHere.values()

in the Kotlin/JS project, it fails with

TypeError: can't access property "values", $module$loritta_<http://api.net|api.net>.perfectdreams.loritta.api.commands.CommandCategory is undefined

As a workaround I added this to my enum class in the multiplatform project

init {
   CommandCategory.values().forEach {}
}

...and it worked without any issues! Is this a known issue? (and yes, I did try disabling Kotlin DCE on my JS project, but even with it disabled the error still happened)

I have a small concern. After building a JS module with multi platform the module index.js seems to be 2mb? I have not ran this through DCE as of yet, but I’m wondering if this is something others have seen?

Hi there. How can I fix following error with Gradle Kotlin/JS plugin(org.jetbrains.kotlin.js)?

When accessing module declarations from UMD, they must be marked by both @JsModule and @JsNonModule

I'm developping for browser, and using react-redux. I saw react-redux code, only annotated

@JsModule("react-redux")

,but no annotation

@NonJsModule

.

Applying it like this does get me a folder with contents from the output of dce, but I want to configure it to not eliminate certain classes

Hey all, I created this stackoverflow issue for a problem I'm having with Kotlin/Js and Kotlin/Jvm MPP. If anyone has some suggestions it would be a big help. https://stackoverflow.com/questions/60208710/spring-boot-gradle-dependencies-in-kotlin-multiplatform

Does anyone know if there is a way to get complete stacktraces with coroutines in Kotlin/JS?

I’m noticing that Dukat isn’t working. I’m on 1.3.61. I’ve placed

kotlin.js.experimental.generateKotlinExternals=true

in my

settings.gradle

, I’ve added npm dependencies:

plugins {
    kotlin("js")
}

kotlin {
    target {
        nodejs()
    }

    sourceSets {
        val main by getting {
            dependencies {
                implementation(Deps.kotlin.stdlib.js)

                npm("firebase-admin", "8.6.0")
                npm("firebase-functions", "3.3.0")
                npm("twilio", "3.39.4")
                npm("left-pad", "1.3.0")
            }
        }
        val test by getting {
            dependencies {
                implementation(Deps.kotlin.test.js)
            }
        }
    }
}

and I’m running the

generateExternals

command, but I still can’t see any generated files in the build directory, or any code completion. Anyone have any ideas? I’ve also tried the 1.3.70 eap, with no results.

Wow, I’m super disappointed in dukat. I stopped using kotlin-js 2 years ago because I’d always encounter issues with

ts2kt

and the bindings that they generate. I was excited a year or so back when I read about dukat because it was recognition that ts2kt was broken, and needed to be more than just a side project, but rather a core part of the experience. I’ve sunk about 6 hours now into dukat, and I’m walking away with about the same level experience I had with ts2kt. I’m getting several random crashes for popular js libs (like firebase), and the lib that I did get to work (twilio) has the majority of the API libs stubbed out incorrectly with

Any

, defeating the entire point.

I still can't use Kotlin/JS because of this :-/

Where should I be filing dukat issues? I have an issue that’s still open in that project from 2017. https://github.com/Kotlin/dukat/issues/182 Either dukat is not a priority, or I should be filing the tickets somewhere else.

does the Kotlin/Js plugin version 1.3.70-eap have the DCE enabled by default?

In case anyone runs into the same problem I had with setting up Spring Boot with Kotlin/Js in a multiplatform project here is a starter that has it all setup for you. Because the Spring Boot plugin doesn't play well with the Kotlin MPP plugin its a nightmare to setup from scratch. https://github.com/gbaldeck/spring-kotlin-fullstack

Hi there! We are currently trying to use Kotlin multiplatform to generate client libraries for JVM and the Node.js ecosystem. There, we got an issue with our generated commonjs artifacts for the node.js target. Our goal is to publish the generated nodejs client library in a NPM registry, but we run into troubles there. I'm not sure if it's a problem of my understanding, a configuration issue or we're trying to do something that is not (yet) really supported. Please bear with me that I try to write my understanding and my situation in somewhat more detail. • The generated client library at ./kotlin/build/js/packages/<project-name> has a package.json file with dependencies that can not be found on npm.js org. For this reason, it doesn't work standalone if I want to publish my generated client lib itself as a NPM package. • If you try to npm install the generated artifact, it will therefore look for packages like https://www.npmjs.com/package/ktor-ktor-client-js which are not published (..yet?) • There are effective dependencies, which are not specified in the package.json of either the generated library file or the packages_imported npm project. E.g. "node-fetch" is a dependency of ktor-ktor-client-core, but nowhere defined as a package.json dependency • The actual missing modules are found in ../packages_imported. • The actual project at build/js itself is a yarn multi-workspace project which now takes those packages_imported. This works if you intend to run the node.js project as a standalone project because of yarn features (dependency resolution). • My open Question is: Is is currently possible to get a standalone working, npm publish compatible

js("node").compilations["main"]

artifact? Thank you for your time and effort you're putting into this! The relevant part of our build.gradle.kts

js("node") {
        nodejs {

        }
        compilations.all {
            compileKotlinTask.kotlinOptions {
                metaInfo              = true
                sourceMap             = true
                moduleKind            = "commonjs"
                sourceMapEmbedSources = null
            }
        }
    }
[...]
        js("node").compilations["main"].defaultSourceSet {
            dependencies {
                implementation(kotlin("stdlib-js"))
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-js:$coroutinesVersion")

                implementation("io.ktor:ktor-client-js:$ktorVersion")
                implementation("io.ktor:ktor-client-serialization-js:$ktorVersion")
                implementation("io.ktor:ktor-client-json-js:$ktorVersion")
                implementation("org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:$serializationVersion")
                implementation("io.ktor:ktor-client-auth-js:$ktorVersion")

                implementation(npm("uuid", "3.3.3"))
            }
        }

I keep running into this issue -

TypeError: tmp$.iterator is not a function

while iterating a nullable list type. (Kotlin/js - 1.3.61). Also, this is an MPP project using coroutines. This error occurs inside a coroutine Ex -

val marked: List<User> = dto.accounts?.map { User(it) } ?: listOf()

// where accounts is of type List<T>?

Is there a faster way to create a js object yet, or is

js("{}")

and then manually populating it with data still the most convenient?

How should I be getting all my kotlin-js compiled files, my kotlin dependency outputs, and my npm libraries all in one place? I used to use the dce plugin, but that doesn’t seem to work with the declared npm dependencies. Surely I’m overlooking something