reactjskotlinmaterial-uikotlin-multiplatformkotlin-js

How to add a react component from an external js library?


I'm trying to add a component from an external library to my react project, but I get an error when I open the page in the browser:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:28434:17)
    at createFiberFromElement (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:28460:15)
    at createChild (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:15109:28)
    at reconcileChildrenArray (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:15404:25)
    at reconcileChildFibers (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:15821:16)
    at reconcileChildren (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:19162:28)
    at mountIndeterminateComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:20152:5)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:21582:16)
    at beginWork$1 (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:27421:14)
    at performUnitOfWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26552:12)

link to component from the library: https://github.com/rouftom/react-mui-scheduler/blob/main/src/Scheduler.jsx

my build.gradle.kts :

val jsMain by getting {
    dependencies {
        implementation(project.dependencies.enforcedPlatform(kotlinw("wrappers-bom:1.0.0-pre.505")))

        implementation(kotlinw("react"))
        implementation(kotlinw("react-dom"))
        implementation(kotlinw("react-router-dom"))

        implementation(kotlinw("emotion"))
        implementation(kotlinw("mui"))
        implementation(kotlinw("mui-icons"))

        implementation(npm("react-mui-scheduler", "2.0.3"))

        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.3")

        implementation("io.ktor:ktor-client-js:$ktorVersion")
        implementation("io.ktor:ktor-serialization-kotlinx-json-js:$ktorVersion")
        implementation("io.ktor:ktor-client-content-negotiation-js:$ktorVersion")

    }
}

Here is the code I tried to use:

import react.Props

@JsModule("react-mui-scheduler")
@JsNonModule
@JsName("default")
external val Scheduler: react.FC<Props>
@file:JsModule("react-mui-scheduler")
@file:JsNonModule

package com.company.external.scheduler

import react.Props


external val Scheduler: react.FC<Props>
val MyComponent = VFC {
    Scheduler()
}

Solution

  • By typing in two days found a working solution

    @file:JsModule("react-mui-scheduler")
    @file:JsNonModule
    
    package com.company.gui.common.external.scheduler
    
    import react.Props
    
    external interface SchedulerProps : Props {
        var options: MuiSchedulerOptions
        var alertProps: dynamic
        var toolbarProps: dynamic
        var onCellClick: CellClickHandler
        var onTaskClick: TaskClickHandler
        var onEventsChange: EventsChangeHandler
        var onAlertCloseButtonClicked: AlertCloseButtonClickedHandler
        var events: Array<SchedulerEvent>
        var locale: MuiSchedulerLocale?
    }
    
    @JsName("default")
    external val Scheduler: react.FC<SchedulerProps>