Live reloading translations is not working

[BeauvR]

Reporting a bug?

We just upgraded to vite version 3 and vite-plugin-vue-i18n to version 5, and reloading translations is not working. We detected this problem by starting a new project, but also found this problem with an old project.

I've tested it with vite version 2 and vite-plugin-vue-i18n version 3 before upgrading and everything worked as expected, after upgrading both packages the translations won't reload. In the vite console, there is also no message the translations are modified. After re-running the vite dev server, the new translations are working.

Expected behavior

I expect in the console to see the message:
12:34:14 PM [vite] page reload lang/nl.json

And also that the page is reloading.

Reproduction

• Upgrade an already working project or create a new project with vite version 3 & vite-plugin-vue-i18n version 5
• Run the vite dev server
• Modify any translation

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 294.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.19.2 - ~/.nvm/versions/node/v14.19.2/bin/node
    npm: 6.14.17 - ~/.nvm/versions/node/v14.19.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox Developer Edition: 103.0
    Safari: 15.5
  npmPackages:
    @intlify/vite-plugin-vue-i18n: ^5.0.0 => 5.0.1 
    vite: ^3.0.0 => 3.0.3 
    vue: ^3.2.37 => 3.2.37 
    vue-i18n: ^9.1.10 => 9.1.10

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• 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.

[HabardiT]

I have the same behavior as well. after upgrading from vite-plugin-vue-i18n 3 to 5.

custom i18n blocks in SFCs reloads as expected. however translations imported in vite.config.ts don't.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { vueI18n } from "@intlify/vite-plugin-vue-i18n";

const path = require("path");    
export default defineConfig({
    plugins: [
        vue(),
        vueI18n({
            include: path.resolve(__dirname, "./src/locales/**.yaml"),
        }),
    ]
});

[HabardiT]

importing messages from json actual path instead of "@intlify/vite-plugin-vue-i18n/messages", then appending it to
createI18n is a work-around.

unfortunately I'm using yaml instead of json :(

[kazupon]

Could you give minimue reproduction repo to us please?

[marekvospel]

@kazupon I've also experienced this issue.
Here is a minimum reproduction repository: https://github.com/marekvospel/vue-i18n-live-reload

[kazupon]

@marekvospel
Thank you for your reproduction repo!
I could reproduce this issue!
I'll try to fix this issue!

[kazupon]

Hmm 🤔 , This issue might be in vite.

I have found out the cause, but I could not figure it out.
I have confirmed the implementation of the HMR feature, but have not specifically changed it since v3.
The supported version is v2.2.0.
c6e0e2c

In vite v3, experimental HMR feature has been released.
https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#300-2022-07-13

And also there are several HMR fixes in the later v2 version.
Since that time, vite may have a regression.

We need to find out which version we have the problem from, whether vite 3 or some version of vite 2.

[tlebeitsuk]

Resolved in Vite v3.0.5.

[c-harding]

Unfortunately I can still reproduce the issue both in my own repo and in @marekvospel’s minimal one using Vite v3.0.5

[ghostiam]

I think the problem is the wrong ID.
https://github.com/intlify/bundle-tools/blob/main/packages/vite-plugin-vue-i18n/src/index.ts#L22

I have created a simple plugin and this is what I get with different IDs:
And got a working reload, but the whole page.

function I18nHotReload(): PluginOption {
  return {
    name: "i18n-hot-reload",
    handleHotUpdate({ file, server }) {
      console.log(file)

      const module = server.moduleGraph.getModuleById("@intlify/vite-plugin-vue-i18n/messages")
      console.log(module) // <- undefined

      const module2 = server.moduleGraph.getModuleById("\x00@intlify/vite-plugin-vue-i18n/messages")
      console.log(module2) // <- ModuleNode

      if (module2) {
        server.moduleGraph.invalidateModule(module2)
        return [module2!]
      }
    },
  }
}

I also found an example for another library to update messages without reloading the entire page:
https://stackoverflow.com/a/71036343

[marekvospel]

And got a working reload, but the whole page.
currently hmr only works by reloading the page.

#41

[kazupon]

I've just released v6.0.1
https://github.com/intlify/bundle-tools/releases/tag/vite-plugin-vue-i18n%406.0.1

please check it!

[BeauvR]

Thanks it's working now!

[hooray]

Same problem in unplugin-vue-i18n

[marekvospel]

@hooray
there's no hot update handler in unplugin-vue-i18n (https://github.com/intlify/bundle-tools/blob/main/packages/unplugin-vue-i18n/src/index.ts)

I think separate issue tagged as enhancement should be added

* vite-plugin-vue-i18n's hot update implementation
https://github.com/intlify/bundle-tools/blob/main/packages/vite-plugin-vue-i18n/src/index.ts#L277

[kazupon]

I've just supported HRM for vite at v0.7.0
https://github.com/intlify/bundle-tools/releases/tag/unplugin-vue-i18n%400.7.0

Please check it! 😉