async assigning a value to metatags doesn't work

[Kneemund]

Bug Description
Assigning a value to metatags inside of a function (e.g. a request callback) throws Error: Function called outside component initialization.

Routify Version
2.1.3 (latest)

Example

import { ready, metatags } from '@roxi/routify';
[...]

$: user = {};

axios.post([...]).then((res) => {
        user = res.data;
        metatags.title = "test";
        $ready();
});

[madeleineostoja]

I also hit this issue, fairly large use case with metadata coming from a CMS (for example).

[ghostdevv]

Is this still an issue @jakobrosenberg

[jakobrosenberg]

AFAIK yes.

[lamualfa]

@jakobrosenberg

Please give a warning to metatags section. for 2 days I tried to find the cause of this error. First time, I thought this error came from Vite. it turns out that the error comes from the metatags helper 😂.

vitejs/vite#2435 (comment)

I can make a PR to give the warning if you want. Let me know.

[ghostdevv]

I am confused what the linked comment is involved? Am I missing something? @lamualfa

[lamualfa]

@ghostdevv

In First time when I get this Error, I think the problem came from Vite. Because of that, I try to find the solution about that error and I found the same problem It also happened in the svelte kit.

One of the svelte kit contributor said that the error was caused by Vite. Then the error has been fixed in the latest PR made by the svelte kit contributor to the vite repository.

It's been 2 days since the PR was made the changes haven't been merged. Impatient, I tried to comment on the PR page (That's the link I gave above).

2 days later PR was merged and the latest version of vite was out. I rushed to get the version tested right away on my routify project. After updating, it turns out that the error still occurs.

I was really confused to find out what caused the error. In the end, I tried to dig deeper into the issues that exist in routify repository. And then Voila! I encountered this issue with the exact same case as mine.

I use metatags helper inside .then function.

[jakobrosenberg]

This has hopefully been fixed in v2.16.0.

For async metatags, use $metatags instead of metatags. This is somewhat experimental, so if you encounter any bugs, please let me know.

[lamualfa]

@jakobrosenberg Is v2.16.0 has been released?

---

I have tried to use it in v2.12.4, but it keeps getting errors.

src/pages/test.svelte

<script>
  import { onMount } from 'svelte';
  import { metatags } from '@roxi/routify';

  onMount(() => {
    new Promise((resolve) => setTimeout(resolve, 3000)).then(() => {
      $metatags.title = 'Hello world';
    });
  });
</script>

<h1>Hello world</h1>

Error

[jakobrosenberg]

@lamualfa https://www.npmjs.com/package/@roxi/routify/v/2.16.0

The store API has only been added in 2.16.0, so it won't work before that.

[lamualfa]

@jakobrosenberg Oh ok. it looks like the NPM cache has just been updated. I am sorry 😅.

[lamualfa]

@jakobrosenberg Voila! now it's work in v2.16.0. Thank you very much @jakobrosenberg.

[jakobrosenberg]

Closing this for now then. 🙂