intlify / vue-cli-plugin-i18n

:globe_with_meridians: Vue CLI plugin to add vue-i18n to your Vue Project
MIT License
195 stars 41 forks source link

Error during build on fresh generated Vue-cli project in Typescript #290

Open Banzzouille opened 1 year ago

Banzzouille commented 1 year ago

Hi there, I hope you can help me. I'm new on vue/i18n and other, so sorry if the response is simple or already exists where else, but I didn't find it ......

Let me explain I generate a fresh vue project with vue-cli in typescript like this like this my vue3 project config

then, I try to add the i18n plugin to this new project with the command 'vue add i18n@next' and select these options Config i18n@next

this is the content of my packagess.json file

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
  },
  "dependencies": {
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-i18n": "^9.1.0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^2.1.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5",
    "vue-cli-plugin-i18n": "^2.1.1"
  }
}

And the content of my i18n.ts generated file

import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'

/**
 * Load locale messages
 * 
 * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
 * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
 */
function loadLocaleMessages(): LocaleMessages<VueMessageType> {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages: LocaleMessages<VueMessageType> = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

But finally, when I run an npm run serve command, I have this error

ERROR in src/i18n.ts:26:3
TS2769: No overload matches this call.
  Overload 1 of 2, '(options: I18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, string, ComposerOptions<{ ...; }, ... 9 more ..., NumberFormats<...>> | VueI18nOptions<...>>, LegacyVueI18n?: any): I18n<...>', gave the following error.
    Type 'LocaleMessages<VueMessageType, string, string>' is not assignable to type '{ [x: string]: LocaleMessage<VueMessageType>; }'.
      'string' index signatures are incompatible.
        Type 'VueMessageType' is not assignable to type 'LocaleMessage<VueMessageType>'.
          Type 'string' is not assignable to type 'LocaleMessage<VueMessageType>'.
  Overload 2 of 2, '(options: I18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, { messages: "en-US"; datetimeFormats: "en-US"; numberFormats: "en-US"; }, ComposerOptions<...> | VueI18nOptions<...>>, LegacyVueI18n?: any): I18n<...>', gave the following error.
    Property '"en-US"' is missing in type 'LocaleMessages<VueMessageType, string, string>' but required in type '{ "en-US": LocaleMessage<VueMessageType>; }'.
    24 |   locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    25 |   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  > 26 |   messages: loadLocaleMessages()
       |   ^^^^^^^^
    27 | })
    28 |

Thanks for your time and your help.

Florian

node version => v16.17.1 npm version => 8.15.0