Is there any migration guide for Svelte-routing?

[mefechoel]

There is no guide yet, but that's a great idea!

Theoretically you could just replace every import from 'svelte-routing' with 'svelte-navigator', and it should work, but I have not tested it. The changes to the API are largely additive, so props, that work for svelte routing also work for svelte navigator.

I guess it would be nice to illustrate, in what way you could simplify your code by using svelte navigator, or which problems, that might occur with svelte routing, could be solved.

I'm thinking of giving an example on removing nested Routers in favour of nested Routes. Or replacing calls to navigate with using the useNavigate hook, so one can take advantage of relative routing.

[quantuminformation]

ok mate, i'm not ready to switch yet, as i have an app in prod and have no issues with s routing, maybe emil will collab or smth.

[mefechoel]

Sure, if it works for you that's great! For basic routing needs svelte routing works really well; it's so widely used for a reason. I had some issues with it, when I needed to host a page on a subroute and decided to dig deeper.

A big bonus for me is that you get a much more accessible routing experience out of the box.

I'd love to collaborate, if emil is up for it, but it seems that he is quite busy at the moment.

[quantuminformation]

tried this

got this

[mefechoel]

Hmm, that is not a very descriptive error message :D

In the first picture, svelte-routings entry in package.json is highlighted. Could it be that it was replaced as well and your bundler now tries to get svelte-navigator version 1.4.2, which does not exist?

[quantuminformation]

yeah i fixed all that

[mefechoel]

Could you share the line from your Profile.svelte component? That seems to be where the error is coming from.

[quantuminformation]

just here

[mefechoel]

Can you trace the error further? Somewhere, probably in the routeLogic function should be a call to some svelte-routing function, which does not work with svelte-navigator.

[quantuminformation]

error occurs before routlogic gets hit

[quantuminformation]

this is missing

[mefechoel]

Ok... That's a tough one... What happens in the component rendering Profile.svelte? Svelte can apparently not instantiate it, so the error might come from the parent. I'm gonna take a look at the SvelteComponentDev class. Maybe I can find where the target is getting lost...

[quantuminformation]

Actually the error occurs on any route even index

[quantuminformation]

so on Home here:

[mefechoel]

It seems really hard to find out where exactly this is coming from. I think I'll need to setup an app where I can reproduce this.

Have you found a simple setup you can reproduce this with?

[mefechoel]

I've got one more idea you could try... Maybe the bundler uses the packages main entry instead of the svelte entry. You can force it to use the svelte entry by changing the imports to "svelte-navigator/src/index.js".

[quantuminformation]

same error mate,

not sure how to reproduce mate, my repo is pretty big, could do a screen share if you like?

[mefechoel]

Yeah sure, that's probably easiest... Can I contact you privatly somehow, so we can set a date?

[quantuminformation]

yeah dm me at nikos@mentorcv.com

thx

[mefechoel]

I tried to setup a small project, to reproduce the bug, and actually got the same error message... while still using svelte-routing. Switching to svelte-navigator produced the same error:

I'm starting to suspect, that this is not a problem with svelte-navigator, but with vite-plugin-svelte or probably with svelte-hmr. It's really hard to pinpoint where the error originates though...

If you have the time you could try to use rollup or webpack instead of vite, to see if it makes a difference. I'll probably try that myself when I find the time.

[mefechoel]

It seems as though it is somehow related to the usage of <svelte:component this={component} /> in Route.svelte.

The error does not occur, when I use

<Route path="/">
  <Home />
</Route>

instead of

<Route path="/" component={Home} />

@quantuminformation If that fits your setup you can use this syntax for your routes.

[quantuminformation]

Thanks mate, will try soon.

@dominikg thought I'd send another one your way ;) https://github.com/mefechoel/svelte-navigator/issues/13#issuecomment-692712645

[quantuminformation]

Ok time to switch to your lib, svelte-routing breaks bigtime somehow

Failed to init component
<Router>
Error: Function called outside component initialization
    at get_current_component (http://localhost:3000/@modules/svelte/internal/index.mjs:643:15)
    at getContext (http://localhost:3000/@modules/svelte/internal/index.mjs:676:12)
    at instance (http://localhost:3000/@modules/svelte-routing/src/Router.svelte?import:82:26)
    at init (http://localhost:3000/@modules/svelte/internal.js:1461:11)
    at new Router (http://localhost:3000/@modules/svelte-routing/src/Router.svelte?import:273:3)
    at createProxiedComponent (http://localhost:3000/@modules/svelte-hmr/runtime/hot-api-esm.js:214:9)
    at new ProxyComponent (http://localhost:3000/@modules/svelte-hmr/runtime/hot-api-esm.js:414:13)
    at new Proxy<Router> (http://localhost:3000/@modules/svelte-hmr/runtime/hot-api-esm.js:472:11)
    at create_fragment (http://localhost:3000/src/App.svelte?import:389:11)
    at init (http://localhost:3000/@modules/svelte/internal.js:1476:37)
<App>
Error: Function called outside component initialization
    at get_current_component (http://localhost:3000/@modules/svelte/internal/index.mjs:643:15)
    at getContext (http://localhost:3000/@modules/svelte/internal/index.mjs:676:12)
    at instance (http://localhost:3000/@modules/svelte-routing/src/Router.svelte?import:82:26)
    at init (http://localhost:3000/@modules/svelte/internal.js:1461:11)
    at new Router (http://localhost:3000/@modules/svelte-routing/src/Router.svelte?import:273:3)
    at createProxiedComponent (http://localhost:3000/@modules/svelte-hmr/runtime/hot-api-esm.js:214:9)
    at new ProxyComponent (http://localhost:3000/@modules/svelte-hmr/runtime/hot-api-esm.js:414:13)
    at new Proxy<Router> (http://localhost:3000/@modules/svelte-hmr/runtime/hot-api-esm.js:472:11)
    at create_fragment (http://localhost:3000/src/App.svelte?import:389:11)
    at init (http://localhost:3000/@modules/svelte/internal.js:1476:37)``` 

[quantuminformation]

Ok done the upgrade

but get the same error as above, so must be different issue

[mefechoel]

I suspect this is something in svelte-hmr or maybe svite. Have you updated svite recently? If so you could try to go back to a previous version and see if it works again. You could file a bug there if you find out more...

[quantuminformation]

tried hot: false with svite, same issue

[mefechoel]

It looks suspiciously like the first error you were getting. I was able to work around that by changing the <Route ... component={Comp} /> to <Route ...><Comp /></Route>. But again I think thee root of the error lies somewhere in svelte-hmr, although I have not tested it enough to know for sure or file an issue...

[quantuminformation]

In my project

if I remove the router the app works fine, well fine with no routes lol.

I tried adding the router to a new Svite project, and it did work tho.

[quantuminformation]

Does this look like correct svite integration?

https://github.com/quantuminformation/my-first-svite-project

it doesnt render the route

[quantuminformation]

Yeah its defo the router here messing with svite, I need to try an alternative router

[quantuminformation]

Issue fixed:

alias: {
    'svelte':'svelte/internal'
  }```

to vite.config.js  

[dominikg]

svite-0.8.1 has been released which should work without the need to add the alias mentioned above.

[mefechoel]

Great, thanks @quantuminformation for the fix and @dominikg for the great work with svite! I'll add a note to the readme just in case anyone else is having the same kind of issue.