Runtime build failed to get compiled translation file (via vue-i18n-loader)

[kuanyui]

vue & vue-i18n version

ex:

• electron: 8.2.5
• vue: 3.0.7
• vue-i18n: 9.0.0
• @intlify/vue-i18n-loader: 1.1.0
• (I write webpack.config.js manually, instead of use vue-cli's vue.config.js. I don't sure if this is related to the import of en-US/main.json)

Steps to reproduce

Story is a little long, I will manage to make this story easy to read and comprehensible...

---

[[[ 0. init ]]]

At beginning, vue-i18n works well.

[[[ 1. Error from Electron CSP ]]]

I'm using Vue I18n under Electron, it always give CSP warning:

so I have to turn unsafe-eval off:

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">

---

[[[ 2. vue-i18n says it cannot eval() ]]]

Now it shows error Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' 'unsafe-inline'".

For this error , I guess I should use runtime build of vue-i18n

  /// webpack.config.js
  resolve: {
    alias: {
      // Suppress warning "You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle."
      // https://github.com/intlify/vue-i18n-next/issues/219
      // https://vue-i18n.intlify.dev/installation.html#with-a-bundler
      "vue-i18n": "vue-i18n/dist/vue-i18n.runtime.esm-bundler.js",    // No `CSP eval` warning, but still has `esm-bundle` warning.
      // "vue-i18n": "vue-i18n/dist/vue-i18n.runtime.esm-browser.prod.js",   // No `CSP eval` nor `esm-bundle` warning anymore, but all warning I need to read for dev are also be omitted.
    }
  },

[[[ 2.5. warning esm-bundler ]]]

This issue seems little against the topic, but still need to mention and have a reference.

Simultaneously, vue-i18n warns me You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. (issue #254 ? #219 ?)

This warning message seems can be omitted if use runtime + prod build, however, all warning message I need during development are also be wiped away... I don't know how to omit only the esm-bundle warning.

---

[[[ 3. vue-i18n says it need pre-compiled message instead of JSON ]]]

Now it shows warning [intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'title.window'.

So I guess I should use vue-i18n-loader to compile json files into functions:

  /// webpack.config.js
  module: {
    rules: [
      {
        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
        type: 'javascript/auto',
        loader: '@intlify/vue-i18n-loader',
        include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
          path.resolve(__dirname, 'i18n/dist')
        ]
      },
  }

/// i18n.ts
import enObj from '../../i18n/dist/en-US/main.json'
export type language_t = 'en-US' | 'zh-TW' | 'ja-JP'
export const ALL_LANG_KEY: language_t[] = ['en-US', 'zh-TW', 'ja-JP'] // our default language that is preloaded
export const DEFAULT_LANGUAGE: language_t = 'en-US'

export const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: DEFAULT_LANGUAGE, // set locale
  fallbackLocale: DEFAULT_LANGUAGE,
  messages: { [DEFAULT_LANGUAGE]: enObj },
})

export function loadLangFileAsync<T> (langId: language_t): Promise<boolean> {
  if (i18n.global.locale.value !== langId) {
    return import(/* webpackChunkName: "lang-[request]" */ `../../i18n/dist/${langId}/main.json`).then(jsonObj => {
      i18n.global.setLocaleMessage(langId, jsonObj)
      i18n.global.locale.value = lang
      return true
    })
  }
  return Promise.resolve(false)
}

[[[ 4. (Stuck) ]]]

Terrible, seems all translation files cannot be loaded correctly now.

shared.esm-bundler.js:54 [intlify] Not found 'title.window' key in 'en-US' locale messages.
shared.esm-bundler.js:54 [intlify] Fall back to translate 'title.window' key with 'en' locale.
shared.esm-bundler.js:54 [intlify] Not found 'title.window' key in 'en' locale messages.
shared.esm-bundler.js:54 [intlify] Not found 'title.window' key in 'en-US' locale messages.
shared.esm-bundler.js:54 [intlify] Fall back to translate 'title.window' key with 'en' locale.
shared.esm-bundler.js:54 [intlify] Not found 'title.window' key in 'en' locale messages.

I don't sure if the vue-i18n-loader work correctly, at least the file appeared in devtools:

Now I stuck here... Unable to find any way to get out of here...

[kuanyui]

Aaahh, I should use npm i -D vue-i18n-loader@next instead of 1.x release... Is this possible to give user a warning about this when installing or runtime?

[kazupon]

Thank you for your reporting!

Sorry, poor documentation.
For Vue I18n v9, You need to use @intlify/vue-i18n-loader@next.
I'll try to improve the docs and warn when user install.

Thanks!

[kuanyui]

Thanks, I still has problem to omit the esm-bundle warning in #219 , I wonder if you mind to take a look if I won't trouble you, thanks again!