Kotlin/JS引入react-youtube依赖报错，求解决方案

问题描述 #

将已弃用的react-youtube-lite替换为react-youtube后，浏览器控制台出现报错：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

已更新build.gradle.kts依赖：

dependencies {
...
    //Video Player (chapter 7)
    implementation(npm("react-youtube-lite", "1.5.0"))
    implementation(npm("react-youtube", "9.0.3"))
...
}

执行browserRun后yarn.lock已更新，react-youtube存在其中。原组件代码如下：

@file:JsModule("react-youtube")
@file:JsNonModule

import react.*

@JsName("ReactYoutube")
external val ReactYoutube: ComponentClass<ReactYoutubeProps>

external interface ReactYoutubeProps : Props {
    var videoId: String?
    var opts: Any
}

解决方案 #

报错核心原因是错误指定了组件的导出名称：react-youtube的播放器组件是默认导出，而非名为ReactYoutube的命名导出。修改组件代码如下：

@file:JsModule("react-youtube")
@file:JsNonModule

import react.*

// 匹配react-youtube的默认导出
@JsName("default")
external val YouTube: ComponentClass<YouTubeProps>

external interface YouTubeProps : Props {
    var videoId: String?
    // 使用dynamic适配JS配置对象的灵活结构
    var opts: dynamic
}

关键说明 #

• react-youtube在JS中的标准导入方式为import YouTube from 'react-youtube'，对应Kotlin/JS中需用@JsName("default")获取默认导出；
• 将opts类型从Any改为dynamic，能更好支持YouTube播放器配置对象的属性访问和类型推断；
• 若不再需要旧库react-youtube-lite，建议从build.gradle.kts中移除该依赖，避免冗余。

内容的提问来源于stack exchange，提问作者Alex Buznik