Hello guys. How can I configure Kotlin/JS project ...

# javascript

[Jan Tobola]

Hello guys. How can I configure Kotlin/JS project to output a library (e.g., some React components) and then use it from a traditional JS React project?

I tried this

plugins {
    kotlin("js") version "1.8.20"
}

group = "me.tobol"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    testImplementation(kotlin("test"))
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react:18.2.0-pre.346")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:18.2.0-pre.346")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion:11.9.3-pre.346")
}

kotlin {
    js(IR) {
        binaries.library()
        generateTypeScriptDefinitions()
        browser {
            commonWebpackConfig {
                cssSupport {
                    enabled.set(true)
                }
            }
        }
    }
}

which produces package.json *.js and *.d.ts files in build/productionLibrary dir.
I've also tried to add it as a dependency to my JS project like this:

"hybrid-app": "file:./build/productionLibrary"

yarn install was successful, IntelliJ idea can see ts declarations, so I was able to import my kt component like this:

import {Welcome} from "hybrid-app";

but I ended with lots of runtime errors:

Failed to parse source map from 'C:\Users\tobol\WORKSPACE\compileSync\js\main\productionLibrary\kotlin\commonMainSources\libraries\stdlib\src\kotlin\util\Standard.kt' file: Error: ENOENT: no such file or directory, open 'C:\Users\tobol\WORKSPACE\compileSync\js\main\productionLibrary\kotlin\commonMainSources\libraries\stdlib\src\kotlin\util\Standard.kt'

Failed to parse source map from 'C:\Users\tobol\WORKSPACE\compileSync\js\main\productionLibrary\kotlin\jsMainSources\libraries\stdlib\js\src\kotlin\dynamic.kt' file: Error: ENOENT: no such file or directory, open 'C:\Users\tobol\WORKSPACE\compileSync\js\main\productionLibrary\kotlin\jsMainSources\libraries\stdlib\js\src\kotlin\dynamic.kt'

Failed to parse source map from 'C:\Users\tobol\src\main\kotlin\Welcome.kt' file: Error: ENOENT: no such file or directory, open 'C:\Users\tobol\src\main\kotlin\Welcome.kt'

Failed to parse source map from 'C:\leonid.khachaturov\code\kotlin-wrappers\kotlin-csstype\src\main\generated\csstype\Color.functions.kt' file: Error: ENOENT: no such file or directory, open 'C:\leonid.khachaturov\code\kotlin-wrappers\kotlin-csstype\src\main\generated\csstype\Color.functions.kt'

Failed to parse source map from 'C:\leonid.khachaturov\code\kotlin-wrappers\kotlin-csstype\src\main\generated\csstype\Length.kt' file: Error: ENOENT: no such file or directory, open 'C:\leonid.khachaturov\code\kotlin-wrappers\kotlin-csstype\src\main\generated\csstype\Length.kt'

Failed to parse source map from 'C:\leonid.khachaturov\code\kotlin-wrappers\kotlin-emotion\src\main\kotlin\emotion\css\ClassName.kt' file: Error: ENOENT: no such file or directory, open 'C:\leonid.khachaturov\code\kotlin-wrappers\kotlin-emotion\src\main\kotlin\emotion\css\ClassName.kt'

All paths in source maps are incorrect.

{"version":3,"sources":["../../../../../../../../../leonid.khachaturov/code/kotlin-wrappers/kotlin-react-dom/src/main/generated/react/dom/html/ReactHTML.kt"]

What am I doing wrong? Thanks

[Jan Tobola]

I forgot to mention that component is actually rendered correctly in the JS project. Only those source maps fail.

[Jan Tobola]

Ok, this is probably related to this issue https://youtrack.jetbrains.com/issue/KT-47968/KJS-IR-Debug-in-external-tool-cant-step-into-library-function-with-available-sources#focus=C[…]317.0-0