fix: error on duplicate useI18n calling on local scope (#2204)

* fix: error on duplicate useI18n calling on local scope

* fix

Author: kazupon

packages/vue-i18n-core/src/errors.ts

@@ -22,7 +22,9 @@ export const I18nErrorCodes = {
   CANNOT_SETUP_VUE_DEVTOOLS_PLUGIN: 30,
   NOT_INSTALLED_WITH_PROVIDE: 31,
   // unexpected error
-  UNEXPECTED_ERROR: 32
+  UNEXPECTED_ERROR: 32,
+  // duplicate `useI18n` calling
+  DUPLICATE_USE_I18N_CALLING: 33
 } as const
 
 type I18nErrorCodes = (typeof I18nErrorCodes)[keyof typeof I18nErrorCodes]
@@ -49,5 +51,7 @@ export const errorMessages: { [code: number]: string } = {
   [I18nErrorCodes.INVALID_VALUE]: `Invalid value`,
   [I18nErrorCodes.CANNOT_SETUP_VUE_DEVTOOLS_PLUGIN]: `Cannot setup vue-devtools plugin`,
   [I18nErrorCodes.NOT_INSTALLED_WITH_PROVIDE]:
-    'Need to install with `provide` function'
+    'Need to install with `provide` function',
+  [I18nErrorCodes.DUPLICATE_USE_I18N_CALLING]:
+    'Duplicate local-scope `useI18n` call detected. Call `useI18n` only once per component.'
 }

packages/vue-i18n-core/src/i18n.ts

@@ -610,6 +610,10 @@ export function useI18n<
     setupLifeCycle(i18nInternal, instance, composer)
 
     i18nInternal.__setInstance(instance, composer)
+  } else {
+    if (__DEV__ && scope === 'local') {
+      throw createI18nError(I18nErrorCodes.DUPLICATE_USE_I18N_CALLING)
+    }
   }
 
   return composer as unknown as Composer<

packages/vue-i18n-core/test/i18n.test.ts

@@ -344,6 +344,66 @@ describe('useI18n', () => {
       errorMessages[I18nErrorCodes.NOT_INSTALLED_WITH_PROVIDE]
     )
   })
+
+  test(errorMessages[I18nErrorCodes.DUPLICATE_USE_I18N_CALLING], async () => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      fallbackLocale: ['en'],
+      messages: {
+        en: { hello: 'hello!' }
+      }
+    })
+
+    const useMyComposable = () => {
+      const count = ref(0)
+      const { t } = useI18n({
+        messages: {
+          en: {
+            there: 'hi there! {count}'
+          }
+        }
+      })
+      return { message: t('there', { count: count.value }) }
+    }
+
+    let error = ''
+    const App = defineComponent({
+      setup() {
+        let message: string = ''
+        let t: any // eslint-disable-line @typescript-eslint/no-explicit-any
+        try {
+          const i18n = useI18n({
+            messages: {
+              en: {
+                hi: 'hi!'
+              }
+            }
+          })
+          t = i18n.t
+          const ret = useMyComposable()
+          message = ret.message
+        } catch (e: any) {
+          error = e.message
+        }
+        return { t, message, error }
+      },
+      template: `
+        <h1>Root</h1>
+          <form>
+            <select v-model="locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ t('hi') }}</p>
+          <p>{{ message }}</p>
+          <p>{{ error }}</p>
+      `
+    })
+    await mount(App, i18n as any) // eslint-disable-line @typescript-eslint/no-explicit-any
+    expect(error).toBe(errorMessages[I18nErrorCodes.DUPLICATE_USE_I18N_CALLING])
+  })
 })
 
 test('slot reactivity', async () => {