https://kotlinlang.org logo
Title
j

Jan Tobola

05/19/2023, 12:42 PM
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
I forgot to mention that component is actually rendered correctly in the JS project. Only those source maps fail.