$parentBase with null value causes error in segmentize function

[LonelyVikingMichael]

Describe the bug
The screenshot below shows that join() is being passed pathFragments of null and "" respectively in paths.js. This ultimately leads to a TypeError: str is null in the stripSlashes() function. I can see from the stack trace that $parentBase is the null value in question in Route.svelte.

To Reproduce
Difficult, my codebase is a bit involved at this point. I have two <a> elements on a navbar with use:link attributes. Normally, they switch between pages/views perfectly.
One of my pages renders child component forms conditionally, based on some on:click logic to mount/destroy the child components. These children in no way interact with routing. This error only occurs if any of the child components forms are loaded and I select the other <a> on my navbar.

Screenshots

Full stack trace

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version: 91.0.2

Please let me know if you require any additional info, I'll try to put together a minimal example and reproduce in a REPL
Thanks for your work, I really enjoy using this library and the examples in the docs helped a lot.

[LonelyVikingMichael]

Looks like this is related somehow to transition promises. After removing the transition:fade attributes from the child components, the routing issue is resolved.

How can I work around this?

[leddt]

I encountered the same issue. Adding |local to all my transitions worked for me (ie: transition:fade|local)

[pnodseth]

Thanks @leddt, that solution worked for me as well.

[LonelyVikingMichael]

I encountered the same issue. Adding |local to all my transitions worked for me (ie: transition:fade|local)

This solved it for me as well, thank you.

@mefechoel - this might be worth a mention in the docs?

[visma-sorinbroscaru]

+1 with last comment, should be mentioned in the docs.

[anonymoose]

I'm not explicitly specifying any transitions anywhere. Just taking the defaults. Where would you recommend putting the transition:fade|local?

[visma-sorinbroscaru]

I'm not explicitly specifying any transitions anywhere. Just taking the defaults. Where would you recommend putting the transition:fade|local?

Could it be used inside a 3rd party library you use? I had a nested alert component that had a fade on it, but it was created in an external library so for me it was not obvious at first glance where the transition was placed.

[anonymoose]

Ultimately I was misusing nested and/or relative paths in routes. After making all routes fully qualified all over the app my problems stopped happening.

Started with this:

<Route path="users/*">
  <Route path="edit/:id" let:params>
    <EditUser id={params.id} />
  </Route>
</Route>

The outer route was relative, which I didn't fully understand. So depending on where I was in the app it would either render correctly or throw the above exception. The exception took me in the wrong direction when the fix was just route related.

Changed all my routes to this:

<Route path="/users/edit/:id" let:params>
  <EditUser id={params.id} />
</Route>

It's more explicit and, given the size of my app, easily manageable.

If the library handled the exception in a more obvious way it would have been helpful, but ultimately this was my fault.