Currently:

@file:JsModule("react-plotly.js")
@file:JsNonModule

import react.*

@JsName("Plot")
external val reactPlot: RClass<dynamic>

But getting:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Welcome`.
    in Welcome react.development.js:315
    React 3
    child_5 sampleproject.js:20925
    child_6 sampleproject.js:20931
    invoke_100 sampleproject.js:20934
    render_0 sampleproject.js:25196
    invoke_103 sampleproject.js:21108
    factory_40 sampleproject.js:21164
    buildElements sampleproject.js:21020
    render_1 sampleproject.js:21129
    render sampleproject.js:21132
    React 13
    render_0 sampleproject.js:24780
    render$default sampleproject.js:24785
    invoke_129 sampleproject.js:25057
    factory_45 sampleproject.js:25070
    (Async: EventHandlerNonNull)
    main sampleproject.js:25010
    <anonymous> sampleproject.js:25508
    <anonymous> sampleproject.js:3
    <anonymous> sampleproject.js:15
    <anonymous> sampleproject.js:25490
    js sampleproject.js:707
    __webpack_require__ sampleproject.js:30
    0 sampleproject.js:719
    __webpack_require__ sampleproject.js:30
    <anonymous> sampleproject.js:94
    <anonymous> sampleproject.js:97
    webpackUniversalModuleDefinition sampleproject.js:9
    <anonymous> sampleproject.js:10

Hey all … I posted this in #multiplatform but got no response. Hopefully someone here can help me with this javascript issue: I’ve created a new multiplatform project that creates a library and one of its targets is javascript. I’m trying to produce a package that I can publish to an npm registry. Everything complies OK, but the output for the js target seems …. odd.  The produced 

package.json

 files have a few problems: 1. they have dependencies with “hardcoded” absolute file paths, like:  

"kotlin": "file:/Users/brad.ball/dev/multiplatform/new/wager-utils/build/js/packages_imported/kotlin/1.5.0",

2. the dependencies list contains entries for 

kotlin-test-js-runner

 and 

kotlin-test

 . Why would those be dependencies for a published package? Seems like at best they should be devDependencies. With the hard coded file paths, you can’t really publish the package or use it anywhere but on the machine where it was generated… The full package.json output is included in the replies thread… Am I doing something wrong? I have a pretty standard gradle config, haven’t really changed much from what was produced by IntelliJ when creating the project. (edited)

Editing a Kotlin/JS project, suddenly ran out of memory. Killed IDEA. Now when I try to re-load the project I get “Preparing workspace...” and the whole thing hangs. (Someone else reported the same issue before I did.) https://youtrack.jetbrains.com/issue/IDEA-269204 It looks like JetBrains recommends falling back to a 1.4 Kotlin in the IDE. Not sure how to do that since I can’t open the project .. but I will look around. Any advice? Thanks!

I’ve seen a few people wanting to compile Kotlin to node citing AWS cold start times - this article suggests there’s not much between node and JVM cold starts: https://mikhail.io/serverless/coldstarts/aws/ Do people have different experiences?

👋 I'm trying to understand Kotlin/JS and how module system is working. I didn't succeed to do what I want. • I have a gradle kotlin multiplatform configured to produce some javascript using only the browser configuration.

mpp.js {
       this.browser {
                     this.webpackTask {
                     this.compilation.kotlinOptions {
                     this.sourceMap = true
                     this.sourceMapEmbedSources = "always"
                     this.freeCompilerArgs += listOf("-Xopt-in=kotlin.ExperimentalStdlibApi")
               }
           }
     }
    this.binaries.executable()
}

• I'm trying to expose one method of my kotlin code and using it in my webpage.

package my.module
@JsExport fun startCube() { // ... }

• I'm trying to import this module from my

index.html

. And it's not working 🤔

<script type="module">
    import './my-module.js'; // the path is correct
</script>

• I got this error message :

Uncaught TypeError: Cannot set property 'my-module.js' of undefined
    at webpackUniversalModuleDefinition (minigdx-docs.js:9)

• By looking at the code, I see that the module UMD "module system" try to start and load the module but failed to do so:

root["my-module"] = factory(); // root is undefined

• I look in the Kotlin/JS documentation and how javascript module is working but I failed to understand what's wrong 🤔 (I far to be at ease in the javascript ecosystem) • &TLDR: Do you have any advise, example to load a kotlin js module from a browser?

Hi all, what is the best approach for integrating https://github.com/visjs/vis-network into my kotlin/react project, it has https://github.com/visjs/vis-network/tree/master/types d.ts files inside here. Should I copy all these files and run Dukat on that and continue from that point?

This message was deleted.

I divided the project into subprojects, I am trying to implement lazy loading, I described the import function like this:

external fun <T> import(path: String): Promise<T>

or

external fun <dynamic> import(path: String): Promise<dynamic>

I try to use like this:

val SomePage = rLazy<dynamic> {
    { import<dynamic>("./somePage.js") }
}

I get the error: Type mismatch. Required: RClass<TypeVariable(P)> Found: () → Promise<dynamic> Why? I don't understand by the signature, I give him a lambda and he sees a promise inside the lambda.

Hello friends, Javascript newbie here. My command-line tool worked fine under Node.js with

./gradlew jsNodeRun

Any pointers on how I could publish it on npmjs.org so that people can install it with

$ npm install -g kotlin-cli-starter

https://github.com/jmfayard/kotlin-cli-starter

Hey folks, I'm looking to integrate Kotlin/JS into an existing KMM project and just doing some experimenting here before diving in, but running into some issues as all samples are based around the web project being built with kotlin. Instead we want to set it up that the web project knows nothing about kotlin, the web project just imports a javascript package that happens to contain all the shared application code. In Andorid/iOS the common code portion spits out as an android lib/xcode framework. I've got as far as generating a javascript module (using Kotlin/JS IR) but am stuck with this error - and a lack of knowledge of the JS ecosystem:

Cannot find module 'shared' or its corresponding type declarations.

The module is imported to the web project with

"shared": "file:../build/js/packages/shared"

and into the javascript file with

import { Platform } from 'shared';

Any idea where I may be going wrong?

Dear all, I am trying to import files generated from multiplatform basic project into e.g. Visual Code Studio. First of all, I am completely newbie in JS, so please, be kind 🙂 I have simple class with only one helloWorld() function as below

import kotlin.js.JsExport

@JsExport
fun helloWorld(): String {
    return "Hello World"
}

setup in build.gradle.kts is

js(IR) {
        browser {
        }
        binaries.executable()
    }

After importation generated files in VCS, my kotlin function is not visible (Uncaught ReferenceError: helloWorld is not defined) and generated files are

Can anyone help me to understand the Kotlin JS plugin? I understand it installs NPM and uses yarn to download dependencies. Are there any local caches generated as part of the build? If so, where are they, or is there a gradle job that cleans these? The reason for asking is that my node_modules ends up with a corrupted dependency (@icons/material) and I'm guessing it's coming from a local cache but gradle clean isn't fixing it and that's all I can guess.

Hi, I am trying to import module in kotlinJs

@JsModule("botui")
external class BotUI(name: String) {}

val bot = BotUI("test")

and I am getting error

$module.$botui is not a constructor

botui module exports only one class as a default. Should I use different approach when module has only default export?

Are there any changes in RegEx implementation in Kotlin/JS 1.5.0? After upgrade from 1.4 to 1.5 I have an error like this

Uncaught SyntaxError: raw bracket is not allowed in regular expression with unicode flag

in

kotlin.js:44848

probably with this code:

fun validateEmail(value: String): Boolean {
    return value.matches("^([a-zA-Z0-9\\-_.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z\\-0-9]{2,}))$".toRegex())
}

❗Hi, folks! Few months ago @Sebastian Aigner wrote an article about migrating from Legacy BE to IR. He described all major cases/issues which can be faced during the migration, but I’m gathering additional information on things that need to be done for successful migration. If you have such cases in your projects - leave a comment in thread with general description/sample/Youtrack ticket or write me direct message :thread-please: Your cases will help us to improve the experience of a migration. More cases will be covered - more comfortable this process will be! In advance, thank’s everyone for the response!

I made a demo that shows how to use webworkers in Kotlin/JS: https://github.com/ethanmdavidson/KotlinJSWebWorkerDemo It involves building multiple .js files, which is also something I've seen people asking about. Check it out and let me know what you think!

Wanted to share some resources for getting Tailwind CSS working in a Kotlin/JS (really, MPP) project. I was working on this over the past month and it was surprisingly hard (not many resources online and I’m new to this whole stack). • Getting things working for development: https://github.com/nanodeath/kotlinjs-tailwindcss • Expanding on above to optimize for production: https://vple.me/posts/purging-tailwindcss-with-kotlinjs/ And for completeness, an earlier thread: https://kotlinlang.slack.com/archives/C0B8L3U69/p1600892124011900

How do I import side-effects in kotlin? Something like

import "some/side/effect.js

in javascript?

I have a Full stack project on kotlin multiplatform. One is jvm and other is js. jvm compiling is faster but js one is very slow. Any tips to fasten the compiling of kotlin/js codebase?

Hi. Does anyone have a working example of using Kotlin JS to create an Azure Function? I assume it has to be built locally and then published. But I'm not sure how to structure the js to meet the following requirements: https://docs.microsoft.com/en-us/azure/azure-functions/functions-reference-node?tabs=v2#configure-function-entry-point. Thanks for any help/guidance

I'm facing a very odd issue where upgrading from 1.4.32 to 1.5.0 breaks my Kotlin/JS project, it compiles without any issues but the code fails because "CancelledException" (a typealias in Ktor) is not present. This issue is also present in a development webpack so I don't think it is a DCE issue. (Legacy compiler)

Does anybody have experience making a Kotlin JS+IR share “resources” with a downstream Kotlin JS+IR project? Trying to clean something up here and any clues could be useful

Hey guys, is it known that

jsBrowserProductionWebpack

gradle task doesn't update the distributions js file sometimes when in watch mode

-t

?

My Kotlin/JS projects don't work after upgrade from Kotlin 1.5.0 to Kotlin 1.5.10 because

build.gradle.kts

doesn't compile. What happened?

Hi, all our builds have started failing with:

REAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

I think I understand the issue itself, but I don't get why it started this morning (yesterday builds were ok, we upgraded to Kotlin 1.5.0 and webpack 5 couple weeks ago) Any idea?

Is there a way to split in chunks the generated js file? I've this config

js("js", IR) {
        browser()
        binaries.executable()
        useCommonJs()
    }

and I'm using compileProductionExecutableKotlinJs to create the .js and d.ts that I copy to a typescript react project, but the js is super large (near 4mb)

Any ETA on getting https://github.com/Kotlin/kotlinx-nodejs out of jcenter?

Need Help Guys (Regex) : I have a regex and it works as expected in All Platforms except Kotlin/JS REGEX:

"""ytInitialPlayerResponse\s*=\s*(\{.+?\})\;var meta""".toRegex()

*ERROR*(only in Kotlin/JS):

SyntaxError: Invalid regular expression: /ytInitialPlayerResponse\s*=\s*(\{.+?\})\;var meta/: *Invalid escape*

at <global>.new RegExp(<anonymous>)

However this same regex works fine online in a Regex Editor/Tester , link: https://regex101.com/r/WZT1Pr/1/ Any Help would be Appreciated!

hiya, I am a very new to kotlinJS and have a question regarding transporting casting objects sent over http - from the server i send a Response

@Serializable
data class ResponseDomain constructor(
    val payload: List<Domain> = listOf(),
    val errors: List<ErrorDomain> = listOf()
)

where domain is a kotlin interface that all the domain data obects implement and they are serialized using kotlin serialization(polymorphic) In my frontend I fetch the url like so:

val response = window
    .fetch("$BASE_URL/playlists")
    .await()
    .json()
    .await()

which has a payload of List<PlaylistDomain>

@Serializable
data class PlaylistDomain constructor(
    val id: Long? = null,
    val title: String,
    val items: List<PlaylistItemDomain> = listOf(),
    ...
) : Domain

but casting back to ResponseDomain fails

(response as ResponseDomain)

with and

Illegal cast

error should i just send the response as text/plain (not application/json) and use kotlin deserialisation to get a ResponseDomain? seems like since the browser parses my json to json object i seem to not be able to cast to my kotlin object type - obvs i dont want to map the whole thing from json to domain manually but in the kotlin js tutorial (the video browser one) they map the response as a cast (

response as Video

). maybe it only works for simple objects?