Router fails to work properly on navigation

[LynithDev]

Describe the bug

On some of the environments my app is being run on, the entire routing system fails to work, throwing an error in console:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'match().path')

Seems to be coming from routing.ts

Thanks in advance

Your Example Website or App

.

Steps to Reproduce the Bug or Issue

1. Attempt to navigate to a different route
2. Error gets thrown

Expected behavior

Expected to navigate to a different route, however got an error and the entire router stopped working.

Screenshots or Videos

No response

Platform

• OS: macOS 14.4.1
• Browser: Safari (Specifically WebKit through Tauri)
• Version: 17.4.1

Additional context

No response

[ryansolid]

Yeah seems odd to happen intermittently or platform specific. It should be retrieving matches that exist. I haven't seen this before but a reproduction could probably help narrow this down quickly.

[LynithDev]

That's the problem, I can't really reproduce it on my end either and a co-worker with a very similar setup (macOS + Safari/webkit as well) can't either.

[MarkLeMerise]

I think I was able to create a reproducible example. I do apologize as it's not perfectly minimal as it was adapted from a real-world usage that I've been troubleshooting for a few days, but I think it illustrates the problem well, which seems to stem from nested routes in combination with signals/computations run in the <Router> root component.

[formbook]

think this is related, happens regularly

[EndOfTheSpline]

I have the same issue using the current solid and solid-router.

• In production builds, I've received reports that it happens frequently/almost always when performing certain actions (usually related to login/logout) and with certain browsers. Sometimes it happens to me as well, usually when the connection to the backend drops (and some loading screen appears briefly).
• In development builds, it happens rarely normally, but frequently on the first route change after I restart my backend (which likely changes various states in the app).

I've tried to debug it in my application, and the error seems to disappear if I make sure that there's no <Show>{props.children}</Show> anywhere in the root component (and the next few components - simply outsourcing this bit into its own component and using it in the root component did not help). If there is a Show, and it changes its state at least twice, then it's guaranteed that the error happens on the next routing.

However... I've not been able to reproduce this Show-behaviour in a smaller sample yet. I'll see if I can strip down my application to figure out what could cause it to act that way.

I would be happy with a workaround for the time being too - I have an ErrorBoundary already set up, but it's a bit annoying if it happens somewhat frequently and hard to distinguish from other errors.

[weijarz]

This error also happened to me today when I upgraded router from 0.12.x to newest 0.15. This error seems to only appear on the '/login' page, and only when my login token expires, it redirects to this page and then this error appears. Backing out to 0.12 is no problem.

[weijarz]

I tried to create a minimal reproducible example, but I wasn't successful.
In my real app, the problem is with navigate('/login'), I delay it for a short delay (500ms) with setTimeout and it still comes up (Very high probability >90%). until I use a large interval (5000ms), and it stopped having problems.

[EndOfTheSpline]

I can confirm that downgrading to 0.12 seems to solve this problem; 0.13 does not. So something between 0.12 and 0.13 seems to be triggering this behaviour. After downgrading the router, I've not witnessed this bug in any environment, and haven't heard further complaints either.