I have two multiplatform projects, one is

:rest:model

and the other one

:domain:model

I depend on both in a certain third Kotlin/JS project, and getting an error

duplicate target file will be created

from

processDceKotlinJs

. One of the solutions seems to be setting different names for JS bundles (like

rest-model

and

domain-model

). How can I customize the bundle names? I’m looking around Gradle DSL

kotlin { js { … } }

but so far didn’t find it

Hi everyone I'm a newbie to Kotlin/JS and want to know if there's any solution that you guys use for integrating Firebase into your web apps?

An app compiled with Kotlin/JS 1.8.0-Beta runs ~7% slower than with Kotlin 1.7.21. It's not much, but it's noticeable in my benchmark. Should this be expected and why?

I use import.meta.env.DEV to check whether I am doing a build for development or production and configure my logger accordingly. However, I would now also like to store parameters for different systems independently of the build method (dev/prod). Can I pass a profile when building and access it with import.meta.env in the browser js client?

When is generate externals going to get some love? It was promised like 4 or 5 years ago, and I haven't been able to get it working with a compilable application even once.

Has anyone got this error when trying to open kjs IR sourcemaps in the browser?

Could not load content for <webpack://sandbox/util.kt> (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

I'm attempting to build a React app in KotlinJS and JS alongside one another. This is related to a similar question someone asked before in this thread and linked to this StackOverflow question. I'm able to make the dependency work as stated in that post, but unfortunately, React has custom DSL and requires compiling with

npm run-script build

(i.e.

react-scripts build

). Does anyone know a way for Gradle to compile the React JavaScript code in my JS module and then use that compiled code as the dependency to include and interop?

Anyone ever get stuck on

92% sealing asset processing TerserPlugin

when running

browserProductionWebpack

? I'm hoping the issue is that it just takes a long time to run, and if so, is there any way to speed it up (give it more RAM, etc...)?

if I've got a nodejs kotlin-js application, what is the expected way for me to package and ship the application? Do I just copy everything in the

<root project>/build/js

folder, and then manually run the js file in the

packages/<app name>/kotlin/<app name>.js

? I'm curious if there is a nicer way to package everything up.

Has anyone ever used generic types with react components? e.g. external interface MySelectListProps<T>: Props { var options: List<T> var onSelected: (T) -> Unit, } Is there any established pattern, or is this a bad idea?

This message was deleted.

Hello, has anyone tried to use [Rust-Tauri](https://tauri.app/) with kotlin/js and compose-wasm? I am trying to import tauri library:

implementation(npm("@tauri-apps/api", "1.2.0", true))

But I got lots of compilation error in

lib.dom.kt

(Prcture 1), which is converted from

tsstdlib

ts library. I think we just need the

invoke()

function defined in tauri (Picture 2), so I tried to set

generateExternals

to

false

and manually add external definition in my

Main.kt

, then the Tauri console tells me "cannot found xxx function." What is the recommended way to use tauri in k/js?

Hello everyone Greetings of the day I need some help with figuring out how to get the

BrowserRouter

working on my codebase. So I have created a new Kotlin/JS app and the only change I have made in the code is instead of directly rendering the

welcome

screen, I am loading it inside a

BrowserRouter

Like this:

createRoot(container).render(
    BrowserRouter.create {
        Routes {
            Route {
                path = "/login"
                element = welcome
            }
            Route {
                 path = "*"
                element = VFC { +"404 Not found!" }.create()
            }
        }
    }
)

Now, the problem with the output of this code is that if I type

<http://localhost:8080/login>

in my browser, it gives me the following error:

Cannot GET /login

. Following are the only two entries I see in the console:

1. failed to load resource: the server responded with a status of 404 (Not Found)

2. DevTools failed to load source map: Could not load content for <chrome-extension://fjdmkanbdloodhegphphhklnjfngoffa/lib/browser-polyfill.min.js.map>: System error: net::ERR_BLOCKED_BY_CLIENT

Now the interesting thing is that, instead of a

BrowserRouter

, if I use a

HashRouter

and instead of entering

<http://localhost:8080/login>

, I enter

<http://localhost:8080/#/login>

in my browser, the same code starts working perfectly fine 👍 So I am not sure what changes do I need to make in order for the

BrowserRouter

to work fine. Any help would be greatly appreciated.

Anyone knows what the issue might be here. I opened this project after a while, updated to Kotlin 1.7.20 and switched to using the

kotlin-wrappers

BOM then added the MUI showcase sample. Now it compiles (using

:browserDevelopmentRun

) and opens on the correct localhost but it's blank. Nothing is showing up on the browser. It used to work perfectly in the past. Project: https://github.com/racka98/Kotlin-JS-Glass-UI

Is there a guide on how to use modal component from react-bootstrap in KotlinJs? I think I found a closer answer on stackoverflow but not sure how to add dependency to `react-bootstrap`module. I did

npm install react-bootstrap bootstrap

and the module is installed in

build/js/node_modules/bootstrap

.

Why does my browser auto refreshes twice to show changes made in code? First refresh does not show the changes, only second one does. There are some warnings in console (see attached imaged) most likely related to webpack. I am running

jsBrowserDevelopmentRun --continuous

. (I also have ktor server running alongside)

build.gradle

plugins {
    id 'org.jetbrains.kotlin.multiplatform' version '1.7.21'
    id 'application'
    id 'org.jetbrains.kotlin.plugin.serialization' version '1.7.21'
}

def ktorVersion = "2.1.3"

group = 'me.developer'
version = '1.0-SNAPSHOT'

repositories {
    jcenter()
    mavenCentral()
    maven { url '<https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven>' }
}

kotlin {
    jvm {
        compilations.all {
            kotlinOptions.jvmTarget = '1.8'
        }
        withJava()
        testRuns["test"].executionTask.configure {
            useJUnitPlatform()
        }
    }
    js() {
        binaries.executable()
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
                devServer?.port = 8080
            }
        }
    }
   // dependencies {...}
}

