Skip to content

[WASM BrowserRouter] Failed to navigate: Maximum call stack exceeded #421

@exaucae

Description

@exaucae

Summary: I'm unable to navigate to another screen in a wasmjs app. Individual routes /hello and /world are accessible when directly entered in the browser; Webpack devser config has also been properly added.

Dependency version:

wasmJsMain.dependencies {
  implementation("app.softwork:routing-compose:0.4.0")
 }

Reproducible steps:

// webpack.config.d/config.devServer.js
config.devServer = {
    ...config.devServer, // Merge with other devServer settings
    "historyApiFallback": true
};
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import app.softwork.routingcompose.BrowserRouter
import app.softwork.routingcompose.Router
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.ComposeViewport
import kotlinx.browser.document

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    val body = document.body ?: throw IllegalStateException("No document.body")
    ComposeViewport(body) {
        App()
    }
}

@Composable
internal fun App() {
    BrowserRouter(initPath = "/hello") {
        route("/hello") {
            Hello()
        }
        route("/world") {
            World()
        }
    }
}

@Composable
fun Hello() {
    val router = Router.current
    Text("Hello World")
    Button(onClick = { router.navigate("/world") }) {
        Text("Go to World")
    }
}

@Composable
fun World() {
    val router = Router.current
    Text("World")
    Button(onClick = { router.navigate("/hello") }) {
        Text("Go to Hello")
    }
}

image

On Click, here's the browser webpack error:

Uncaught runtime errors:
×
ERROR
Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f598e)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)
    at <my.app:web>.app.softwork.routingcompose.pushState (http://localhost:8080/web.wasm:wasm-function[65617]:0x8f5997)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions