I have a multiplatform project, with a shared module. When I run “assemble” on the js project, I get this error:

Execution failed for task ':shared:jsPackageJson'.

> NPM Dependencies already resolved and installed

at org.jetbrains.kotlin.gradle.targets.js.npm.KotlinNpmResolutionManager.requireConfiguringState$kotlin_gradle_plugin(KotlinNpmResolutionManager.kt:122)

at org.jetbrains.kotlin.gradle.targets.js.npm.tasks.KotlinPackageJsonTask.getCompilationResolver(KotlinPackageJsonTask.kt:26)

at org.jetbrains.kotlin.gradle.targets.js.npm.tasks.KotlinPackageJsonTask.getPackageJson(KotlinPackageJsonTask.kt:50)

any idea?

anyone knows how to get the

PATH_VALUE

value inside route() in Kotlin/React ?

browserRouter {
    switch {
        route("/country/*") {
            getCountry(PATH_VALUE.split("/")[2])
            ...
        }
	...
    }
}

Was nodejs require removed from stdlib in 1.4? Can't find it anymore

Is there anything I can do to reduce the size of the built .js file for a Kotlin/React project? For a relatively simple project the js file is 2.7 MB. I am using the gradle

build

command, which I guess it’s already doing DCE (Dead Code Elimination).

maybe im misunderstanding how this should work, but if i create a new object, it should not try to restore the state, right?

I am using styled.StyleSheet for CSS on Kotlin. And I would like to specify a value in percentage.

width = 50.percent

this doesn’t seem to be recognized what is the way to set a percentage value in Kotlin / CSS ?

Is it possible to have a callback (or something equivalent) in Kotlin/React to detect changes of the browser width? for example in case the browser window is resized

I would like to build two components in Kotlin/React:

MyElementsList

and

MyElement

MyElementsList(content = {
    MyElement(label = "a", value = "1")
    MyElement(label = "b", value = "2")
    MYElement(label = "c", value = "3")
})

what should be the definition of MyElementsList’s

content

parameter to be able to pass a block of components ? currently this is what I wrote, but it doesn’t seem to work:

fun RBuilder.ElementsList(content: (ReactElement) -> Unit) = child(ElementsList) {
    attrs {
        this.content = content
    }
}

external interface ElementsListProps : RProps {
    var content : (ReactElement) -> Unit
}

val ElementsList = functionalComponent<ElementsListProps> { props ->
    div {
        props.content
    }
}

it compiles, but it just shows

<div></div>

with no content the

MyElement

components are shown correctly if they are not enclosed in the

MyElementsList

component, so it looks like the issue is in the

MyElementsList

component

New to kotlin js here. Trying to get a usable set of externals for a node library web-request. What strategies are people using for creating externals? Using

generateExternals = true

from gradle doesn't give any opportunity to tweak the generated files, yet they all seem to need tweaking?

If instead of using

routeLink

, I want to change the url when I am clicking on a

td

element, what code should I use?

I would like to change the background color of a TR element onMouseOver

tr {
	attrs {
            onMouseOver = { HOW DO I CHANGE BG COLOR? }
	}
}

I guess I need to use the

onMouseOver

attribute. But how do I change the background color programmatically?

What would people here say about the performance of Kotlin/React? In my case, on desktop it feels ok, but on mobile it feels a bit too slow. I am using the standard compiler, as I have issues compiling with the IR compiler. The filesize is about 2.8MB, which is not very little. I read that with IR compiler the performance is supposed to improve. What is your current feeling about Kotlin/React? Are you using it for production projects? Are you waiting for better performance?

HI! Today I was trying to use TailwindCSS in my KotlinJS project and I can't find a way to do it. Can anyone help please? I didn't find anything in the documentation on how to link external CSS/PostCSS to my project. One thing I tried is posted on StackOverflow https://stackoverflow.com/questions/64029151/how-to-add-tailwindcss-to-kotlinjs. I will update the question if someone helps.. Thanks!

Hi there! I am switching a KotlinJS project to Kotlin 1.4.10. Everything is fine except that the Webpack-dev-server auto-reload does no longer work. Loading the page initially works. I am also running

gradle -t assemble

for continuous building. But as soon as I change some code I get this error:

Failed to compile.

