search

mefechoel / svelte-navigator

Simple, accessible routing for Svelte
Other
502 stars 39 forks source link

Svelte transitions break the app #65

Closed Wruczek closed 2 years ago

Wruczek commented 2 years ago

Describe the bug A clear and concise description of what the bug is. Using a Svelte transition in a route throws an exception and breaks the app.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'split')
    at resolve (routes.js:214:30)
    at resolveLink (routes.js:321:23)
    at resolve (hooks.js:141:26)
    at Object.$$self.$$.update (Link.svelte:34:12)
    at update (index.mjs:1081:12)
    at flush (index.mjs:1052:13)

To Reproduce Steps to reproduce the behavior:

  1. Setup basic-client-side example
  2. Edit example/basic-client-side/src/Blog.svelte
    • add import { fly } from 'svelte/transition' to <script>
    • add <div transition:fly="{{ y: 10, duration: 1000 }}">test</div> at the end of the file. Save.
  3. Visit page in the browser and click on blog - you should see the animation. Now click on home - the app will break.
  4. Changing the transition from transition:fly to in:fly fixes the issue.

Please add a link to an example in the Svelte REPL or in a Codesandbox, if you can.

Desktop (please complete the following information):

mefechoel commented 2 years ago

The issue was also raised in #43. Checkout this comment with a workaround. I'll add a note to the readme.