Random "SyntaxError: Must be called at the top of a `setup` function" message while navigating back through pages

[NathanAP]

Reporting a bug?

Hi!

I'm developing an application, but sometimes I get this error while navigating back to a page:

as you can see, it says that my i18n is being called outside setup which is not true:

Actually this is a bit strange because it is not happening in every single attempt, it seems to be something when I'm using the navigator back arrow 🤔

Maybe I'm doing something wrong when calling my useI18n({ useScope: 'global' })?

Expected behavior

No errors when navigating back through pages.

Reproduction

Let me know if I need to provide more info :)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-9700KF CPU @ 3.60GHz
    Memory: 6.49 GB / 15.92 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^3.4.0 => 3.4.0
    @vitejs/plugin-vue: ^2.3.0 => 2.3.3
    vite: ^2.9.0 => 2.9.14
    vue: ^3.2.33 => 3.2.37
    vue-axios: ^3.4.1 => 3.4.1
    vue-cli-plugin-vuetify: ~2.4.8 => 2.4.8
    vue-i18n: ^9.1.9 => 9.1.10
    vue-router: ^4.0.14 => 4.1.2
    vuetify: ^3.0.0-beta.0 => 3.0.0-beta.5
    vuetify-loader: ^2.0.0-alpha.0 => 2.0.0-alpha.9

Screenshot

No response

Additional context

No response

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
• [X] The provided reproduction is a minimal reproducible example of the bug.

[jvrsolis]

same i am getting the error in a watch function that is within a composable that is used within a base layout setup script in nuxt js (no ssr). seems to happen when i navigate using window.reload

[kazupon]

Thank you for your reporting!

Unfortunately, We could not reproduce this issue. 😞 We need minimum reproduction codes to resolve this issue. Could you give it to us, please? 🙏

[NathanAP]

Thank you for your reporting!

Unfortunately, We could not reproduce this issue. 😞 We need minimum reproduction codes to resolve this issue. Could you give it to us, please? 🙏

TBH it is a really really random error 😥 Last Friday I got it like 3 times in a row, but this week I could no reproduce it anymore. I did updated my packages this week so maybe it got fixed? I believe @jvrsolis could compare his versions with mine or add more of his info to help us?

[jvrsolis]

Ok i was able to solve it by using using

  const { availableLocales, locale: currentLocale, t, messages: currentMessages } = useI18n({ useScope: 'global'});

at the top scope of a composable rather than

  const { t } = useI18n();

or other similar statements in a watch in the same composable. I would get the error when the watch was triggered after a reload.

The reason i had it individual rather at the top scope was due to wanting to set ssr true

[NathanAP]

Hmm, I'm importing t with useI18n({ useScope: 'global' }) since the beginning, maybe it is fixed in the most recent version of main packages...

[jooy2]

+1 I have the same symptoms.

Unfortunately, I haven't been able to pinpoint exactly where this is happening. Neither the above solution nor the package update solved it.

Here is my sample project: https://github.com/jooy2/vutron

It is a combination of Electronjs+vue and uses Vue3 and composition api+esm. In the case of Vue, I configured it through <script setup>.

Open the file src/renderer/components/screen/MainScreen.vue,

1. Uncomment all commented lines
2. Delete disabled button properties with label: menu.change-language
3. Run the app: npm run dev

I hope I can get any hints. Thank you.

My i18n.js file:

import { createI18n } from 'vue-i18n'
import en from '../../locales/en.json'
import ko from '../../locales/ko.json'
import Utils from '../assets/js/utils'

export default createI18n({
  legacy: false,
  locale: Utils.getCurrentLocale(),
  fallbackLocale: 'en',
  globalInjection: true,
  messages: {
    en,
    ko
  }
})

Tested file sample (simplified MainScreen.vue) :

<script setup>
import { useI18n } from 'vue-i18n'
import { useTheme } from 'vuetify'

const { locale } = useI18n()

const handleChangeLanguage = () => {
  locale.value = 'en'
}
</script>

<template>
  <v-container>
    <v-row
      align="center"
      class="text-center"
    >
      <v-col cols="4">
        <v-btn
          block
          color="primary"
          @click="handleChangeLanguage"
        >
          {{ t('menu.change-language') }}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

[NathanAP]

Is there any chance this is just occuring in dev?

I don't remember getting this error frequently as before anymore, but I remember that I got into it once last week. Maybe its some situation like going back to a page before it loads? Or maybe Suspense tag is having some impact? Maybe something with Vuetify?

[HipyCas]

I am having the same issue in a Ionic project with Vue 3. It worked the last time I used the code, but for some reason now it stopped working and I can't guess why :cry:

[kazupon]

close in-activity