Using Splide Javascript Library in KotlinJS frontend

Question

I'm trying to find a kotlin based framework for a web-app and decided to try KVision as frontend framework (https://kvision.io). I tried to use an external javascript library called Splide (https://splidejs.com) to get a slider, but I can't get it to run within my frontend.

My build.gradle.kts looks like this:

import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig

plugins {
    val kvisionVersion: String by System.getProperties()
    val kotlinVersion: String by System.getProperties()

    kotlin("plugin.serialization") version kotlinVersion
    kotlin("js")
    id("io.kvision") version kvisionVersion
}
val kvisionVersion: String by System.getProperties()
val webDir = file("src/main/web")
version = "0.0.1.alpha1"



dependencies {
    implementation(project(":json-dto"))
}


kotlin {
    js(IR) {
        browser {
            runTask {
                outputFileName = "kreatief.main.bundle.js"
                sourceMaps = false
                devServer = KotlinWebpackConfig.DevServer(
                    open = false,
                    port = 3000,
                    static = mutableListOf("$buildDir/processedResources/js/main")
                )
            }
            webpackTask {
                outputFileName = "kreatief.main.bundle.js"
            }
            testTask {
                useKarma {
                    useChromeHeadless()
                }
            }
        }
        binaries.executable()
    }
    sourceSets["main"].dependencies {
        implementation(npm("sass", "^1.29.0"))
        implementation(npm("sass-loader", "^10.1.0"))
        implementation(npm("@splidejs/splide", "4.0.0"))
        implementation("io.kvision:kvision:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap:$kvisionVersion")
        implementation("io.kvision:kvision-i18n:$kvisionVersion")
        implementation("io.kvision:kvision-rest:$kvisionVersion")
        implementation("io.kvision:kvision-routing-navigo-ng:$kvisionVersion")
        implementation("io.kvision:kvision-fontawesome:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-icons:$kvisionVersion")
        implementation("io.kvision:kvision-toastify:$kvisionVersion")
        implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
    }
    sourceSets["test"].dependencies {
        implementation(kotlin("test-js"))
        implementation("io.kvision:kvision-testutils:$kvisionVersion")
    }
    sourceSets["main"].resources.srcDir(webDir)
}

I defined a external class like this:

@JsModule("@splidejs/splide")
@JsNonModule
external class Splide(element: dynamic, options: dynamic) {
    fun mount(): Splide
}

And tried to use it like this:

 val splideElement = document.getElementById("mySplide")
 val options = json("perPage" to 3) // Specify Splide options here
 Splide(splideElement!!, options).mount()

When I call the code, I get this error: Splide is not a constructor

I'm a bit lost here, as the Splide is called via the constructor call. There seems to be some javascript code behind it, but I don't know what exactly I have to call. I tried to find examples but they are often not really complex (like the kotlinJS example with is-sorted). I also looked up the questions with the kotlin-js-interop tag without finding a solution for my problem. It seems that I'm missing or misunderstood something.

I'm pretty sure my external class is wrong, but I don't know how to fix it. What is the correct way to use Splide (or any more complex external javascript library) in kotlinJS?

Any help is appreciated, thank you in advance!