I'm trying to import https://github.com/UUDigitalHumanitieslab/handlebars-i18next but can't figure out how to type the definition. I've tried

package com.i18next

import com.handlebarsjs.Handlebars

@JsModule("handlebars-i18next")
@JsNonModule
external fun registerI18nHelper(
    handlebars: Handlebars,
    i18Next: I18Next,
    helperName: String? = definedExternally
)

but that produces handlebars_i18next__WEBPACK_IMPORTED_MODULE_12__ is not a function with or without the @JsNonModule annotation

I spent the afternoon upgrading a template project I've had for a while to use fritz2, vite, and tailwind 4.0. This is in prepration of upgrading a bigger project I have that has been using fritz2 and kotlin-js for over four years now. We've used tailwind 3.x for styling for about a year now and the 4.x release is a bit disruptive on the webpack side. The solution I came up still uses webpack for bundling all the javascript stuff into one file (could not get vite to work with multiple files), which is annoying but otherwise it sort of works without postcss and other stuff. I know someone is working on a gradle plugin for vite but I'm actively trying to get rid of gradle here and have a bit less magic stuff happening. So, I decided to just sit down and make this work without that instead. I'd love to get some feedback on this project so I can make it a bit nicer to work with and get things like hot reloading working a bit smoother (a bit too trigger happy currently, reloads several times while building). Also if someone knows a way where webpack can be disabled completely, that would be great. https://github.com/jillesvangurp/template-fritz2/tree/main

Hello @turansky, in our project we've developed an extensive SPA with React. Since the size of the JS file has now grown to over 3.8 MB, I'm trying to optimize this with lazy loading. Based on the example from the wrapper project, I'm trying to implement this with the plugin io.github.turansky.seskar (4.7.0) and Suspense + @Lazy in the project. However, I'm getting the following error message:

Execution failed for task ':gui:jsProductionGenerateLazyModules'.
> Could not copy file 'C:\projektdateien\avh\portalng\client\gui\build\compileSync\js\main\productionExecutable\kotlin\portalng-vorabanfrageGui\seiten\Vorabanfrage__lazy__module.mjs' to 'C:\projektdateien\avh\portalng\client\gui\build\tmp\jsProductionGenerateLazyModules\portalng-vorabanfrageGui\seiten\Vorabanfrage__lazy__module.mjs'.
   > Error - Invalid filter specification for seskar.gradle.plugin.LazyModuleReader

Besides the plugin, target = "es2015" is set and in the gradle.properties kotlin.js.ir.output.granularity=per-file. Did I forget to configure something?

Kotlin 2.2.0-Beta1 contains https://youtrack.jetbrains.com/issue/KT-74533, which means iterating over strings, or getting characters by index, is now even more performant, probably on par with pure JS. The new implementation has intrinsics specific to the

String

type, instead of sharing them with

CharSequence

, so instead of calling

charSequenceGet(str, index)

it will call

charCodeAt(str, index)

directly. Apart from that I see there are fixes for plain objects support, and finally exporting

Promise<Unit>

won't output a warning anymore https://youtrack.jetbrains.com/issue/KT-57192.

was someone able to write hierarchical mocha tests which are displayed correctly in intellij's test view? something like:

describe("foo") {
  context("bar") {
    it("should add numbers correctly") {
        assertEquals(4, 2 + 2)
    }
  }
}
external fun describe(name: String, block: () -> Unit)
external fun context(name: String, block: () -> Unit)
external fun it(name: String, block: () -> Unit)

Works in gradle but intellij does not pick it up correctly, i.e. not all tests are shown in the test view (it is picked up correctly in the build view though)

Does anyone know why methods annotated with @JsStatic can't implement an external interface method?

In my project I'm creating my own instance of

KotlinWebpack

task (via gradle plugin). I'm testing Kotlin

2.2.0-Beta1

and it doesn't work anymore.

is there a way to replace webpack with something faster like esbuild? I'm not looking for a fully featured solution like Vite which has additional requirements like an index.html, I'm purely looking for a faster bundler

To use a German proverb I am standing on the hose. In TanStack Query is there no better way to invalidate a query key than this?

val submitHandler = useMutation<CompanyDto?, Error, String, Unit>(
    options = UseMutationOptions(
        mutationFn = {
            secureApi(CompanyEndpoints.putCompany.copy(
                bodySerializerType = typeOf<CompanyDto>(),
                body = editedCompany
            ))
        },
        onSuccess = { _, _, _ ->
            queryClient.invalidateQueries(
                InvalidateQueryFilters<Any,Any,Any, QueryKey>(
                    queryKey = ADMIN_QUERY_KEY
                )
            ) 
        }
    )
)

I kind of hoped the types of

InvalidateQueryFilters

were inferable from

useMutation<...>

