Hi all! Hope everyone is well. I'm currently worki...

# javascript

[Benjamin Charais]

Hi all! Hope everyone is well. I'm currently working in a multiplatform project where I have an NPM dependency. I've been trying to figure out how to compile the dependency into my output so that it isn't necessary for a consumer to resolve the dependency.
We have a multiplatform module, (core), and a kotlin/js standalone that will be used as an SDK, the JS module depends on the core. Currently any consumer must have the package installed via NPM in some way. Is this out of the box possible, or is anyone aware of work around?

[turansky]

Consumer - Kotlin/JS app or JS/TS app?

[Benjamin Charais]

JS

[Benjamin Charais]

Core (Multiplatform/JS) -> SDK (Kotlin/JS) -> Consumer (Raw JS/TS)
Between Core and SDK, hopefully compile in the dependent NPM module, so Consumer does not need to resolve.

[turansky]

Distribution will contain all dependencies inside by default (browser target)

[Benjamin Charais]

Interesting. When I am running nodeProductionLibraryDistribution my stub app still wants to try to resolve the NPM module. I can't find any reason it would expect to do so via the package.json, or other files.

[turansky]

You can use browser target to build Node lib with dependencies inside

[Benjamin Charais]

user browserProductionLibraryDistribution instead?

[turansky]

Yes, with Node specific webpack configuration

[Benjamin Charais]

I'll give it a shot, do you know of any documentation that more clearly defines out these nuances? Kotlin/JS seems to be a little short on that front compared to the rest of the ecosystem.

[Benjamin Charais]

Also, thanks 🙂

[turansky]

AFAIK Target configuration required or globalThis configuration (it was discussed in this channel)

[turansky]

It’s in output

[Benjamin Charais]

Sadly -- same result...
Core Gradle: -- the actual dependency inclusion (Core would be preferred)

implementation(npm(module.absoluteFile))

SDK:

implementation(project(":core"))

Output json:

{
  "name": "sdk",
  "version": "6.6.6",
  "main": "sdk.js",
  "types": "sdk.d.ts",
  "devDependencies": {
    "source-map-support": "0.5.20"
  },
  "dependencies": {},
  "peerDependencies": {},
  "optionalDependencies": {},
  "bundledDependencies": []
}

Yet still when trying to run stub app:

ERROR in ../../sdk/js/build/productionLibrary/sdk.js 
Module not found: Error: Can't resolve 'our_npm_module' in '/Users/***/sdk/js/build/productionLibrary'
resolve 'our_npm_module' in '/Users/***/sdk/js/build/productionLibrary'
  Parsed request is a module
  using description file: /Users/***/sdk/js/build/productionLibrary/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

It will only work if I manually include the npm module in the stub app.

[turansky]

kotlin.js {
    browser {
        webpackTask {
            output.libraryTarget = KotlinWebpackOutput.Target.COMMONJS
            output.globalObject = KotlinWebpackOutput.Target.THIS
        }
    }
}

[turansky]

Screenshot 2022-04-24 at 04.34.53.png

[Benjamin Charais]

Ahhh I see

[turansky]

+ binaries.executable() (for distribution)

[turansky]

Distribution located in build/distributions folder

[Benjamin Charais]

No change, and I noticed the output file had a bunch of logic checking for existence of the npm module...
Is it possible that using 1.6.10 is an issue? Currently we're locked to that version, but I know 1.6.20 has a lot of JS updates.

[turansky]

Do you check distribution or compilation result?

[turansky]

Distribution required

[Benjamin Charais]

I see. It isn't actually generating in the build/distributions from that task

[Benjamin Charais]

running browserProductionLibraryDistribution -- checked the module build folder, and projectRoot

[Benjamin Charais]

Only comes out under build/productionLibrary

[Benjamin Charais]

Core: (Multiplatform)

[turansky]

./gradlew build ?

[turansky]

More related task you can find after

[Benjamin Charais]

Ah yeah build does make dist, I'll try using that, I do see in the js the checks for the module

[Benjamin Charais]

Yup -- it still expects the module to exist in the consuming environment. Doesn't make sense to me that it would expect it transitively.

ERROR in ./sdk.js 
Module not found: Error: Can't resolve 'needed_npm_module' in '/Users/***/sdk/js/build/dist'

[turansky]

It looks like you don’t use distribution

[turansky]

But use compilation result

[Benjamin Charais]

dist has... sdk.zip, which is just a zipped npm module, and that's what I used, am I supposed to use something else?

[Benjamin Charais]

If I remove the @JsModule annotations, the output JS doesn't check for the NPM module in the compilation... but then I don't think it actually includes it in the klib for the SDK to use, since it actually runs the app, but crashes because it cant find module.

[turansky]

@JsModule ?

[turansky]

Is it for external library?

[Benjamin Charais]

Yeah

[Benjamin Charais]

External lib written in JS that I want to compile in with my Kotlin, and not need the dep externally.

[Benjamin Charais]

But reading on the annotations...
JsModule:
import - name of a module to import declaration from. It is not interpreted by the Kotlin compiler, it's passed as is directly to the target module system.

So. Using these annotations tell Kotlin to pass on the resolution of the dependency? -- That kinda means there's no point in bringing in the npm module in my kmp module

[turansky]

Expected root cause - wrong JS used 😞

[Benjamin Charais]

I Guess what I'd rather do knowing this, is create it as a wrapper to the lib, and drive it all from Kotlin, like the official Kotlin React wrapper.... Still kind of leaves me with the same problem, but at least some direction.