I’ve found myself using this pattern quite a lot, is there a better way (options is

Deferred<Map<String, String>

?

options.asPromise().then { // get a value from the options map }.asDeferred()

I've got a build where the compileDevelopmentExecutableKotlinJs step can take a few minutes to complete. It sometimes happens on even very simple/minimal projects. Can anyone offer any suggestions for places I might look (e.g. logs) to determine what is the cause?

Can anyone provide any insight on what causes this issue, I’m trying to build a project with IR

> Task :idmapi-entrypoints:compileProductionExecutableKotlinJs FAILED
e: java.lang.IllegalStateException: Not found Idx for private com.mypackage/|null[0]:40
        at org.jetbrains.kotlin.backend.common.serialization.IrFileDeserializer.loadTopLevelDeclarationProto(IrFileDeserializer.kt:48)
        at org.jetbrains.kotlin.backend.common.serialization.IrFileDeserializer.deserializeDeclaration(IrFileDeserializer.kt:39)
        at org.jetbrains.kotlin.backend.common.serialization.FileDeserializationState.deserializeAllFileReachableTopLevel(IrFileDeserializer.kt:139)
        at org.jetbrains.kotlin.backend.common.serialization.ModuleDeserializationState.deserializeReachableDeclarations(BasicIrModuleDeserializer.kt:172)
        at org.jetbrains.kotlin.backend.common.serialization.BasicIrModuleDeserializer.deserializeReachableDeclarations(BasicIrModuleDeserializer.kt:148)

com.mypackage

is another of my projects that this project depends on i have also compiled it with

js(IR)

but the issue could be that i’m still missing something there but its unclear from this error

I am writing unit tests for my Kotlin client-side javascript code. The client code needs the support of a server which is also written in Kotlin in the same multiplatform Kotlin project. How can I start the server automatically when the unit tests start?

Hey guys, any idea how to set environment variables (.env) in a Kotlin JS node project? I've tried adding a .env file at the root of the project, but the server code is not picking up the variables from

process.env

. Cheers!

Where should I be looking for the

package.json

file for a project with

binaries.executable()

? i’ve looked at the file in

myproject/build/tmp/jsPublicPackageJson

and the one in

build/js/packages/myproject

and they are both missing packages from the dependency section that the generated js file has as

require.

If i go and look at the projects that pull in these dependencies directly their

package.json

files look as i would expect them to. This seems essentially the same as https://youtrack.jetbrains.com/issue/KT-45789

I'm trying to type a default external class from the "values.js" npm module and it always responds with:

Uncaught TypeError: Values_0 is not a constructor

. The original code can be seen here: https://github.com/noeldelgado/values.js/blob/master/src/index.js. I've used this in the kt file:

@file:JsModule("values.js")
@file:JsNonModule

@JsName("default")
external class Values(color: String = definedExternally, type: String = definedExternally, weight: Int = definedExternally)

Is this a problem with the module itself or how I'm defining the kotlin class?

Hi, I was trying to update my project to Kotlin 1.5.31 (it was on 1.5.30) but now when I try to launch it I have this error message (see discussion)

Hi, I have a typescript application. I want to create a Kotlin based application but on the same ts contracts/states. Is there a way or a package that converts ts states to Kotlin classes. I've tried the Dukat library but it produces interfaces instead of classes and there are concerns with nested state objects as well.

Hi, I have a project where I re-typed an entire TypeScript library to Kotlin/JS, but it's not executing the side-effects, like this :

import {Something} from './file';
import {Else} from './other';

Something.execute(Else.thing);

export {Something};

In my case the code

Something.execute(Else.thing)

will not be executed, and so it's making the library not working unless I execute this code by hand in Kotlin, is there a way to fix this ?

The PIXI.js library working in Kotlin with full typings ^^

Is it possible to package

resources

inside a Kotlin/JS library, making them accessible to dependents? I'm not having much luck finding docs on the subject.

What's your approach to unit-testing React components in Kotlin/JS? I found this https://github.com/mysticfall/Kotlin-react-test but it's pretty new - I'm wondering if there are any well-established practices. My goal is to take a component that possibly uses other components under the hood, and both be able to test it by verifying that it calls underlying components correctly, and assert on complete DOM.

Hi people, I work on KMP project. And unit tests are failing for JS version with similar error

AssertionError: Expected <1>, actual <1> is not same.
	at Object.captureStack(/tmp/_karma_webpack_16032/commons.js:100023)
	at AssertionError.constructor(/tmp/_karma_webpack_16032/commons.js:100325)
	at <global>.new AssertionError(/tmp/_karma_webpack_16032/commons.js:100522)
	at DefaultJsAsserter.assertTrue(/tmp/_karma_webpack_16032/commons.js:61035)
	at DefaultJsAsserter.Asserter.assertSame(/tmp/_karma_webpack_16032/commons.js:60849)
	at DefaultJsAsserter.assertSame(/tmp/_karma_webpack_16032/commons.js:61016)
	at <global>.assertSame(/tmp/_karma_webpack_16032/commons.js:60213)
	at com.badoo.reaktive.completable.RetryTest.predicate_receives_valid_counter_WHEN_upstream_produces_error(/tmp/_karma_webpack_16032/commons.js:3616)
	at <global>.<unknown>(/tmp/_karma_webpack_16032/commons.js:30474)
	at Context.<anonymous>(/tmp/_karma_webpack_16032/commons.js:60011)

I assume there is wrong equals is used. However, I’m not JS developer so don’t have any clue where to look to unblock me. The same tests are not failing when I run them in IDE.

Hi, we are trying currently to migrate a Kotlin multiplatform project to Web. For that we plan to cross-compile all our native dependencies via emscripten to WebAssembly (that works so far pretty well). Bundling works pretty well using resources for Module JS + WASM files. However, as required by many WASM engines, we utilize asynchronous compilation (https://github.com/emscripten-core/emscripten/blob/main/src/settings.js#L1306). Can we somehow tell Kotlin/JS to resolve functions async?

@file:JsModule("./wasm-js-module.js")
@file:JsNonModule
package pkg.native.wasm.library
//typealias WasmPointer = Int
@JsName("_some_simd_function")
external fun fast_simd_calculus(input: WasmPointer, output: WasmPointer, size: Int)

The generated code now looks like the following and yields of course an

undefined

method because the module is a

Promise

object

(function (root, factory) {
  if (typeof define === 'function' && define.amd)
    define(['exports', './wasm-js-module.js'], factory);
  else if (typeof exports === 'object')
    factory(module.exports, require('./wasm-js-module.js'));
  else {
    if (typeof this['./wasm-js-module.js'] === 'undefined') {
      throw new Error("Error loading module 'pkg.native.wasm.library'....");
    }root['pkg'] = factory(typeof this['pkg'] === 'undefined' ? {} : this['pkg'], this['./wasm-js-module.js']);
  }
}(this, function (_, $module$__wasm_js_module_js) {
  var fast_simd_calculus = $module$__wasm_js_module_js._some_simd_function;

HI i simply need to go to link which i provide (lets say /articles/myfavarticle). I am using hash router (reac-dom-router). So when i click on button element i want to redirect to that page. How should i do this ?

Hi is there any job in programming

hi I have just upgraded from kotlin 1.5.0 -> 1.5.31 and have hit an error with webpack config in a kotlinJS module - I'm hoping someone might have seen before -

Cant resolve 'crypto' in DCE

- it looks like i should just have to add some webpack config but i am unsure how to do it. The error is in the thread.

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.

Is there an equivalent of

@JvmSynthetic

for

kotlin/js

? Something like

@JsSynthetic

? Reasons are almost similar to

@JvmSynthetic

for

kotlin/jvm

, don't need it to be callable form

typescript/javascript

The generated Javascript code for Kotlin classes, sometimes creates an

Object.defineProperty(<Class>.prototype, <property>)...

statement(s), and sometimes not. Does anyone know the rules for when it is generated and when not, I am trying use some kotlin classes from JS code and sometimes I have access to the defined property, sometimes it is simply not defined ??

Is it possible to get sourcemaps to use absolute paths instead of relative paths? When developing locally, we use

yarn link

a lot, and end up with mismatches between the generated sourcemap's relative path and where the code actually is. This can be annoying because it breaks in-browser debugging. Things would be easier for us if we could just use absolute paths instead. I've tried setting

freeCompilerArgs += listOf(
            "-source-map-base-dirs", "/",
            "-source-map-prefix", "/"
        )

but that doesn't seem to work.

Just an idea - It would be nice if DCE could output what gets included in output binary, why and what gets eliminated or inlined. I have hard time understanding why I get such a bit binary output for some small project. Maybe I have some unnecessary code dependency, that's cascading into whole lot of more code.

Webpack development server does not seem to work (with only the Idea new react project wizard and webpack version 4) Any ideas why?

Waiting for changes to input files of tasks... (ctrl-d to exit)
⚠ ｢wdm｣: Hash: 4767918b5ca4297d4a2b
Version: webpack 4.46.0
Time: 6223ms
Built at: 11/11/2021 9:59:04 AM
            Asset      Size  Chunks             Chunk Names
remote-app-web.js  6.05 MiB    main  [emitted]  main
Entrypoint main = remote-app-web.js
[0] multi (webpack)-dev-server/client?<http://localhost:8080> ./kotlin/remote-app-web.js 40 bytes {main} [built]
[../../node_modules/process/browser.js] /Users/mihaivo/IdeaProjects/remote-app-web/build/js/node_modules/process/browser.js 5.29 KiB {main} [built]
[../../node_modules/react-dom/index.js] /Users/mihaivo/IdeaProjects/remote-app-web/build/js/node_modules/react-dom/index.js 1.33 KiB {main} [built]
[../../node_modules/react/index.js] /Users/mihaivo/IdeaProjects/remote-app-web/build/js/node_modules/react/index.js 190 bytes {main} [built]
[../../node_modules/styled-components/dist/styled-components.browser.esm.js] /Users/mihaivo/IdeaProjects/remote-app-web/build/js/node_modules/styled-components/dist/styled-components.browser.esm.js 26.3 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/index.js?<http://localhost:8080>] (webpack)-dev-server/client?<http://localhost:8080> 4.29 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[../../node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[../../node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[../../node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[../../node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./kotlin/remote-app-web.js] 1.85 MiB {main} [built] [238 warnings]
    + 39 hidden modules

Although this is a getter the value returned by it seems to always be the initial value in the scope of the closure

var chats by useState(listOf<String>("first"))

    useEffectOnce {
        GlobalScope.launch {
            client.rtmStream().collect {
                val current = chats // always initial value
                println(current)
                chats = current + it.message
            }
        }
    }

Am I doing something wrong?

If I define a method to return an exception, the typescript exposes the actual implementation, like :

buildIllegalArgumentException(msg: string): kotlin.IllegalArgumentException;

But in VsCode it's handled as

any

, I suspect because the kotlin.XxxException are not exposed in the .d.ts. Is there an option to make them defined/accessible for typescript?

Is it possible to export the Typescript classes without full package name from my Kotlin code? except declare those files in root package

How would I emulate a

require

in kotlin/js?

Introducing

IndexedDB

bindings for Kotlin/JS: https://github.com/JuulLabs/indexeddb

what would be the kjs equivalent of

module.exports = MyThingHere

I've been trying to figure out how to do this with gradle and kjs but I haven't been able to generate a js file that looks even close to doing that, in most cases it actually just adds the package as attribute

Hi, I have react component

class MetaInfoFacebook : RComponent<MetaInfoFacebookProps, RState>() {
    companion object {
        const val PROPERTY_KEY = "property"
        const val CONTENT_KEY = "content"

        const val URL_META_FACEBOOK_PROPERTY = "og:url"
        const val TYPE_META_FACEBOOK_PROPERTY = "og:type"
        const val TITLE_META_FACEBOOK_PROPERTY = "og:title"
        const val DESCRIPTION_META_FACEBOOK_PROPERTY = "og:description"
        const val IMAGE_META_FACEBOOK_PROPERTY = "og:image"
    }

    override fun RBuilder.render() {
        meta {
            attrs[PROPERTY_KEY] = URL_META_FACEBOOK_PROPERTY
            attrs[CONTENT_KEY] = props.metaInfoFacebook.url
        }

        meta {
            attrs[PROPERTY_KEY] = TYPE_META_FACEBOOK_PROPERTY
            attrs[CONTENT_KEY] = props.metaInfoFacebook.type
        }

        meta {
            attrs[PROPERTY_KEY] = TITLE_META_FACEBOOK_PROPERTY
            attrs[CONTENT_KEY] = props.metaInfoFacebook.title
        }

        meta {
            attrs[PROPERTY_KEY] = DESCRIPTION_META_FACEBOOK_PROPERTY
            attrs[CONTENT_KEY] = props.metaInfoFacebook.description
        }

        meta {
            attrs[PROPERTY_KEY] = IMAGE_META_FACEBOOK_PROPERTY
            attrs[CONTENT_KEY] = props.metaInfoFacebook.image
        }
    }
}

external interface MetaInfoFacebookProps : RProps {
    var metaInfoFacebook: MetaInfoFacebook
}

I want to get meta tags of a page and append this component to existing tags. Is this possible? By getting document.head container and using child(MetaInfoFacebook ::class){} i replace existing tags, which i dont want to