Route doesn't get rendered when calling `navigate()`

This issue has been tracked since 2021-04-26.

Code:

<script lang="ts">
  import { Route, Router, navigate } from "svelte-routing";
</script>

<main>
  <button on:click={() => navigate("/")}>Home</button>
  <button on:click={() => navigate("/foo")}>Foo</button>
  <button on:click={() => navigate("/bar")}>Bar</button>
  <Router>
    <Route path="/foo">Foo</Route>
    <Route path="/bar">Bar</Route>
    <Route>Home</Route>
  </Router>
</main>

<style>
</style>

Here, the Route corresponding to the browser url at the time of page load is correctly rendered.
When clicking any of the buttons, browser url changes, but the Router still renders the old Route.
Hitting F5 or entering the url in browser address bar and hitting enter causes the Route to be rendered correctly.

Minimal repro: https://codesandbox.io/s/distracted-star-uhss6?file=/src/App.svelte:0-410

EmilTholin wrote this answer on 2021-04-26

Hi @itsfarseen!

Your code works if used in the example project in this repository:

svelte-routing-navigate.mp4

It seems like it might be an issue with CodeSandbox.

itsfarseen wrote this answer on 2021-04-26

I see. It doesn't work locally either.
Could this be because I'm using Vite instead of Rollup?

PS: Just checked and found out that it works when I do yarn build instead of the dev server.

marcus-wishes wrote this answer on 2021-04-26

Also using the globalHistory doesn't work for me in Vite. When I attach a listener to react on route changes it never gets called. It works for me using Rollup. I was unable to yet figure out why.

itsfarseen wrote this answer on 2021-04-26

I went further down the rabbit hole and looks like this is a Vite dev server bug.
vitejs/vite#3155 (comment)

Closing :)

sidharthramesh wrote this answer on 2021-05-22

Is there any changes that could be done to svelte-routing so that vite packages it correctly?

itsfarseen wrote this answer on 2021-05-22

@sidharthramesh The full analysis is here vitejs/vite#3155 (comment)
The problem is there is mutable global state in history.js, and Vite bundles two copies of it. In one file it gets inlined by Vite and in other files it is imported using the url. So the functions in history.js called by these files, end up referencing different versions of the state.
I don't know if this global state is avoidable.

Also it's not much of a problem in practice I guess because we can disable this optimization and it will stop Vite dev server from inlining files in svelte-routing. And Vite packages things correctly when you do production build.

More Details About Repo
Owner Name EmilTholin
Repo Name svelte-routing
Full Name EmilTholin/svelte-routing
Language JavaScript
Created Date 2017-11-28
Updated Date 2022-12-03
Star Count 1711
Watcher Count 21
Fork Count 151
Issue Count 59

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date