HMR stops when using vue-i18n-next

[mkalantar]

Reporting a bug?

in new vue3 project created by [email protected], 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 [email protected]

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

[kazupon]

Thank you for your reporting!

Unfortunately, I couldn't reproduce this issue. 😞
We need the minimum repo.
Could you provide your reproduce code with the repo, please?

[mkalantar]

repo

in src/App.vue changing created method is not detected. removing .use(i18n) in main.js makes HMR work again!

[BARNZ]

Glad I found this - got the same problem as well. Spend the last few hours stripping everything out of my app and traced it down to this package. As soon as I use() it, any changes in the <script> section of any SFCs no longer get hot reloaded. However changes within the <template> section still work fine as mentioned above.

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

[PeterAlfredLee]

Seems this is caused by mixin. With this line of code commented, the HMR could work.

[mkalantar]

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.

You are right, turning off legacy mode make it work.

[PeterAlfredLee]

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

[mkalantar]

fixed: vuejs/core@db3f57a