Error 'Function called outside component initialization' when calling route.meta()

[renatodantas]

First of all, congrats for this amazing component.

I'm trying to get route information through route.meta() function inside an Svelte's onMount(), but I'm getting the follow error message: Function called outside component initialization

I just tried to use example at https://github.com/AlexxNB/tinro/#route-meta in a fresh app, but without success.

I've added an example in REPL to show the problem (it's the first page of Svelte quickstart template): https://svelte.dev/repl/9f8ca34b8aef4b6e88f1eb64c1eff27f?version=3.32.1

PS.: If I call route.meta() as is in the example, the message changes to Cannot read property 'meta' of undefined.

Anything I'm doing wrong? Or is it a bug?

[AlexxNB]

The router.meta() function must be called inside any Route.

------------Hello.svelte--------------
<script>
    import {router} from 'tinro';
    const meta = router.meta();
</script>

Hello, {$meta.params.name}!

--------------------------------------

--------------App.svelte--------------
<script>
    import {Route} from 'tinro';
    import Hello from './Hello.svelte'
 </script>
<Route path="/:name">
   <Hello/>
</Route>
--------------------------------------

[renatodantas]

That's it. I was using a component outside an outer Route.

Thanks, @AlexxNB.

[OysterD3]

Hi @AlexxNB, I am having this issue now. I am using meta() inside Route

I found an workaround which is

<Route path="/cinemas" let:meta>
  <MovieCinemasPage {meta} />
</Route>

However, router.goto() doesn't work. It changed the URL path but didn't navigate the user.

[AlexxNB]

However, router.goto() doesn't work. It changed the URL path but didn't navigate the user.

Can you provide minimal example in REPL with same behaviour?

[OysterD3]

Hi @AlexxNB,

Here you go https://svelte.dev/repl/6262d8e2f5654e24ba31df605f0e9b3a?version=3.35.0

EDIT: Works fine on REPL, but doesn't work on my project after accidentally upgrade to ^0.6.1 and can't be reverted

[AlexxNB]

I'm download your example from REPL and just run npm install && npm run dev. Everything works as expected in FF and Chrome.

[OysterD3]

I have started a fresh project I think the issue has something to do with vite. The router.goto doesn't work for vite: ^2.1.4

Somehow I downgraded my monorepo project to 2.1.0, it doesn't work as well

[AlexxNB]

Do u use SvelteKit?

[OysterD3]

Nope, Svelte + Vite

[AlexxNB]

How I can start new empty project with your set?

[OysterD3]

You may follow the steps here

[harvey-k]

@OysterD3

The solution mentioned here seemed to get router.goto working for me. Example vite.config.js:

export default defineConfig({ 
  optimizeDeps: {
    exclude: ['tinro']
  },
  plugins: [svelte()],
 ...

[OysterD3]

Thanks a lot! @harvey-k That works for me