Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ReactRouterDom] HashType undefined

See original GitHub issue

I tried out the react router examples linked in the readme and from this PR: https://github.com/JetBrains/kotlin-wrappers/pull/172

In both examples i get: TypeError: $module$react_router_dom.HashType is undefined in the console of the browser (Firefox 77.0.1, Chrome 83.0.4103.116, Safari 13.1) and i just get a blank screen.

Versions used:

val reactVersion = "16.13.1"
val reactRouterVersion = "5.1.2"
val kotlinWrapperVersion = "pre.109-kotlin-1.3.72"

Some reproduction code:

val Home = functionalComponent<RProps> { h2 { +"Home" } }
val About = functionalComponent<RProps> { h2 { +"About" } }

val Topics = functionalComponent<RProps> {
    val match = useRouteMatch<RProps>() ?: return@functionalComponent

    div {
        h2 { +"Topics" }

        ul {
            li {
                routeLink("${match.url}/components") { +"Components" }
            }
            li {
                routeLink("${match.url}/props-v-state") { +"Props v. State" }
            }
        }

        switch {
            route("${match.path}/:topicId") { child(Topic) }
            route(match.path) {
                h3 { +"Please select a topic." }
            }
        }
    }
}

external interface TopicProps : RProps {
    val topicId: String
}

val Topic = functionalComponent<RProps> {
    val topicId = useParams<TopicProps>()?.topicId ?: return@functionalComponent

    h3 { +"Requested topic ID: $topicId" }
}

fun RBuilder.appWithRouter() {
    browserRouter {
        div {
            ul {
                li {
                    routeLink("/") { +"Home" }
                }
                li {
                    routeLink("/about") { +"About" }
                }
                li {
                    routeLink("/topics") { +"Topics" }
                }
            }

            switch {
                route("/about") { child(About) }
                route("/topics") { child(Topics) }
                route("/") { child(Home) }
            }
        }
    }
}


fun main() {
    render(document.getElementById("app")) {
        appWithRouter()
    }
}

<!--suppress HtmlUnknownTarget -->
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
    <title>SomeTitle</title>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="<packageNameGoesHere!!!!!>.js"></script>
  </body>
</html>

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

Leonyacommented, Jul 3, 2020

@subroh0508 will you take a look please? This is caused by #309

1reaction

chippmanncommented, Jul 3, 2020

Yes i can confirm 5.1.2-pre.107-kotlin-1.3.72. 108 and 109 do not work. There i get the following issue: https://github.com/JetBrains/kotlin-wrappers/issues/291 and after applying the mentioned workaround i get the issue i described here.