(webpack)-dev-server/client?<http://localhost:8888>
Module build failed (from /PROJECT/build/js/node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/PROJECT/build/js/node_modules/webpack-dev-server/client/index.js'

I checked what is going on and indeed there is no webpack-dev-server present in build/js/node_modules folder. I should also mention that I have multiple JS modules in my project. So maybe they all write to the build/js/node_modules directory and interfere with each other, as they have different configurations. But even when only building a single module the problem stays the same. I then tried to be sneaky and added this to one of the build.gradle files

testImplementation npm("webpack-dev-server", "3.11.0")

Which in fact solves the issue with reload in so far, that the error does no longer show up and that in build/js/node_modules there truely is the webpack-dev-server dependency. But now the problem is: The page is reloading on code changes -> Good -> BUT: the changes are not picked up -> BAD Does anyone have an idea what to look for or some workaround? Thank you for reading 🙂

Hi. Android dev trying out multiplatform for our company. Got sharing to iOS working, and now working on Js part. Can I from Android Studio generate javascript from our shared library or do I need IntelliJ IDEA to do that?

I'd like to write some tests for my kotlin/js code in typescript, so that I can verify that I can call my lib that way I expect. I can create a whole new gradle subproject for this, but wondering if there is a simpler way to do it, where the typescript test source tree sits alongside my kotlin test source tree. How are other people approaching this?

I have been playing with

Kotlin/React

for a few days and I found it interesting. I was very amazed by the chance of creating HTML/CSS using Kotlin DSL rather than plain HTML/CSS. It is very powerful, as the the HTML and CSS are created automatically in an optimized way, without having to organize CSS classes yourself. However I was disappointed by the

performance

and by the

js filesize

. I am working on a multiplatform project, with a shared ViewModel, which on Android is plugged into a JetpackCompose UI and on iOS into SwiftUI. I am looking for the best way to use my declarativeUI-ready ViewModel on web too, via

StateFlow

. My basic requirements for a web framework are these 5: • collect a StateFlow emitted by the KMP shared ViewModel • create HTML components using Kotlin DSL • use a decent variety of already made web components • react to ViewModel state changes quickly • compile to a small JS filesize I just came across two interesting web frameworks written in Kotlin: `Fritz2`: https://www.fritz2.dev/ `KVision`: https://kvision.gitbook.io/ I would be very interesting to hear the experiences of people here, and how they compare them in terms of performance and filesize to React/Kotlin:

Hi all! I have a question ) I want to try gh-pages with Kotlin React. With regular REactJs - it is very simple and clear. But not with Kotlin, Troubles begin from first minute. I need modify package.json and i need to add custom node tasks and gradle task to run node task... Is there any clear documentation or articles how to do it? Thx

I just opened an issue to ask for an improvement of the JS filesize when Ktor is used as a simple Http Client: https://youtrack.jetbrains.com/issue/KT-42189 Please Upvote.

I would like to display data in a chart in a Kotlin/React project. Any suggestion? I found out about this graphs library: https://react-charts.js.org/ Can I easily use it in Kotlin/React?

How I can activate

@JsExport

for legacy mode in Kotlin 1.4?

hey, i am currently experimenting with a react app written in kotlinjs. i’m wondering how to use npm dependencies that are extending react functionality and how this plays together when using the kotlin-react wrapper provided by jetbrains. for instance i want to use this lib https://fkhadra.github.io/react-toastify/introduction i use a lot in react projects without kotlin and can confirm it works great and out of the box. the lib is completely written in typescript. so i would expect dukat to generate externals propperly when adding

implementation(npm(name = "react-toastify", version = "6.0.8", generateExternals = true))

to my build gradle. and it actually does but i am wondering how to use the generated externals. The libraries documentation says <ToastContainer …props /> has to be added to the apps JSX code. in my generated externals i found a

useToastContainer

function in the generated externals (see screenshot). no extension function to RBuilder or something that looks like i can just use it straight away questions: is there a naming convention that dukat uses to place the public functions of a dependency like prefixing the file that includes the api of a library with ‘use….’ ? if not, where are the public functions of library placed that has a dukat generated kotlin wrapper? do i need to write an extension function to RBuilder like `fun RBuilder.toastContainer() = useToastContainer()`to use it with kotlin react wrapper?

useToastContainer

wants

ToastContainerProps

which is an interface regarding to the generated externals i couldn’t find an implementation of that interface. I would assume an implementation with default values like the original lib has. so im wondering how to use this or do i have to implement it myself (would be extremely unhandy since it has a lot of props) ? what experiences do you have using libraries that extend react in kotlinjs?

I've finally made a plotly.kt build with IR (we won't support legacy mode after 0.3.0 release. The bundle including plotly-core itself is about 1 MB. I think it was at least twice that size before

Will the new version of DCE allow to remove some portion of code depending on a boolean value? It could be interesting to have some debug/logging code but with no performance or code size impact in production. @bashor?

Trying out the typescript definition generation from the IR compiler. It seems that there is a fair bit of code that doesn't seem all that useful, like the

component1()

methods used in destructuring - which I can't see being used in typescript or javascript. Are we likely to see cleaner typescript definitions from multiplatform kotlin libs as this shapes up towards GA status? Or am I perhaps just missing something?

Does DCE honor

@JsExport

annotations, or do we still need to manually pass in a list through

keep

?

Is there a way to pass arguments to a kotlin nodejs application?

For node.js kotlin/js project created with Intellij, is there some documentation on how to create an executable .js file that I can run outside the IDE environment? I have

binaries.executable()

set in the build.gradle, but I cannot find the generated production .js file(s) in the build directory.

Can the copy function of data classes be used in KotlinJS? I get "Uncaught TypeError: copy is not a function"