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()
}
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>