Kotlin/JS React: can't use custom react component

Question

Hi Im trying to add a custom react component based on the tutorial here:

https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction

I have the following component and it works fine:

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

package ui.bridges

import react.*

@JsName("ReactYouTubeLite")
external val YoutubePlayer: ComponentClass<ReactYouTubeProps>

external interface ReactYouTubeProps : Props {
    var url: String
}

But when im trying to add a custom component for react-qr like so:

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

import react.*

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


external interface QRCodeProps : Props {
    var value: String
}

Im getting the following error:

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.

Check the render method of `ConnectComponent`.
    at ConnectComponent (webpack-internal:///./kotlin/web.js:132824:24)
    at div
    at div
    at div
    at ContentComponent (webpack-internal:///./kotlin/web.js:132449:24)
    at DashboardComponent (webpack-internal:///./kotlin/web.js:133508:24)

react_devtools_backend.js:2540 Error: Element 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.

Check the render method of `ConnectComponent`.
    at createFiberFromTypeAndProps (react-dom.development.js?f6e0:25058)
    at createFiberFromElement (react-dom.development.js?f6e0:25086)
    at createChild (react-dom.development.js?f6e0:13446)
    at reconcileChildrenArray (react-dom.development.js?f6e0:13719)
    at reconcileChildFibers (react-dom.development.js?f6e0:14125)
    at reconcileChildren (react-dom.development.js?f6e0:16997)
    at updateHostComponent (react-dom.development.js?f6e0:17632)
    at beginWork (react-dom.development.js?f6e0:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js?f6e0:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?f6e0:3994)

This is how i add the youtube video and the qr code. When i comment out the qr part, the video works fine. Something tells we me there's in a difference in how the components are built. But im not sure what. I have almost no knowledge about React so sorry if this a stupid question :)

  div {

                child(YoutubePlayer) {
                    attrs {
                        url = "https://www.youtube.com/watch?v=8o312hBgEmM"
                    }
                }
                child(QRCode) {
                    attrs {
                        value = "XYZ"
                    }
                }
            

        }

Koch · Accepted Answer · 2022-06-07 23:11:13Z

1

I've had the same issue and this is what i had to change.

BEFORE :

package components
import react.ComponentClass
import react.Props

@JsModule("react-time-picker")
@JsNonModule
@JsName("TimePicker")
external val TimePicker : ComponentClass<TimePickerProps>

external interface TimePickerProps : Props {
var value : String
var onChange: (String)->Unit
}

AFTER

@file:JsModule("react-time-picker")
@file:JsNonModule

package components

import react.ComponentClass
import react.Props

@JsName("default")
 external val TimePicker : ComponentClass<TimePickerProps>

external interface TimePickerProps : Props {
var value : String
var onChange: (String)->Unit
}

Basically, make sure the "@file:JsModule("your-node-module") " is at the top level, and the jsName should be default apparently

edited Jun 7, 2022 at 23:11

answered Jun 6, 2022 at 22:24

Koch

6045 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sn0ep · Accepted Answer · 2021-11-14 22:49:56Z

0

this is what i ended up with and it works:

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

package ui.bridges

import styled.StyledProps

@JsName("default")
external val QRCode: react.FC<QRCodeProps>


external interface QRCodeProps : StyledProps {
    var value: String
}

answered Nov 14, 2021 at 22:49

sn0ep

3,9438 gold badges41 silver badges68 bronze badges

1 Comment

Koch Over a year ago

ComponentClass would be fine too, you just had to switch jsName to default

Collectives™ on Stack Overflow

Kotlin/JS React: can't use custom react component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related