A modern programming language that makes developers happier.

kotlinlang

I am stuck on trying to import an npm library called whereby (an embeddable meeting)

I have:

```@JsModule("@whereby.com/browser-sdk/embed")
@JsNonModule
external object Whereby {}```
When I try to run this, I get:

Module not found: Error: Package path ./dist/embed/index.esm.js is not exported from package /expanse/code/startup/interview/build/js/node_modules/@whereby.com/browser-sdk (see exports field in /expanse/code/startup/interview/build/js/node_modules/@whereby.com/browser-sdk/package.json)


Their package.json (in @whereby.com/browser-sdk) is attached.

package.json

Ah - the above is with whereby.js in webpack.conf.d with:

```config.resolve = config.resolve || {};
config.resolve.alias = config.resolve.alias || {};
config.resolve.alias['@whereby.com/browser-sdk/embed'] = '@whereby.com/browser-sdk/dist/embed/index.esm.js';```
If I try the above without this file in place, I get this error instead:

Module not found: Error: Can't resolve '@whereby.com/browser-sdk/embed' in '/expanse/code/startup/interview/build/js/packages/interview/kotlin'

2024-07-24_09-02.png

Here is another experiment:

```@JsModule("@whereby.com/browser-sdk/dist/embed/index.esm.js")
@JsNonModule
external object Whereby

fun initWhereby() {
    console.dir(Whereby)```
Module not found: Error: Package path ./dist/embed/index.esm.js is not exported from package /expanse/code/startup/interview/build/js/node_modules/@whereby.com/browser-sdk (see exports field in /expanse/code/startup/interview/build/js/node_modules/@whereby.com/browser-sdk/package.json)

...which is baffling given:

```  "exports": {
    "./react": {
      "import": "./dist/react/index.esm.js",
      "types": "./dist/react/index.d.ts",
      "require": "./dist/react/index.cjs",
      "default": "./dist/react/index.esm.js"
    },
    "./embed": {
      "import": "./dist/embed/index.esm.js",
      "types": "./dist/embed/index.d.ts",
      "require": "./dist/embed/index.cjs",
      "default": "./dist/embed/index.esm.js"
    }
  },```


```@file:JsModule("@whereby.com/browser-sdk/embed")

external fun someFunction {}```
+ `target = "es2015"` for Kotlin?

Hm. If I try:

```@file:JsModule("@whereby.com/browser-sdk/embed")
package rcp.libs

external fun render()```
...and
```object WherebyHelper {

    fun initWhereby() {
        ...
        if (wherebyMeetings.length &gt; 0) {
            render()
        }
    }
}```
...I get:
e: file:///expanse/code/startup/interview/src/jsMain/kotlin/rcp/libs/WherebyHelper.kt:21:13 When accessing module declarations from UMD, they must be marked by both @JsModule and @JsNonModule

Where does that go? I had:

```webpackTask {
          output.libraryTarget = "es2015"
       }
            ```


<https://github.com/turansky/kfc-plugins/blob/baa81833d97311306fb06e24905c9fe870df5e91/kfc/kfc-gradle-plugin/src/main/kotlin/io/github/turansky/kfc/gradle/plugin/KotlinMultiplatform.kt#L62|Here>

Hm, I can't make the IDE happy with any variation of :point_up: , but I tried:
```            useEsModules()```
...and at least I'm able to start the app. There are strange errors which I'll debug.

And ok, now I understand. So in general the presence of this kind of `exports` declaration in package.json implies the need for a file: based mapping? (i.e. <https://kotlinlang.org/docs/js-modules.html#apply-jsmodule-to-packages>)

No, not yet. I am waiting for the .1 release :slightly_smiling_face: