Hi team, im able to generate node distribution for...

# javascript

[Sunil Kumar]

Hi team, im able to generate node distribution for my test library. And while installing it from local using npm install <path to tgz>,

Then it installs as well in my react project., But while im trying to use the class. It is coming as undefined.

Following is my generated typescript definition file: kmm-shared-library.d.ts

type Nullable<T> = T | null | undefined
export declare class Greeting {
    constructor();
    greet(): string;
}
export declare class JSPlatform /* implements Platform */ {
    constructor();
}
export as namespace KMPProjectWithoutSharedUi_shared;

But here while im using Greeting class, its showing undefined in console. Any idea how to use the exported npm package?

[Artem Kobzar]

Could do you share how you import the class?
Also, could you please share the options inside the js block in your build.gradle.kts?

[Sunil Kumar]

Hi, sure,
this is js block inside build.gradle:

js(IR) {
    moduleName = "kmm-shared-library"
    version = kmmVersion
    nodejs() //for publishing library as npm package to npm
    binaries.library() //for publishing library as npm package to npm, executable is for running in browser
    generateTypeScriptDefinitions()

    binaries.withType<JsIrBinary>().all {
        this.linkTask.configure {
            kotlinOptions {
                sourceMap = false
            }
        }
    }
}

Im using it like below:

import { Greeting } from "shared";

....
console.log("kmmSharedLibrary=", Greeting());

ANd this is the generated package.json file in shared/build/packages/js

{
  "main": "kmm-shared-library.js",
  "types": "kmm-shared-library.d.ts",
  "version": "0.0.1",
  "name": "shared",
  "dependencies": {
    "node-fetch": "2.6.7",
    "abort-controller": "3.0.0",
    "ws": "8.5.0",
    "format-util": "^1.0.5"
  }
}

[Edoardo Luppi]

At the end of the outputted .mjs file there should an export section, could you check there if all the correct declarations are exported?

[Artem Kobzar]

By default we use UMD, as far, as I remember.
Could you try to add useEsModules into the js section?

[Edoardo Luppi]

Ah yes, you're right! There is no module system specified

[Sunil Kumar]

I tried with both useEsModules and with useCommonJs as well, But still same error in the logs: kmmSharedLibrary= undefined.

And here is my .mjs file:

import {
  protoOf180f3jzyo7rfj as protoOf,
  classMetawt99a3kyl3us as classMeta,
  setMetadataForzkg9su7xd76l as setMetadataFor,
  VOID7hggqo3abtya as VOID,
} from './kotlin-kotlin-stdlib.mjs';
//region block: imports
//endregion
//region block: pre-declaration
setMetadataFor(Greeting, 'Greeting', classMeta, VOID, VOID, Greeting);
setMetadataFor(JSPlatform, 'JSPlatform', classMeta, VOID, VOID, JSPlatform);
//endregion
function Greeting() {
}
protoOf(Greeting).greet = function () {
  return 'Hello,!';
};
function JSPlatform() {
  this.a_1 = 'Kotlin/Js';
}
protoOf(JSPlatform).b = function () {
  return this.a_1;
};
//region block: exports
export {
  Greeting as Greeting,
  JSPlatform as JSPlatform,
};
//endregion

they are exported as well i guess.

[Sunil Kumar]

That module system was specified there before as well, But i guess somehow it got removed by mistake while i was trying out few things .

[Artem Kobzar]

Could you please also check what does the export object look like?

import * as lib from "shared"

console.log(lib)

[Sunil Kumar]

After importing this, i have printed 3 things:

console.log("lib=", lib);
  console.log("Greeting=", lib.Greeting);
  console.log("Greeting()=", lib.Greeting());

And here are the console logs:

[Sunil Kumar]

It seems associatedObjectKey and associatedObjects are coming as undefined.

[Artem Kobzar]

OMG, I've just realized what the problem is. In JavaScript, to instantiate a class you need to use new keyword.
So, you just used the constructor in a wrong way:

const instance = new Greeting()

[Edoardo Luppi]

LOL

[Artem Kobzar]

I firstly thought that the Greeting class itself came as undefined

[Artem Kobzar]

But, the problem is easier to solve 😄

[Artem Kobzar]

Btw, if you turn on ES2015, such errors will be shown in runtime. To make it, you need to add the next code into your js block (if you use 2.0 Kotlin):

js {
  compilerOptions {
     target = "es2015"
  }
}

[Artem Kobzar]

More information is here: https://kotlinlang.org/docs/whatsnew20.html#new-compilation-target

[Sunil Kumar]

Lol, That happened due to Kotlin, mostly i code in Kotlin, So it happens with me some time in javascript and typescript. Btw Thanku so much for pointing it out.

And That will be great thing in Kotlin 2.0 if it will show these errors at runtime, it will save us from such blunders. 😀