"TypeError: t.instruction.replace is not a function" when navigating with the browser's history buttons

[zenorbi]

🐛 Bug Report

When I use configured routing (the app has @routes decorator) and navigate using normal links, when I use the browser's back button, I receive an exception from the Router.

🤔 Expected Behavior

The router should correctly navigate back or forward to the given URL.

😯 Current Behavior

The page stays and an exception is logged.

Uncaught (in promise) TypeError: t.instruction.replace is not a function
    processNavigation index.js:3696
    handleNavigatorNavigateEvent index.js:3658
    publish index.js:1596
    notifySubscribers index.js:2567
    navigate index.js:2491
    handleNavigatorStateChangeEvent index.js:3668
    publish index.js:1596
    notifySubscribers index.js:3274
    handlePopStateEvent index.js:3268
    execute index.js:3060
    dequeue index.js:3085
    enqueue index.js:3117
    handlePopStateEvent index.js:3267
    handleEvent index.js:3259

A bit nicer link to the relevant line:

aurelia-direct-router/packages/router/src/router.ts

Line 441 in 7e5854f

navigation.path = (navigation.instruction as string).replace(/^\//, '');

💁 Possible Solution

I don't think the code really needs to set the navigation.path, seems to work without it.

🔦 Context

I am trying to create a single page admin interface and navigate between pages.

💻 Code Sample

https://github.com/zenorbi/aurelia-direct-router-history-bug

🌍 Your Environment

Software	Version(s)
Aurelia	2.0.0-alpha.22
Language	TypeScript 4.5.2
Browser	Firefox 94.0.1
Bundler	Webpack 5.64.1
Operating System	Windows 10
NPM/Node/Yarn	NPM 8.1.0

[jwx]

@zenorbi Thanks for reporting! Could you share the routes configuration? Both the current one and the "back one", please.

[zenorbi]

@jwx Here is the @routes configuration. The app starts with the route "" and via a link, you can go to "other". You can see this here:
https://github.com/zenorbi/aurelia-direct-router-history-bug/blob/master/src/my-app.ts

@routes([
  {
    path: "",
    component: HomePage
  },
  {
    path: "other",
    component: OtherPage
  }
])

Both components are empty and have only a minimal html code.

[jwx]

Great repro, thanks! Will take a look at this tonight.