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.