. Or am I using it wrong? (Trying to follow this: https://tanstack.com/query/latest/docs/framework/react/examples/auto-refetching?panel=sandbox)

I have an KMP project with android and web targets (kotlin js app). I have a shared module with commonMain for platform independent code and submodules for android/web with platform specific code. On Android everything works fine. I can use code from both commonMain and androidMain in the Shared module. On web however I can only reach / see code inside the submodule jsMain and not the code from commonMain (platform independent code)

Hi Everyone, Is there an official alternative/solution to npm-publish? I saw it is archived now. What is the official way of publishing a Kotlin JS lib as an npm package?

I would like to do a dynamic import like so:

import js.import.import

suspend fun MyFun(cloudUrl: String) {
    import<Unit>(
        /* webpackIgnore: true */
        "$cloudUrl/assets/js-client-8.5.0/cloud-client.js"
    )
}

Unfortunately the magic comment is removed when compiling Kotlin to JS. In the browser i get the error "Cannot find module 'https://anylogic.zenmo.com/assets/js-client-8.5.0/cloud-client.js'".

import("<https://anylogic.zenmo.com/assets/js-client-8.5.0/cloud-client.js>")

works in plain javascript. How do I get the compiler/webpack to leave this import untouched?

Hello, why does my production optimized JS bundle file contain strings with my source file names and line numbers? Screenshot in thread.

When updated to Compose 1.8.0-rc01 and execute compileDevelopmentExecutableKotlinJs Gradle task got compilation internal error:

e: java.lang.IllegalStateException: IC internal error: can not find library org.jetbrains.compose.material:material-icons-core

If add dependency of that library everything compiles fine. Other targets or Js target but production build compiles fine without this dependency. Is it known issue?

Hey, so in TanStack Table some of the states are not directly primitives or something like

ReadOnlyArray<T>

but they have a little wrapper like

ColumnFiltersTableState

which only has 1 field

var columnFilters: ReadonlyArray<ColumnFilter>

. I want to save the user's settings like sorting, filters, etc. to

localStorage

. The thing is, since

ColumnFiltersTableState

is an external interface I cannot reify it for deserialization. And I cannot just use

ReadonlyArray<ColumnFilter>

directly since it doesn't get explicitly exposed by TanStack, so I get

ReferenceError: ColumnFilter is not defined

when I try it like this. I also can't

JSON.Stringify

since that would create problems in other places, it sometimes adds

_1

to fields.

I was confused about code splitting so I made a minimal example on how to archieve this:

Sorry if I'm bothering, but I sometimes encounter these "double types". For example TanStack Table has the

Updater

which is defined like this:

sealed external interface Updater<T> /* T | ((old: T) -> T) */

inline fun <T> Updater(
    source: T,
): Updater<T> =
    unsafeSpecialCast(source)

inline fun <T> Updater(
    noinline source: (old: T) -> T,
): Updater<T> =
    unsafeSpecialCast(source)

I know I can create these using

functionalUpdate()

but how do I consume them? Currently I do

this.onSortingChange = { newSorting ->
    setSorting(newSorting.unsafeCast<SortingState>())
}

but it feels kind of wrong. What is correct way to consume such an

Updater

?

The Kotlin playground outputs A LOT of JS code for 2.2.0-Beta2 compared to previous versions. https://pl.kotl.in/jGyj69aC2 Is this a playground issue or a Kotlin issue?

I'm not sure if this has been fixed (I believe so tho in 2.x), but I stumbled upon a subtle bug in 1.9.24. If you have a stateless

object

(only pure functions, no properties), the object is instantiated eagerly thanks to an optimization (which is good for perf!). However, if that stateless object is used by an

@EagerInitialization

-ed property, there will be a runtime error, as the property is initialized before the optimized

object

.

Any idea how to upload Blob using

submitFormWithBinaryData

I'm using HttpClient(Js)? formData.append didn't work.

@turansky what do you think about using a custom kotlinx-serialization encoder to transform Kotlin classes to plain objects?

What are your strategies for sharing DTOs with JS/TS code?

@JsExport
@Serializable
data class Foo(
    val bar: List<String>
)

is not exportable because

List

is not exportable.

@JsExport
@Serializable
data class Foo(
    val bar: Array<String>
)

doesn't work, because array equality is identity-based and not content-based.

@JsExport
@Serializable
class Foo(
    val bar: Array<String>
) {
    override fun equals(…) = …
    override fun hashCode() = …
}

works, but it's a shame to have to generate

equals

and

hashCode

on all objects when one of the big advantages of Kotlin is not having to do this, especially for DTOs.

@JsExport 
@Serializable
class MyCustomArray<T>(
    val data: Array<T>
) { … }

@JsExport
@Serializable
class Foo(
    val bar: MyCustomArray<T>,
)

doesn't work because KotlinX.Serializable can't serialize generic arrays.

@JsExport
@Serializable
class MyCustomList<T> private constructor(
    internal val data: List<T>
) {
    val elements: Array<T>
        get() = ⚠
}

@JsExport
@Serializable
class Foo(
    val bar: MyCustomList<T>
)

doesn't work because we can't convert a generic list into a generic array. I'm curious, how do people share DTOs with JS? I see that the other solution is creating a dedicated JS shim, but the entire point of sharing code is to avoid duplication.

Does this K/JS compiler NPE ring a bell to anyone? https://pl.kotl.in/GETUslcHn Or should I report it?

No solution for the kotlin test in JS and

Name contains illegal chars that can't appear in JavaScript identifier

?

I wanted to experiment with charset generation and with a multi-module project published both to a Maven repository and the npm registry. https://github.com/lppedd/kotlinx-charset implement multiplatform support for EBCDIC charsets (for the ones using KMP on the mainframe, especially via JS). Special thanks to @Danilo Pianini for his up-to-date fork of the

npm-publish

plugin.

Using the K1 frontend and Kotlin 2.1.20 in IJ 2025.1.1 RC, I can't debug tests under Node.js. Anyone else can reproduce?

Seems like an IDE issue. Breakpoints are not attached, but a

debugger;

statement works.

I have three questions: • the init block in a companion object is not running, is that correct? • how can I get the attributeChangedCallback running in a web component? • using esClasses=true I notice that the init blocks in the classes are not run, and class properties are undefined after initialization. See thread for example code.

Hello everyone, hope you guys are doing well. I'm unsure if this is the right channel to ask this but, how are you guys seeing the FE market for KotlinJs ? Is this the right time to invest to learn it ?

We've just published a blog post about the updates on Kotlin/JS we will have. Please let me know if you have something (related to it or not) to share. The present and future of Kotlin for Web!