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

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

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

[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>

[kazupon]

close in-activity