https://kotlinlang.org logo
Join Slack
Powered by
# javascript
  • e

    Eugene Fedorenko

    05/26/2025, 1:17 PM
    Hi. I have an issue with using kotlin collections in typescript. When I generate esModules and typescript declarations, a custom js module is created. It includes • the declarations for mine and 3'rd party classes, • the main mjs file with implementation of my classes, • modules for the libraries that are being imported in the main mjs. The issue is that I can't access KtMutableSet and other kotlin collections from this module. The types are being imported into the main module file, but they are never exposed further. Also, there is no separate module for kotlin-stdlib. What am I expected to do? Should I create a script that will make a module out of the kotlin-stdlib? Here is a small project that represents the issue: https://gitlab.com/yevheniif/kt-collection-test
    a
    e
    o
    • 4
    • 16
  • a

    Alex Styl

    06/01/2025, 10:22 AM
    I dont get the values of variables when i mouse over when i debug my code. i do see them on the debug console though in IDEA. is that normal? if not, what am i missing?
    a
    e
    • 3
    • 7
  • a

    Alex Styl

    06/02/2025, 2:43 PM
    can i somehow control where the output js will be placed, other than build/dist/js?
    ✅ 1
    • 1
    • 1
  • e

    Edoardo Luppi

    06/03/2025, 10:35 AM
    Does this influence the ability to have exportable unsigned numeric types in some capacity?
    a
    • 2
    • 2
  • s

    shikhar

    06/03/2025, 8:17 PM
    Is their a way when generating JS libraries from KMP that will eventually be published to npm to not bundle ANY of it’s dependencies? like ktor/kotlin-stdlib And instead give them as runtime dependencies? (dependencies in package.json) The default behaviour seems to bundle everything which I don’t get the reasoning for.. if it’s possible then is there a downside?
    e
    • 2
    • 9
  • b

    Bernhard

    06/04/2025, 8:13 AM
    checking out 2.2.0-RC: has the generated copy method been removed from @JsPlainObject? getting compile errors
    ✅ 1
    a
    • 2
    • 4
  • b

    Bradleycorn

    06/04/2025, 2:18 PM
    Is there any documentation for the
    binaries.library()
    configuration? I understand at a high level what it does (produce a distributable node library), but I can't seem to find any documentation for it, or any official information about how/when to use it.
    e
    a
    • 3
    • 7
  • b

    Bradleycorn

    06/04/2025, 3:23 PM
    Another Question ... Can we not export enums? The docs for
    @JsExport
    indicate that we cannot:
    Copy code
    @ExperimentalJsExport
    @Target(allowedTargets = [AnnotationTarget.CLASS, AnnotationTarget.PROPERTY, AnnotationTarget.FUNCTION, AnnotationTarget.FILE])
    expect annotation class JsExport(source)
    Exports top-level declaration on JS platform.
    
    Compiled module exposes declarations that are marked with this annotation without name mangling.
    
    This annotation can be applied to either files or top-level declarations.
    
    It is currently prohibited to export the following kinds of declarations:
    
    expect declarations
    inline functions with reified type parameters
    suspend functions
    secondary constructors without @JsName
    extension properties
    enum classes
    annotation classes
    When I add
    @JsExport
    to a basic enum
    enum class Num { ONE, TWO, THREE }
    ... it compiles OK, but when I try to use it in javascript (typesript) code, I get a runtime error
    Cannot read properties of undefined
    when I import and use it, like
    const one = Num.ONE;
    e
    • 2
    • 41
  • a

    Alex Styl

    06/05/2025, 8:57 AM
    how do I export my kotlin functions and import them in a nodejs project? The docs have me confused about this. I think something gets messed up because I use kotlin packages. more info in 🧵
    e
    a
    • 3
    • 7
  • e

    Edoardo Luppi

    06/05/2025, 6:16 PM
    How do I understand where exactly this error is coming from? Maybe I just need to understand what "IrClassSymbolImpl is unbound" means.
    Copy code
    > Task :fmproto:compileTestDevelopmentExecutableKotlinJs
    00:12:48.789  e: java.lang.IllegalStateException: IrClassSymbolImpl is unbound. Signature: kotlin.js/Promise|null[0]
    00:12:48.789  	at org.jetbrains.kotlin.ir.symbols.impl.IrSymbolBase.getOwner(IrSymbolImpl.kt:37)
    00:12:48.789  	at org.jetbrains.kotlin.ir.types.IrTypesKt.getDefaultType(irTypes.kt:173)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.lower.TestGenerator.generateCodeForTestMethod(TestGenerator.kt:206)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.lower.TestGenerator.generateTestCalls(TestGenerator.kt:120)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.lower.TestGenerator.createTestContainer$lambda$5$lambda$4(TestGenerator.kt:67)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.WholeWorldStageController.restrictTo(WholeWorldStageController.kt:29)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.lower.TestGenerator.createTestContainer(TestGenerator.kt:66)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.lower.TestGeneratorKt.generateJsTests(TestGenerator.kt:42)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.JsIrCompilerWithIC.compile(compilerWithIC.kt:94)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.ic.CacheUpdater.compileDirtyFiles(CacheUpdater.kt:716)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.ic.CacheUpdater.loadIrAndMakeIrFragmentGenerators(CacheUpdater.kt:816)
    00:12:48.789  	at org.jetbrains.kotlin.ir.backend.js.ic.CacheUpdater.actualizeCaches(CacheUpdater.kt:848)
    00:12:48.789  	at org.jetbrains.kotlin.cli.js.IcCachesKt.prepareIcCaches(IcCaches.kt:118)
    🧵 1
    t
    • 2
    • 4
  • b

    Bernhard

    06/06/2025, 7:28 AM
    using 2.2.0-RC2: I've noticed this warning that appears for anything using @JsExport that has a covariant return type marked with out; this wasn't an issue before, any idea why this happens? removing the out makes it go away
    👀 1
    a
    • 2
    • 2
  • y

    Yassine Abou

    06/09/2025, 3:00 PM
    I’m new to Kotlin/JS Interoperability and got stuck with this error: "Calls to 'js(code)' must be a single expression inside a top-level function body or a property initializer" My code tries to load a WebWorker with js() inside a Koin module, but it’s not allowed. Here’s the problem:
    Copy code
    actual val platformModule = module {
         single {
             val driver = WebWorkerDriver(
                 Worker(
                     js("""new URL("@cashapp/sqldelight-sqljs-worker/sqljs.worker.js", import.meta.url)""") // :x: Error here
                 )
             )
             LlmsDatabaseWrapper(driver, LlmsDatabase(driver))
         }
     }
    how could I fix this issue?
    e
    • 2
    • 4
  • b

    bod

    06/10/2025, 2:51 PM
    Silly question: when running JS tests in the browser, is there a way to log things to the console? I have a bunch of tests that fail with no details - a few
    println
    would go a long way
    a
    e
    e
    • 4
    • 6
  • e

    Edoardo Luppi

    06/10/2025, 3:08 PM
    Given the following wrapper function over
    require
    Copy code
    inline fun <T : Any> jsRequire(name: String): T =
      js("require(name)")
    The JS output is something like:
    Copy code
    var name = 'something'
    return require(name)
    The problem here is tools like esbuild do not analyze what
    name
    is, and thus don't correctly bundle the required dependency. Is there a way to workaround this, that is not unwrapping the
    require
    call?
    i
    • 2
    • 2
  • v

    Volodymyr Galandzij

    06/10/2025, 5:19 PM
    Can someone tell why
    Promise<List<Item>>
    is exported to TypeScript as
    Promise<any>
    while
    Promise<JsArray<Item>>
    preserves both the container and item types? Is it expected behavior and we should use `JsArray`/`JsReadonlyArray` to preserve list item type in the Typescript declarations?
    Copy code
    // JsItemsRepository.kt file
    
    @OptIn(ExperimentalJsCollectionsApi::class)
    class JsItemsRepository() {
        fun getAllArrayAsync(): Promise<JsReadonlyArray<Item>> = scope.promise { … }
        fun getAllListAsync(): Promise<List<Item>> = scope.promise { … }
        fun getFirstAsync(): Promise<Item> = scope.promise { … }
    }
    
    // mymodule.d.ts file
    
    class JsItemsRepository {
        getAllArrayAsync(): Promise<ReadonlyArray<com.test.my.Item>>;
        getAllListAsync(): Promise<any/* kotlin.collections.KtList<com.test.my.Item> */>;
        getFirstAsync(): Promise<com.test.my.Item>;
    }
    e
    a
    • 3
    • 12
  • h

    hellovass

    06/11/2025, 1:57 AM
    NGINX deployment issue with Kotlin WebAssembly - WASM MIME type error I deployed a Kotlin WebAssembly application using NGINX, but when I open it in the browser, the console shows the following errors (see screenshot):
    🆘 1
    ✅ 1
    r
    • 2
    • 2
  • h

    hellovass

    06/11/2025, 2:02 AM
    Extremely slow compilation (9min) for Kotlin/Wasm project on CI (10-core, 16GB, Kotlin 2.1.21) When compiling a Kotlin WebAssembly (Wasm) project on our CI machine, one task takes unusually long (~9 minutes). Here are the specs: • CI Machine: 10 CPU cores, 16GB RAM • Kotlin Version: 2.1.21 • nodeVersion = "20.9.0" • yarnVersion = "1.22.21" The slowdown seems disproportionate to the hardware. Has anyone encountered similar performance issues with Kotlin/Wasm builds?
    r
    • 2
    • 3
  • a

    Alex Styl

    06/12/2025, 6:13 AM
    can i somehow magically use the typescript types from npm libraries? ie I use the
    stripe
    package. do i need to create my own external interfaces(or use with dynamic) every time?
    e
    • 2
    • 1
  • l

    Luv Kumar

    06/13/2025, 7:53 PM
    Hi all, i am trying to find a way to export suspend function for js target, i have gone through multiple resources online but i am not able to find a way to do that the way i want. I want that
    suspend fun foo(): String
    should get converted to
    foo(): Promise<string>;
    in Js. From what i know there is no native support for this. I was able to reach a Js signature
    fooAsync(): Promise<String>;
    using kotlin-suspend-transform-compiler-plugin , but i would want to have the same signature(without async) as it would be easier for all 3 targets(android, ios and js) to follow the generated docs and use it. Is there a way to achieve this ? other obv option is to have duplicate exported api interfaces for only js, but i really don't wish to go that route. I was also thinking if this plugin or some other plugin could help me generate a synthetic function
    Copy code
    @JsExport
    @JsName("foo")
    fun fooSynthetic(): Promise<String> // generated synthetic function
    
    @JsName("_foo")
    suspend fun foo(): String // original function defined in api
    If somehow above could be achieved, i was thinking it could work ? (Please correct me if my thought process is wrong here, i am new to KMP) Thanks.
    e
    • 2
    • 3
  • s

    shikhar

    06/15/2025, 3:33 AM
    How does one actually enable this? https://kotlinlang.org/docs/whatsnew20.html#suspend-functions-as-es2015-generators Couldn’t find any docs. Is it enabled by default when we set compilation target to es2015?
    e
    • 2
    • 1
  • r

    Remy Benza

    06/16/2025, 8:05 AM
    is there a kotlin js wrapper for framer motion or something else to get easy list animations (delete / insert of items) without writing much code myself
    a
    t
    • 3
    • 7
  • g

    Genis Lin

    06/16/2025, 1:14 PM
    Hi, I’m Genis, a 3D developer specializing in immersive web and interactive experiences. I leverage cutting-edge tools like: Three.js, Babylon.js → High-performance WebGL & 3D web apps Cesium, Mapbox → Geospatial & real-time 3D mapping Unity 3D → Games, simulations, AR/VR With 7+ years of experience, I build visually stunning, scalable solutions for clients worldwide. Check out my work: 👉 Portfolio: https://kakao-3d.vercel.app/ Let’s collaborate! Open to freelance projects, contract roles, or innovative partnerships. #3DDevelopment #Three.js #WebGL #Unity3D #GameDev #TechArt
    not kotlin but kotlin colored 6
    c
    • 2
    • 1
  • e

    Edoardo Luppi

    06/16/2025, 6:47 PM
    @broadway_lamb regarding the Clojure Compiler discussion, and the fact the JS code has to be parsed and potentially lowered to older targets, what about using the TS compiler API? It's just a random idea, but it gives you a visitable AST + the ability to downlevel by compiling it. Yes, you'll have to implement a separate program (and exchange data with it, e.g. via a pipe?) to translate TS AST to something you can read in Kotlin, spawn a separate process, but it doesn't seem totally crazy. With
    tsgo
    this might become even easier as it won't require a Node instance to be running.
    b
    • 2
    • 3
  • p

    PHondogo

    06/18/2025, 8:46 PM
    How to check if code is running in test mode (unit test)?
    e
    • 2
    • 4
  • p

    phteven

    06/19/2025, 11:06 AM
    How can I dynamically link resources to my index.html via webpack? https://kotlinlang.org/docs/running-kotlin-js.html#run-the-browser-target Only shows hardcoded strings for the generated js file. When i want to use the webpack content hash for example, what is the best way to implement this?
    outputFileName = “main.bundle-[contenthash].js”
    c
    • 2
    • 3
  • v

    Volodymyr Galandzij

    06/19/2025, 6:25 PM
    What’s the current status of Automatic generation of Kotlin wrappers from TypeScript typings mentioned in https://blog.jetbrains.com/kotlin/2025/05/present-and-future-kotlin-for-web/ ? Is there a ticket to track the progress at YouTrack or GitHub?
    e
    s
    • 3
    • 2
  • h

    Hildebrandt Tobias

    06/19/2025, 9:34 PM
    Hey, I have a small Problem with TanStackQuery. The options that expect functions don't work.
    Copy code
    useQuery<Array<DocumentationElementDto>?, Error, Array<DocumentationElementDto>, QueryKey>(
        options = UseQueryOptions(
            queryKey = DOCUMENTATION_QUERY_KEY.plus(subCategory),
            queryFn = QueryFunction { 
                secureApi(DocumentationEndpoints
                    .getDocumentationElement
                    .copy(optionalQueryParams = pairListOf("category" to subCategory))
            )},
            refetchOnMount = { _ -> false },
            refetchOnWindowFocus = { _ -> false },
            refetchOnReconnect = { _ -> false },
            refetchInterval = 0,
            refetchIntervalInBackground = false,
        )
    )
    In this case
    Copy code
    refetchOnMount = { _ -> false },
    refetchOnWindowFocus = { _ -> false },
    refetchOnReconnect = { _ -> false },
    doesn't work, but these two:
    Copy code
    refetchInterval = 0,
    refetchIntervalInBackground = false,
    behave as expected. I also tried
    useCallback { _ -> false }
    , but it isn't accepted by the compiler.
    t
    • 2
    • 5
  • m

    Martin Janči

    06/22/2025, 2:38 PM
    I am using multiple kotlinjs in one project. Problem is, yarn is in root project and it is shared. thats makes conflicts, because of overwriting. Is there smart way to handle this?
    h
    • 2
    • 3
  • h

    Hildebrandt Tobias

    06/24/2025, 8:44 PM
    Hey, I have a problem with the google maps api and the predefined marker symbols. I looked at this this and I use
    <http://vis.gl/react-google-maps|vis.gl/react-google-maps>
    , but I also loaded
    googlemaps/js-api-loader
    . If you look at the Marker example there is:
    Copy code
    new google.maps.Marker({
        position: map.getCenter(),
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10,
        },
        draggable: true,
        map: map,
      });
    But I can't figure out how to aquire the predefined
    google.maps.SymbolPath.CIRCLE
    constant? object? Just providing the path as a string doesn't work it says unexpected g at position 0 (the g from google I guess). I tried
    Copy code
    @file:JsModule("@googlemaps/js-api-loader")
    @file:JsNonModule
    
    package shared.utils.maps
    
    @JsName("CIRCLE")
    external val CIRCLE: dynamic
    But that also doesn't work. I know I can provide my own SVG and PNG and such, but it kinda irks me, someone got an idea? Edit: Okay I added the npm https://www.npmjs.com/package/google-maps and added:
    Copy code
    @file:JsModule("google-maps")
    @file:JsNonModule
    
    package shared.utils.maps
    
    @JsName("CIRCLE")
    external val CIRCLE: dynamic
    But it seems that
    CIRCLE
    is
    null
    when I access it.
    a
    • 2
    • 9
  • h

    Hildebrandt Tobias

    06/25/2025, 9:07 PM
    Are singletons not allowed anymore? I updated to
    2025.6.11
    and now I get
    Copy code
    org.jetbrains.kotlin.util.FileAnalysisException: While analysing Authentication.kt:47:1: org.jetbrains.kotlin.utils.exceptions.KotlinIllegalArgumentExceptionWithAttachments: Exception in declaration checker
    
    Caused by: java.lang.IllegalStateException: Symbol for Any not found
    For every top level
    object
    declaration like
    Copy code
    object Foo {
      val bar: Bar
    }
    where there is no
    Any
    ? EDIT Okay I cleaned and invalidated everything and it doesn't come up for now. I'll check back once the migration is fixed. Edit2 I get the error with Kotlin 2.1.0, but not with 2.2.0, but migrating to 2.2.0 is much work now. sigh.
    c
    t
    • 3
    • 4