I'm new to kotlin js and trying to get a KMP proje...

# javascript

[Andrew]

I'm new to kotlin js and trying to get a KMP project to work for the first time as an exported JS module/file. I can build it without errors now but trying to load the myproject.js in a chrome console I get this error. I am using reflection in one place that is just returning a KClass which says is supported. Is there anything else I need to do?

Uncaught TypeError: Kotlin.kotlin.reflect.js is undefined

[andylamax]

can you past your code? The one that throws?

[Andrew]

I was just copy and pasting the .js file generated by the compiler in chrome to see if I could use anything it defined. So not any particular code to paste except the entire file which is too large

[Andrew]

moving on from that though, I really just want to use this as a library in react and not even sure how to import it. I am using a pure javascript project and just want to use the generated js file.

[Breimer]

Gist to code should be best instead of pasting if it's long

[Andrew]

Okay here is a simple example on a new project "demotest". I added this class to commonMain, build and got a build\js\packages\demotest\kotlin\demotest.js. How do I use that file in a pure JS react app?

class HelloWorld {
val number = 42
fun GetText() = "Hello World"
}

[andylamax]

You would have to configure your bundler.

[Andrew]

how would I do that? I could not find any tutorial on how to do this, or at least something that was more up to date. Here is a stackoverflow link similar with what I am trying to do but lots of info omitted such as how its used in react.

[andylamax]

Okay, start by pasting your build.gradle, so that we may see your configuration. If you can't paste. Provide a link to it

[andylamax]

Just to clarify, And when you said pure react. You don't mean kotlin-react completely?

[Andrew]

I removed the test sources to keep it as small as possible

[Andrew]

plugins {
    id 'org.jetbrains.kotlin.multiplatform' version '1.4.10'
}

repositories {
    mavenCentral()
}
kotlin {
    js(IR) {
        browser {}
        binaries.executable()
        compilations.all {
            kotlinOptions.moduleKind = "commonjs"
        }
    }
    sourceSets {
        commonMain {}
        jsMain {}
    }
}

[Andrew]

no kotlin-react. Just trying to do the following

[Andrew]

write shared library code in commonMain -> generate a .js file -> use the .js file in a pure react/js projoect

[andylamax]

are you publishing the library to npm? or just localy to use in your project?

[andylamax]

To use any lib from kotlin in pure react, and if you are using any feature from the stdlib, you are going to have to include the kotlin.js npm dependency to your project, and also copy your js file to your project

[Andrew]

just locally. Will try the npm dependency I was not aware of that one.

[Andrew]

whats the difference between the js file in build/distributions vs build/js/packages? They have different contents

[andylamax]

build/distribution is already bundled with all dependencies
build/js/packages is just the code from the project

If you need a library, don't use the bundled one.

[Andrew]

Okay I have a file that appears to have the code I need but unsure how to use it in react

[Andrew]

For example I tried something like this

import demotest from "./demotest";
...
console.log(demotest)

which produces these errors

Line 239 'define' is not defined no-undef
Line 35 'define' is not defined no-undef
Line 969 'demotest' is not defined no-undef
Line 979 'kotlin' is not defined no-undef

[Andrew]

I do have "kotlin": "^1.4.10", listed in my package.json

[andylamax]

do you have a *.d.ts file?

[andylamax]

is that package json the one in the react project? or is it the one from build dir?

[Andrew]

react project

[Andrew]

no *.d.ts file, is this all a typescript issue?

[andylamax]

What i know is, if you are using the IR backend, then you need to export your classes and functions

[Andrew]

ok that makes sense. With IR it was generating almost empty js files, removing that I got something that looked useful but produced the errors above

[Andrew]

What is the benefit of using IR?

[andylamax]

Currently none as it is alpha. But it is the one that jetbrains plans to be supporting in long term. So, eventuall every code (jvm,js) will be using the new IR backends

[Andrew]

so without using IR, how do I use the js file it created? It looks like this currently

[Andrew]

function (root, factory) {
...
}
(this, function (_, Kotlin) {
...
}

[andylamax]

If you have all the dependencies, it should work as follows

// in kotlin

package test
class Person(val name: String)

//in javascript

import {Person} from "module-name"
let p = new Person("Andrew")

[Andrew]

Thats when I get these errors. I have kotlin in the package.json but do I need to load it somewhere so its used?

[Andrew]

src\demotest.js
  Line 2:39:   'define' is not defined    no-undef
  Line 3:5:    'define' is not defined    no-undef
  Line 13:46:  'demotest' is not defined  no-undef
  Line 14:7:   'kotlin' is not defined    no-undef

[andylamax]

How did you import your objects?

[andylamax]

in javascript ofcourse

[andylamax]

and try building your kotlin lib targeting commonJs

[Andrew]

import { Person } from "./demotest";

[Andrew]

I made a new simplified project to test this so just used the same Person class you had

[Andrew]

okay finally made some progress

[Andrew]

commonJs added the module export and require(kotlin) at the end of the file so its recognized now

[Andrew]

import * as demotest from "./demotest";

let a = new demotest.com.example.demotest.Person("test");

[andylamax]

Indeed, package names have to exactly match

[Andrew]

needs the full package name as well as import alias, is there a way around that? so I can just do new Person() or at minimum demotest.Person()

[andylamax]

You should declare your Person class on top level (not in package)

[andylamax]

although there is currently an issue that all exported packages should by default be exported to the root package

[Andrew]

okay so whatever package the kotlin code is using, the js needs the full name in object constructs as well? So nothing can be shorter than this? new <module>.<fullyQualifiedClassName>()

[andylamax]

yeap. The only available hack is by minimizing the length of the fullyQualifiedClassName (i.e) do not put your exports in any package

[Andrew]

Thanks for the help though I understand it a lot more now.