intlify/vue-i18n

setLocaleMessage throws Error "Cannot assign to read only ..."

richterdennis opened this issue · 0 comments

richterdennis commented

Reporting a bug?

I am trying to implement a HMR functionality wich updates the messages part of the plugin. I am using Quasar with Vite and this is my i18n.js boot file:

import { createI18n } from 'vue-i18n';
import * as messages from '../lang/index.js';

const i18n = createI18n({
  locale: 'de',
  globalInjection: true,
  messages,
});

export default ({ app }) => {
  app.use(i18n);
};

// HMR implementation for messages
if (import.meta.hot) {
  import.meta.hot.accept('../lang/index.js', async (updatedMessages) => {
    for (const locale of Object.keys(updatedMessages)) {
      i18n.global.setLocaleMessage(locale, updatedMessages[locale]);
    }
  });
}

If I update a lang file and the HMR part kicks in, I am getting the following error:

vue-i18n.mjs:662 Uncaught (in promise) TypeError: Cannot assign to read only property 'de' of object '[object Module]'
    at Object.setLocaleMessage (vue-i18n.mjs:662:25)
    at Object.setLocaleMessage (vue-i18n.mjs:1139:26)
    at i18n.js?t=1698933754785:23:16
    at client.ts:438:51
    at client.ts:351:7
    at client.ts:206:57
    at Array.forEach (<anonymous>)
    at queueUpdate (client.ts:206:35)

Expected behavior

I expect no error and the messages part of the plugin getting updated.

Reproduction

No Repo Sorry

System Info

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 3.41 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 17.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4 
    vue-i18n: ^9.4.1 => 9.4.1 
    vue-router: ^4.2.4 => 4.2.4

Screenshot

image

Additional context

No response

Validations