HMR stops when using vue-i18n-next

Reporting a bug?

in new vue3 project created by vue-cli@4.5.13, using vue-i18n-next make HMR stop working. template changes are detected but changes in script section like methods and lifehook methods are not.

Expected behavior

Changes in script section of SFC affect without refreshing browser.

Reproduction

just use vue-i18n-next in new vue3 project created by vue-cli@4.5.13

main.js :

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
 en: {
    message: {
      hello: 'hello world'
    }
  },
  fa: {
    message: {
      hello: 'سلام'
    }
  }
}

const i18n = createI18n({
  locale: 'fa',
  fallbackLocale: 'en'
  messages
})
createApp(App).use(i18n).use.mount('#app')

removing .use(i18n) makes HMR work again!

System Info

Environment Info:

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) x64 Intel(R) Core(TM) i5-4440 CPU @ 3.10GHz
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 7.14.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 78.11.0esr
  npmPackages:
    @intlify/vue-devtools:  9.1.6 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.6 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.13 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.13 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-router:  4.5.13 
    @vue/cli-plugin-vuex:  4.5.13 
    @vue/cli-service: ~4.5.0 => 4.5.13 
    @vue/cli-shared-utils:  4.5.13 
    @vue/compiler-core:  3.1.4 
    @vue/compiler-dom:  3.1.4 
    @vue/compiler-sfc: ^3.0.0 => 3.1.4 
    @vue/compiler-ssr:  3.1.4 
    @vue/component-compiler-utils:  3.2.2 
    @vue/devtools-api:  6.0.0-beta.15 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.1.4 
    @vue/runtime-core:  3.1.4 
    @vue/runtime-dom:  3.1.4 
    @vue/shared:  3.1.4 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0 => 7.13.0 
    vue: ^3.0.0 => 3.1.4 
    vue-eslint-parser:  7.8.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^9.1.6 => 9.1.6 
    vue-loader:  15.9.7 (16.3.0)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.13

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

[PeterAlfredLee]

Just opened a new issue in vue-next about this with a fix.

[PeterAlfredLee]

Seems this problem could only be reproduced with legacy mode, not the Composition API mode. Please note that the legacy mode will be set by default. I think this is a simple enough work around: you can set the legacy to false when calling createI18n.

// 2. Create i18n instance with options
const i18n = createI18n({
  legacy: false,
  locale: 'ja', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages
  // If you need to specify other options, you can set other options
  // ...
})

Trying to figure out what’s wrong here.