如何从外部JS库添加React组件？react-mui-scheduler加载报错排查

错误提示 #

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)

项目依赖配置（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")

    }
}

尝试的组件引入代码 #

方式1 #

import react.Props

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

方式2 #

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

问题原因 #

1. 库的Scheduler组件是默认导出类型，但当前外部声明写法未正确映射该导出，导致Kotlin将组件解析为普通对象而非React组件函数。
2. @JsNonModule注解不适用于npm包，该注解针对传统非模块脚本设计，添加后会干扰Kotlin/JS的ES模块解析逻辑。

解决方法 #

1. 修正外部组件声明 #

删除@JsNonModule，正确映射默认导出并补充组件Props类型：

@file:JsModule("react-mui-scheduler")

package com.company.external.scheduler

import react.FC
import react.Props

external val default: FC<SchedulerProps>

// 根据库的实际参数定义Props，可按需扩展
external interface SchedulerProps : Props {
    var events: Array<dynamic>
    var title: String?
    var onEventClick: ((dynamic) -> Unit)?
}

2. 正确使用组件 #

给默认导出起别名后使用：

val Scheduler = default

val MyComponent = VFC {
    Scheduler {
        events = arrayOf(
            js("{ title: '测试事件', start: new Date(), end: new Date() }")
        )
        title = "日程表"
    }
}

3. 清理缓存重新构建 #

执行命令清理构建缓存，避免模块解析残留：

./gradlew clean jsBrowserDevelopmentRun

内容的提问来源于stack exchange，提问作者John Doe