Fix transitions broken at root level

[jakobrosenberg]

[ghost]

Does this error relate to this issue? Just tried messing around wth the Tab Translation example on 2.5.1.

TabsTransition.svelte:8 Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of null at instance$T (TabsTransition.svelte:8)

[jakobrosenberg]

@bgold0 that's possible. Do you only get the error if you have transitions at root level?

[ghost]

I've tried this on the default layout page and in deeper folders using a reset on the latest version. I would need a bit more understanding of what you mean by "root level".

[jakobrosenberg]

@bgold0 my bad. By root level I mean src/pages/_layout.svelte.

[flymedllva]

@bgold0 Example error

[flymedllva]

@jakobrosenberg When is the release of routify 2 planned? Is there a tool to start rendering after the end of the transition animation? I have such a problem that the render starts at the moment of animation, because of this lags

[ghostdevv]

@jakobrosenberg can this be closed?

[jakobrosenberg]

Not sure. Better leave it open for now.

[fischor]

Any updates? Is there a workaround?

[JakubBlaha]

I have came to this bug yesterday too, when disabling dynamicImports. Currently I am in the process of creating a minimal reproducible example for both this, and another bug.

Any updates? Is there a workaround?

@fischor If you are using typescript, you can copy the TabsTransition.svelte file, change the line

$: width = scoped.width || $ctx.parentNode.getBoundingClientRect().width;

to

$: width = scoped.width || $ctx.parentNode?.getBoundingClientRect().width;

and it should work. If you are not using typescript, I think something like

$: width = scoped.width || ($ctx.parentNode && $ctx.parentNode.getBoundingClientRect().width);

could work.

Then just import the file instead of the official TabsTransition.svelte.

[jakobrosenberg]

@JakubBlaha is your fix still required? I just tried the starter template with a transition in the root and it seemed to be working now.

[JakubBlaha]

@jakobrosenberg I created a new project using the npx init thing, set dynamicImports to false inside package.json, added the TabsTransition into example/_reset.svelte as a decorator on the <slot /> and the error still persists.

[JakubBlaha]

Is it because the dynamicImports are causing Routify to build outside a browser environment? Would wrapping it with an onMount solve it?

[ghost]

adding this in vite.config.ts fixed it for me

  optimizeDeps: {
    include: ['@roxi/routify/decorators']
  }