josefaidt / svelte-themer

A theming engine for your Svelte apps using CSS Variables, persisted.
https://svelte-themer.vercel.app/
MIT License
140 stars 14 forks source link

Themer breaks page.js routing #8

Closed Tekameikite closed 3 years ago

Tekameikite commented 3 years ago

So my problem is that when I try to use this package it somehow breaks my page.js routing but it works if I refresh the page after clicking the link for the page in the navbar. Tried it on npm run dev and npm run build

Code:

// App.svelte
<script>
  import router from "page";
  import { ThemeWrapper, ThemeToggle } from "svelte-themer";

  import Home from "./pages/Home.svelte";
  import Files from "./pages/Files.svelte";
  import ThemesPage from "./pages/Themes.svelte";
  import Account from "./pages/Account.svelte";

  import Nav from "./components/Nav.svelte";
  import Footer from "./components/Footer.svelte";

  let page;

  router("/", () => (page = Home));
  router("/files", () => (page = Files));
  router("/themes", () => (page = ThemesPage));
  router("/account", () => (page = Account));

  router.start();
</script>

<ThemeWrapper>
  <Nav />
  <svelte:component this={page} />
  <ThemeToggle />
  <Footer />
</ThemeWrapper>
// Nav.svelte
<nav class="pa3 pa4-ns">
  <div class="tc pb3">
    <a
      class="fas fa-folder-open link dim f6 f5-ns dib mr3 pointer"
      href="/">home</a>
    <a
      class="fas fa-folder-open link dim f6 f5-ns dib mr3 pointer"
      href="/files">files</a>
    <a
      class="fas fa-folder-open link dim f6 f5-ns dib mr3 pointer"
      href="/themes">themes</a>
    <a
      class="fas fa-folder-open link dim f6 f5-ns dib mr3 pointer"
      href="/account">account</a>
  </div>
</nav>

Also I get this error in the console after importing this package and I don't really know what may be causing it

Uncaught Error: Function called outside component initialization
    get_current_component index.js:119
    setContext index.js:129
    instance index.js:514
    flush index.mjs:723
    init index.mjs:1477
    App main.js:5818
    app main.js:3
    <anonymous> main.js:5835
index.js:119:18
josefaidt commented 3 years ago

Hey @Tekameikite apologies for the delay! I'm seeing this in a fresh project, but weirdly enough when I save again it goes away. At least in CodeSandbox. I'm taking a deeper look at this, but I can say this does appear to be a svelte-themer specific issue

https://codesandbox.io/s/svelte-themer-bug-8-g0mv7?file=/App.svelte

josefaidt commented 3 years ago

Hi @Tekameikite I got this resolved! That CodeSandbox link should now work with 0.2.1

Tekameikite commented 3 years ago

Yup, it's fixed! My routing started to work as it should! Thank you so much for help! Closing!