Hi everyone! I am new to Kotlin/JS and wanted to e...

# javascript

[dpux]

Hi everyone! I am new to Kotlin/JS and wanted to explore the framework by writing helper functions (no UI) in Kotlin that could be reused in a separate react JS project. The community seems to have trouble publishing Kotlin libraries as an npm package, So I thought of putting the output of ‘browserDevelopmentWebpack’ in the src/ of React project. Still unable to load the kotlin library using require or ES6 imports. Is there a library target that I should specify for my usecase? Any samples would be appreciated. I am using Kotlin 1.3.72.

[Sean Keane]

You can create a resource folder in the target of JS, in it place your package.json and your index.js with the export for the module. When compiled this will migrate the package.json to the distribution folder. For this to work I think you need to target the browser. Once built you can just run npm publish in the distributions and it should publish as normal with the config of the package.json

[dpux]

Thank you @Sean Keane! Do you mind elaborating how to export the Kotlin functions in the aforementioned index.js file? For reference, my Kotlin module name is named libkjs and it has a helper file Person.kt. Sorry if this is too basic, I am new to the JS ecosystem.

Person.kt

[Sean Keane]

So in your Index.js you want to export the name of your distribution file. This will allow it to be accessed from the integrating party

//Export common as common
const common = require("./common.js");

module.exports = {
   common: common
};

Now, your actual code which you have should live as a kotlin file in the subdirectory for your source. You need to annotate them to make it available as an export like this.

@JsExport
class Person {
    fun helloPerson(name: String): String {
        return "helloPerson: $name"
    }

}

@JsExport
fun globalHello(name: String): String {
    return "globalHello: $name"
}

That should make them visible from TS/JS when you import the module from NPM :)

[dpux]

Makes sense. Thanks again. Just to confirm - JsExport is not required in Kotlin 1.3, right?

[Sean Keane]

It should be I think, but im running on 1.4-M1 for now and in a multiplatform project. If its available to you use it. If it works, then take it out, if that breaks it you have your answer 😉

[Sean Keane]

All of this improves in 1.4 also. The new BE greatly reduces the code size.

[dpux]

Good to know. Let me try this out!

[dpux]

@Sean Keane Unable to get this running despite applying @JsExport. In the ReactJS project, I am getting an error “TypeError: Object(...) is not a function”.
The import code is something on these lines:
import {globalHello} from ‘libkjs’;
var msg = globalHello(“From React View”)

[dpux]

The globalHello function is defined and @JsExport-ed in the Kotlin project. The index.js file for exports:
const libkjs = require(“./libkjs.js”);
module.exports = {
libkjs: libkjs
};

[Sean Keane]

You should try this
import { libkjs } from 'libkjs'

Then you can call the function from the import.
var msg = libkjs.globalHello("From React View")

The JsExport exposes the function for use, the index.js exposes the library to use it.

[Andrew]

I kind of had a question similar to this (without the npm part). I'm looking to have a shared kotlin js library with a normal javascript project. I am not sure the best way to set this up, could it be 2 different modules in an intellij project? I need to share with jvm/Android as well but ignoring that for now as I've done something similar already just not with kotlin multiplatform.

[dpux]

Still no luck @Sean Keane! I am getting this error now:
TypeError: libkjs__WEBPACK_IMPORTED_MODULE_5__.libkjs.globalHello is not a function - I do see the function in the generated JS file though.
I have tried both build variants - dev and prod. Also tried with and without JsExport.

[Sean Keane]

is it in the compiled code?

[dpux]

yes

[Sean Keane]

Can you share the compiled JS?

[dpux]

Sure. I have been using libkjs in our conversation so far, but the module is called libkjsone. The function I need to call is globalHello(string)

libkjsone.js

[dpux]

^^This is the output of browserDevelopmentWebpack, can share prod one if you prefer.

[Sean Keane]

This is good 🙂

[Sean Keane]

Ok, looks strange at the bottom, can I see the gradle config?

[dpux]

build.gradle

build.gradle

[Sean Keane]

hmmm.... I think this could be a DCE issue

[dpux]

is there a flag to disable dce?

[dpux]

what part looks strange in the compiled script I shared? I added a main function and referenced the globalHello() function to make sure it’s not removed as “dead code”. Still couldn’t get it to work.