Kotlin JavaScript: Bundle for usage in React app

Question

I have a Kotlin JS project that I like to export so that it can be used in a non-Kotlin React app.

Things I tried (let's say the module is called exportedlib):

Export it as CommonJS module, compiling it with gradlew compileKotlinJs.

I then copied build/js/packages/exportedlib/kotlin/exportedlib.js to the React app and imported it with import exportedlib from './exportedlib' in App.js.

When compiling with npm start I then get this error message: Module not found: Can't resolve 'kotlin'

I then also imported kotlin.js from build/js/packages_imported/kotlin/1.3.72/kotlin.js into the React app.

Then I get the error message:

./src/kotlin.js
  Line 2:39:      'define' is not defined                                                no-undef

As above didn't work I also added the browser target in build.gradle and exported it with gradlew browserDistribution.

Then I get these error messages from npm:

./src/exportedlib.js
  Line 1:1:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:112:    'define' is not defined                                                no-undef
  Line 1:123:    'define' is not defined                                                no-undef
  Line 1:500:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
// ... a lot of other "Expected an assignment or function call and instead saw an expression" error messages

Can anybody help me to export a Kotlin JS lib so that it can be used in a React app?

Here's my build.gradle:

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.72'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin.target.nodejs { }

// added as above didn't work
kotlin.target.browser { }

compileKotlinJs.kotlinOptions.moduleKind = "commonjs"

Update

vanyochek's answer works for me when exported with ./gradlew compileProductionExecutableKotlinJs, but only works for Kotlin 1.4 M2 with experimental IR backend.

Any solution for Kotlin 1.3 would be appreciated.

Hi, I have same issues. Did you managed it to work somehow?

Veljko
– Veljko

2020-06-18 10:15:28 +00:00
Commented Jun 18, 2020 at 10:15 — Veljko
– Veljko, Commented Jun 18, 2020 at 10:15

vanyochek · Accepted Answer · 2020-06-22 11:47:44Z

2

You can try to use 1.4-M2 version of Kotlin and IR backend. You need to change build.gradle file:

plugins {
    id 'org.jetbrains.kotlin.js' version '1.4-M2'
}

repositories {
    mavenCentral()
    maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin {
    js(IR) {
        useCommonJs()
        browser {}
        nodejs {}
        binaries.executable()

        compilations.all {
            kotlinOptions.moduleKind = "commonjs"
        }
    }
}

and settings.gradle:

pluginManagement {
    repositories {
        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }

        mavenCentral()

        maven { url 'https://plugins.gradle.org/m2/' }
    }
}
rootProject.name = 'exportedlib'

After compilation of JS just add exportedlib.js to your React project.

Note: Kotlin 1.4-M2 and IR backend aren't stable.

answered Jun 22, 2020 at 11:47

vanyochek

9255 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dankito Over a year ago

It works for me when exported with the newly introduced Gradle task compileProductionExecutableKotlinJs. I'd still prefer a solution for Kotlin 1.3 as it's quite a huge project and wouldn't like to use unstable Kotlin 1.4 M2 yet. But if within 2 weeks no-one finds a solution for 1.3 I will accept your answer. But thanks for your answer, it helped me to get it running!

Collectives™ on Stack Overflow

Kotlin JavaScript: Bundle for usage in React app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related