I am trying to use the library html-react-parser i...

# react

[Nicodemus Ojwee]

I am trying to use the library html-react-parser in my React application that uses IR backend. I got the code from my old project that was not using IR backend, however it seems not to work like before.
The error i get in the console says:
Uncaught TypeError: HTMLReactParser is not a function

This is how the module is defined.

@file:JsModule("html-react-parser")
@file:JsNonModule
@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_FINAL_MEMBER", "RETURN_TYPE_MISMATCH_ON_OVERRIDE", "CONFLICTING_OVERLOADS", "EXTERNAL_DELEGATION")

package libs

import react.ReactElement

external interface HTMLReactParserOptions {
    var htmlparser2: Any? /* ParserOptions & DomHandlerOptions */
        get() = definedExternally
        set(value) = definedExternally
    var library: dynamic
        get() = definedExternally
        set(value) = definedExternally
    var replace: ((domNode: dynamic /* Comment | Element | Node | ProcessingInstruction | Text */) -> dynamic)?
        get() = definedExternally
        set(value) = definedExternally
    var trim: Boolean?
        get() = definedExternally
        set(value) = definedExternally
}

@JsName("HTMLReactParser")
external fun parse(html: String, options: HTMLReactParserOptions = definedExternally): ReactElement

[turansky]

Does it work with commonjs module kind?

[Nicodemus Ojwee]

Yes, it works with commonjs.

[turansky]

JsNonModule can be removed in that case 🙂

[Nicodemus Ojwee]

@turansky It brings the same error even after removing JsNonModule .
I have skipped it for now since it was making me lag behind and using dangerouslySetInnerHTML for now. I will get back to it later,
This is the library though.
https://www.npmjs.com/package/html-react-parser

[Nicodemus Ojwee]

@turansky I think i figured it out. HTMLReactParser is not a function but a functional component.

[turansky]

Functional component must have props parameter, but I see String instead

[turansky]

Is it legal? 🙂

[turansky]

Also I see second props parameter

[Nicodemus Ojwee]

Let me share the generated code using dukat that worked for me. The one i had posted changed slightly.

[Nicodemus Ojwee]

@file:JsModule("html-react-parser")
@file:JsNonModule
@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_FINAL_MEMBER", "RETURN_TYPE_MISMATCH_ON_OVERRIDE", "CONFLICTING_OVERLOADS")

import react.ReactElement
import kotlin.js.*

external interface HTMLReactParserOptions {
    var htmlparser2: Any? /* ParserOptions? & DomHandlerOptions? */
        get() = definedExternally
        set(value) = definedExternally
    var library: dynamic?
        get() = definedExternally
        set(value) = definedExternally
    var replace: ((domNode: dynamic /* Comment | Element | Node | ProcessingInstruction | Text */) -> dynamic)?
        get() = definedExternally
        set(value) = definedExternally
    var trim: Boolean?
        get() = definedExternally
        set(value) = definedExternally
}

@JsName("default")
external fun HTMLReactParser(html: String, options: HTMLReactParserOptions = definedExternally): ReactElement

[turansky]

It looks like HOC factory

[turansky]

HTMLReactParser_kt.kt

[Nicodemus Ojwee]

Yes, this one worked. Thanks.
I had moved on from this but decided to figure it out today just in case someone comes across the same issue 😅

[turansky]

@file:JsModule("html-react-parser")

@JsName("default")
external fun HTMLReactParser(
    html: String, 
    options: HTMLReactParserOptions = definedExternally
): ReactElement

With @JsImport

@JsImport("html-react-parser", JSImport.Default)
external fun HTMLReactParser(
    html: String, 
    options: HTMLReactParserOptions = definedExternally
): ReactElement

https://youtrack.jetbrains.com/issue/KT-46164

[Nicodemus Ojwee]

@turansky
My IDE can't resolve @JsImport.
Is it for Kotlin version 1.5?

[turansky]

It’s from future Kotlin! 🙂
Feel free to vote.