spa_router.js:106 Uncaught TypeError: Cannot read property 'isActive' of undefined

active class not working

<header>
  <a href="/" class="logo"><img src="/logo.svg" alt="META_TITLE" border="0" /></a>
  <section>
    <p>META_DESCRIPTION</p>
    <nav>
        <a href="/news" class:active={routeIsActive('news')}>News</a>
        <a href="/social" class:active={routeIsActive('social')}>Social</a>
        <a href="/videos" class:active={routeIsActive('videos')}>Videos</a>
        <a href="/blogs" class:active={routeIsActive('blogs')}>Blogs</a>
        <a href="/podcasts" class:active={routeIsActive('podcasts')}>Podcasts</a>
        <a href="/supplies" class:active={routeIsActive('supplies')}>Supplies</a>
        <a href="/links" class:active={routeIsActive('links')}>Links</a>
      
    </nav>
  </section>
</header>
<script>
  import { routeIsActive } from 'svelte-router-spa'
  export let currentRoute = {};

    // import { link, push } from 'svelte-spa-router'
    // import active from 'svelte-spa-router/active'
</script>

<style>
header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.12);
    z-index: 2;
    padding: 0;
}

header section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

header .logo {
  padding: 0;
  margin-right: 3rem;
}

header p {
  margin: 1rem;
}

header img {
  height: 8rem;
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style-type: none;
    width: 100vw;
    overflow-y: auto;
    max-height: 13rem;
}

nav a {
    display: block;
    padding: 1rem;
    border: 1px solid transparent;
    color: #212121;
    font-weight: 400;
    text-decoration: none;
}

:global(nav a.active) {
    color: var(--link-color) !important;
    font-weight: 700 !important;
}

@media all and (orientation: landscape) {
    header {
        height: auto;
        flex-direction: row;
        padding: 0 11rem;
        align-items: flex-start;
    }

    nav {
        flex-direction: row;
        justify-content: flex-start;
    }

    :global(nav a.active) {
            border-bottom: 2px solid var(--active-color) !important;
    }
}
</style>

<script>
  import { Router } from 'svelte-router-spa'
  import routes from './routes';
  import Topnav from './components/Topnav.svelte';
  import Footer from './components/Footer.svelte';

  export let currentRoute = {};

</script>

<main>
	<Topnav {currentRoute} />
    <div id="body">
        <Router {routes} options={ {gaPageviews: true} } />
    </div>
    <Footer />
</main>

<style>

main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

#body {
	padding: 31rem 1rem 1rem;
  max-width: 100vw;
  margin: 0 auto;
  overflow-y: auto;
}

@media all and (orientation: landscape) {
    #body {
      padding: 1rem;
      margin-top: 11rem;
      max-width: none;
    }
}
</style>

[JCHHeilmann]

I’m having the same issue.

[drannex42]

Any update or method of fixing this issue?