Kotlin/JS React引入react-qr-code自定义组件报type invalid错误如何解决

问题原因 #

你遇到的报错本质是两个React组件npm包的导出规则存在差异：

• react-youtube-lite 采用命名导出规则，所以你通过@JsName("ReactYouTubeLite")指定导入对应命名的组件逻辑正确，运行正常
• react-qr-code 采用默认导出规则，你用命名导出的封装逻辑无法正确获取组件，最终拿到的是undefined，触发React的组件类型无效报错

解决方法 #

修改react-qr-code的封装代码，删除@JsName("QRCode")注解即可，Kotlin/JS处理@JsModule时会自动匹配默认导出的内容：

@file:JsModule("react-qr-code")
@file:JsNonModule

import react.*

external val QRCode: ComponentClass<QRCodeProps>

external interface QRCodeProps : Props {
    var value: String
    // 后续需要其他配置属性（如size、bgColor、fgColor等）也可在此处补充声明
}

如果需要更显式的声明，也可以将@JsName的值改为default，效果完全一致：

@JsName("default")
external val QRCode: ComponentClass<QRCodeProps>

快速判断导出规则的方法 #

你可以通过npm包的官方示例用法区分导出类型：

• 导入语句带大括号：import { X } from 'xxx' 为命名导出，需要加@JsName("X")注解
• 导入语句不带大括号：import X from 'xxx' 为默认导出，不需要加@JsName注解，或显式指定@JsName("default")

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