Hello, I'm trying to use an external library (ant...

# react

[Tristan Caron]

Hello,

I'm trying to use an external library (antd), so I did this:

@file:JsModule("antd/lib/button")
package antd.lib.button

import react.RProps
import react.RState
import react.React
import react.ReactElement

@JsName("Button")
external class ButtonComponent : React.Component<RProps, RState> {
    override fun render(): ReactElement?
}

And I try to use through

package antd.lib.button

import react.RBuilder
import react.RHandler
import react.RProps

fun RBuilder.antdButton(handler: RHandler<RProps>) = child(ButtonComponent::class, handler)

But I get in the console

reflection.kt?8f80:61 Uncaught TypeError: Cannot read property '$metadata$' of undefined
    at getOrCreateKClass (reflection.kt?8f80:61)
    at getKClass (reflection.kt?8f80:23)
    at antdButton (dsl.kt?502b:11)
    at Home.render_ss14n$ (Home.kt?7b40:13)
    at eval (ReactComponent.kt?fdb7:74)
    at buildElements (RBuilder.kt?4494:73)
    at Home.RComponent.render (ReactComponent.kt?fdb7:74)
    at finishClassComponent (react-dom.development.js?9c26:7873)
    at updateClassComponent (react-dom.development.js?9c26:7850)
    at beginWork (react-dom.development.js?9c26:8225)

react-dom.development.js?9c26:9747 The above error occurred in the <Home> component:
    in Home (created by Route)
    in Route
    in div
    in Router (created by BrowserRouter)
    in BrowserRouter

Do you know what I am missing?

[Tristan Caron]

Might be coming from @JsName... It's supposed to be default maybe

[Filipp Riabchun]

You don't need to declare external component as class (in fact, it being a class or a function is implementation details)

[Filipp Riabchun]

The correct declaration looks like this:

@JsName("Button")
external val ButtonComponent : RClass<RProps>

[Tristan Caron]

This is working

@JsModule("antd/lib/button")
external val antdButton: RClass<RProps>

[Tristan Caron]

Thanks