The

IR

compiler is able to generate separate files for each module, but it seems like the distribution generated by

jsBrowserDistribution

still produces a single large file. How can I generate a distribution with modularized output files (like they are generated in

build/compileSync/main/productionExecutable/kotlin/

for example)?

Hey guys I am looking for a sample kmp project with react if anyone can share some git repositories will be very helpful

Hey, I have a Kotlin lib which exports a CSS file (bootstrap.css) by using

webpackTask { cssSupport.enabled = true }

in the library (bootstrap-compose) as well as in the consumer project. Executing a full build or just browserWebpack creates working js file, which is good. But I am not able to use

browserDevelopmentRun

anymore:

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
> @charset "UTF-8";/*!

How can I use the loader in

browserRun

too?

Hi, how would I deel with TS code where there is a getter that returns a type but the setter accepts another type ?

interface IPointData {
        public x: number;
        public y: number;
}

declare class ObservablePoint<T extends any = any> extends IPointData {}

declare class DisplayObject {
        public get position(): ObservablePoint;
        public set position(pos: IPointData);
}

How do I type this in Kotlin ?

Kotlin/JS has been shown no love at all in the newly updated roadmap 😢

Is there a way to have multiple main() methods in a js project, or do I just need to comment out all but one?

Am I missing something, or is there no support for creating a new instance via reflection in the js runtime?

On the JVM I'd use KClass.primaryConstructor but that doesn't exist on js

I try to use

@JsModule("@bootstrap/scss/_buttons.scss") private external val Style: dynamic

to load the style via web pack, similar what kmdc does, but who does it work as a consumer? My showcase project fails with: bootstrap module not found, because it should not explicit depend on this npm module: https://github.com/hfhbd/bootstrap-compose/pull/195

I'm porting a Kotlin / React app to the new HTML DSL. Previously I could insert a wastebasket icon into a span like this:

attrs.unsafe { +"🗑" }

But this is not supported in the new syntax. I have tried:

dangerouslySetInnerHTML!!.__html = "🗑"

But no luck...

Related to the above what is the new syntax for links? Previously we had

a("<http://somewhere>") {}

but this no longer compiles. Although that's what the documents show. One would expect:

a {

href = "<http://somewhere>"

}

But this doesn't work either.

Hey guys, Wanted to ask a quick question if someone faced the same issue. I want to have JS target for NodeJS and another one for browser and I want in both to use

fetch

instead of

XMLHttpRequest

Is there is a documentation for that part in KMM documentation or a workaround that you know of?

When I build my project in Idea (CTRL+F9) the

jsBrowserProductionWebpack

task is executed. How can I force the execution of

jsBrowserDevelopmentWebpack

instead? Thanks.

I'm trying to use the same Kotlin/JS code in two environments, one of which has access to the "chrome.scripting" namespace and one in which "chrome.scripting" is undefined. I made an external declaration in a file with

@file:JsQualifier("chrome.scripting")

and an

external fun executeScript(...)

method, and it works fine when the namespace exists. However, if it's undefined, the generated JS fails to load even if I never actually try calling the method, since the code tries to declare a variable equal to "chrome.scripting.executeScript", which breaks. Is there a way to make such an external declaration where it does not attempt to initialize this variable unless/until the method is actually called?

Hello everyone. So I'm try to get into Kotlin/JS and have tried following the official hands on guide. It seems like the included react-youtube-lite is deprecated and even adding just makes the screen go blank when I try to access the video player. The react-youtube-lite page say we should migrate to @lite-embed/react which i tried to do but that has brought a compilation error regarding webpack 5 no longer adding polyfills:

Module not found: Error: Can't resolve 'util' in 'C:\Users\bmkil\IdeaProjects\Kotlin-Conf-React\build\js\node_modules\cacheable-lookup\source'

for a lot of

Modules

and

BREAKING 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 tried using this doc to resolve them but have had no luck so far. And resources regarding this are very scarce. Any help would be appreciated

When using Turkish locale (on linux

LC_ALL=tr_TR

) the task names from the kotlin gradle plugin somehow get translated (e.g.

frontendBrowserProduct�onRun

or

frontendBrowserProduct�onWebpack

) and builds with some

tasks.getByName("....")

calls fail. Anyone have an idea why is this happening?

What's the equivalent of the "%" length unit in Kotlin/JS?

Hello everybody. I faced the problem with coroutine contexts in Kotlin JS. It changes the name of getting function and as a result

CoroutineContext#get

returns

is not a function

error when it is underhood have wrong name (compiled name in my case is

t.get_9uvjra_k$

, but called is

t.get_1pi7hg_k$

). Maybe somebody know how to fix it?

A simple Glassmorphism UI sample with Kotlin/JS. Might be helpful for learning how to use kotlin-emotion for CSS and how to style components. There's a scarcity of good resources regarding this and I'm sharing since it may be useful to other Kotlin/JS newbies like me. Github link: https://github.com/racka98/Kotlin-JS-Glass-UI

What is the effect of this change ?

Hello my people! I was wondering: Is there a way to improve compilation speed with (with using browserDevelopmentRun -- continuous)? Now it is 30 seconds if I am lucky, 1 minute if I am less lucky. I was wondering: would more modules work? I could split things up in feature modules, this works great for android development. Also, is it common that my app reloads twice when a change is detected? Usually when a change is detected and a build is executed, my app directly reloads (without any changes of course). Then after the build is done, it reloads again (with the changes)

Hey, will there be any way soon to see all the sources from the External Librairies menu in the Project files ? For now we can't read any of the

.knm

file but if we see declaration of methods in these files it works by looking in the gradle cache, but it would be very useful to be able to see the entire code of libraries directly, like in JVM.

I have a backend project in kotlin that i want to convert to Javascript. Is there an out of the box kotiln to js compiler I can use?

Until recently I've been able to build and run my nodejs application (a server) by copying a single a single file to my sever after running

productionExecutableCompileSync

. All of a sudden it however starting failing with a lot of errors when starting the application, e.g.:

Error: Cannot find module './kotlin-kotlin-stdlib-js-ir.js'

. As far as I remember I haven't changed anything except for updating to newest Intellij and kotlin plugin. Updating to Kotlin 1.7.0 (from 1.6.21) didn't do any difference either. Anyone else tried the same or similar?

I'm using Kotlin-react-wrapper- v18 this line would work on v17, however not anymore on v18. What's the correct way of adding bootstrap attributes to a button

Did anyone have this issue after updating to Kotlin 1.7.0 when trying to use

jsBrowserProductionRun

or

jsBrowserDevelopmentRun

? The generated JS does work if I host it in a webserver manually. By looking at this (https://github.com/vaadin/flow/issues/13952), it seems that the

@webpack-cli/serve

package should be pinned to 1.6.1, and it seems that because the version is declared as "^1.6.1", it pulls version 1.7.0 to my project (well, at least that's what the yarn.lock file says 😛).

* What went wrong:
Execution failed for task ':web:dashboard:frontend:jsBrowserProductionRun'.
> [webpack-cli] TypeError: cli.isMultipleCompiler is not a function
  [webpack-cli] TypeError: cli.isMultipleCompiler is not a function
      at Command.<anonymous> (C:\Users\Leonardo\Documents\IdeaProjects\LorittaBot\LorittaCinnamon\build\js\node_modules\@webpack-cli\serve\lib\index.js:146:35)
      at async Promise.all (index 1)
      at async Command.<anonymous> (C:\Users\Leonardo\Documents\IdeaProjects\LorittaBot\LorittaCinnamon\build\js\node_modules\webpack-cli\lib\webpack-cli.js:1674:7)

"@webpack-cli/serve@^1.6.1":
  version "1.7.0"
  resolved "<https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1>"
  integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==

I'm starting a frontend project with Kotlin/JS and the React wrappers and I'm a little confused with how I should be using kotlin-styled-next. I see in the example projects that the FC function is used to make function compents. But it does not seem to support styledDiv. The lower case fc function does support it but it looks like it is considered legacy because it is in the FC.legacy.kt file when I look at the source. What should I be using with kotlin-styled-next?

Hello. I tried to switch to IR compiler and found the following issue

class IRTest {
    val numberToText = js("{'1' : 'one', '2' : 'two'}")

    @Test
    fun test() {
        val key = "1"
        assertEquals(true, js("key in this.numberToText"))
    }
}

fails with

Cannot use 'in' operator to search for '1' in undefined

while

class IRTest {
    val numberToText = js("{'1' : 'one', '2' : 'two'}")

    @Test
    fun test() {
        val key = "1"
        val numberToTextCopy = this.numberToText
        assertEquals(true, js("key in numberToTextCopy"))
    }
}

works as expected. Could anyone explain this behavior? Thanks in advance for your help!

Hm the "How would you feel if you could no longer use Kotlin/JS?" question in the new multiplatform survey sent me on an emotional rollercoaster. I really wonder if there are plans to remove the JS support from multiplatform because lack of interest. That would mean that I better stop working on the JS compiler plugin I started to write because it will become useless in the future and it does not worth the time invested. Also, we have quite some software in production that use Kotlin/JS and it would take a lot of time to migrate to ... I don't know what, back to JavaScript?