application {
    mainClassName = 'me.developer.application.ServerKt'
    applicationDefaultJvmArgs = ["-Dio.ktor.development=true"]
}

tasks.named('jvmProcessResources') {
    def jsBrowserDistribution = tasks.named('jsBrowserDistribution')
    from(jsBrowserDistribution)
}

tasks.named('run') {
    dependsOn(tasks.named('jvmJar'))
    classpath(tasks.named('jvmJar'))
}

Huge update of WorldWindKotlin KMP 3D map engine with a lot of bugfixes released! https://github.com/WorldWindEarth/WorldWindKotlin/releases/tag/v1.1.3

Hi, does anyone know why launching many concurrent operations/api calls with coroutines would be 3x-4x slower in firefox vs chrome? something along the lines of this:

coroutineScope {
    storeListItems.forEachIndexed { i, item ->
        launch(Dispatchers.Default) {
            val price = api.getPurchasePrice(item.id)
            storeListItems[i] = StoreListItem(item, price)
            stateManager.updateScreen(StoreListState::class) {
                it.copy(
                    storeListItems = storeListItems,
                )
            }
        }
    }
}

where I have to fetch the prices of many store items with a separate api call for each store item by their id. Additionally, chrome will update the screen as I expect (the order in which the prices get updated happens progressively) while firefox doesn’t seem to be handling the concurrency correctly and it updates the screen all at once)

How can I link to a Kotlin dependency in HTML? For example, I'd like to convert this:

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css>">
<link rel="stylesheet" href="path/to/bootstrap/dependency/dist/css/bootstrap.min.css"> <!-- to something like this -->

I just can't seem to figure out the correct path to point to the Gradle/NPM dependency; hopefully it's possible haha Appreciate the help!

I ran into an issue in Compose for Desktop where a function isn't implemented in the js source set:

internal actual fun ByteArray.putBytesInto(array: IntArray, offset: Int, length: Int): Unit =
   TODO("implement js ByteArray.putBytesInto()")

The jvm implementation is:

internal actual fun ByteArray.putBytesInto(array: IntArray, offset: Int, length: Int) {
    ByteBuffer.wrap(this)
        .order(ByteOrder.LITTLE_ENDIAN) // to return ARGB
        .asIntBuffer()
        .get(array, offset, length)
}

Would the following be a correct implementation (even if not optimal):

internal actual fun ByteArray.putBytesInto(array: IntArray, offset: Int, length: Int) {
  val byteBuffer = Uint8Array(this.toTypedArray()).buffer
  val intArray = Int32Array(byteBuffer, offset, length)
  for(i in 0 until intArray.length) {
    array[i] = intArray[i]
  }
}

How do I create a react component using kotlin? example.js

const Input = () => {
  return <input placeholder="Your input here" />;
};

1. My attempt which does not render anything when method is called:

fun input(): ReactElement<Props>? {
    return createElement {
        ReactHTML.input {
            this.attrs.placeholder = "Your input here"
        }
    }
}

2. Also tried this github example but no success: https://github.com/Kotlin/react-redux-js-ir-todo-list-sample/blob/master/src/main/kotlin/reactredux/components/Link.kt#L12

Has anyone else seen this? Either this is a huge bug, no one is using dynamic except me, or there is some limitation around dynamic that I'm not aware of. Any time I use dynamic, I need to ensure it's done on it's own line, otherwise the code doesn't run properly. https://youtrack.jetbrains.com/issue/KT-55182/Incorrect-Compilation-for-suspend-function-that-returns-dynamic

Hello, I'm looking for good examples of websites and webapps made with Kotlin/JS to show off. I'd mention some of them in my talk "Why we ditched JavaScript for Kotlin/JS" that I'll be giving later today for the 2nd time. Please, if you know good ones, drop the link of the website (plus public repo if open source) in the thread 👇🏼

Any example of using kotlin/js library in existing js project?

hello, I was doing some testing with JS codegen and found something interesting. For example if we have an expression

foo?.bar?.baz

the code generated is

(tmp$ = foo != null ? foo.bar : null) != null ? tmp$.baz : null

. This feels unnecessary as there are multiple

null

checks. Couldnt an alternative be

foo == null ? null : (foo.bar == null ? null : foo.bar.baz)

? this removes all the extra

!= null

checks. If there is some reason for this that I am unaware, please let me know. Thanks in advance for the clarification

https://github.com/Kotlin/kotlinx-nodejs is dead, in favor of https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-node/README.md right? Why not mark the repository as deprecated so that people don't waste time trying to pull it from jcenter (which no longer seems to work).

With the emerging of other Javascript runtimes (i.e. Deno & Bun), whats the future of running kotlin/js there?? Do we also use the

nodejs

target?? if so, won't the name be confusing?? Whats the plan of supporting this??

What's the best way to package a node-js server in a docker container? I'm doing the following: 1. Run a full project clean 2. Build only the server I want to package 3. Grabbing the

<root project>/build/js

dir and putting it in the docker container. The problem is that this folder contains EVERY single library that any project in my entire workspace touches. So my docker image is 400 MB, when it only needs to be 20 or 30 MB. Is there any way to JUST package exactly the used dependencies?

how to write SCSS using kotlin/js?