:wave: I'm trying to understand Kotlin/JS and how ...

# javascript

[dwursteisen]

👋 I'm trying to understand Kotlin/JS and how module system is working. I didn't succeed to do what I want.
• I have a gradle kotlin multiplatform configured to produce some javascript using only the browser configuration.

mpp.js {
       this.browser {
                     this.webpackTask {
                     this.compilation.kotlinOptions {
                     this.sourceMap = true
                     this.sourceMapEmbedSources = "always"
                     this.freeCompilerArgs += listOf("-Xopt-in=kotlin.ExperimentalStdlibApi")
               }
           }
     }
    this.binaries.executable()
}

• I'm trying to expose one method of my kotlin code and using it in my webpage.

package my.module
@JsExport fun startCube() { // ... }

• I'm trying to import this module from my index.html. And it's not working 🤔

<script type="module">
    import './my-module.js'; // the path is correct
</script>

• I got this error message :

Uncaught TypeError: Cannot set property 'my-module.js' of undefined
    at webpackUniversalModuleDefinition (minigdx-docs.js:9)

• By looking at the code, I see that the module UMD "module system" try to start and load the module but failed to do so: root["my-module"] = factory(); // root is undefined
• I look in the Kotlin/JS documentation and how javascript module is working but I failed to understand what's wrong 🤔 (I far to be at ease in the javascript ecosystem)
• &TLDR: Do you have any advise, example to load a kotlin js module from a browser?

[turansky]

Check which modules do you have in build/js/packages
(after build)

Specify moduleName in build script (JS target section) if you want another name

[turansky]

Example with index.html

[turansky]

Example with react

[dwursteisen]

Thanks for your example 🙂
In fact, I wanted to create multiple "entry points" to my javascript module (ie: multiple mains method?)

I think I achieved it in the way it means to be.

1. I import my module using <script src=my-module.js>
2. my main function is empty (fun main() = Unit)
3. I call my function using this code: window["my-module"].my.package.myFunction();