properties, and 'i18n' does not exist in type

Question

Project

• "Vue": " 2.6.10",
• "Vue-i18n": " 8.15.3"

I am configuring the internationalization of the project

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import i18n from './lang'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Vue.config.productionTip = false


new Vue({
    router,
    store,
    render: h => h(App),
    i18n
}).$mount('#app')

I use the eclipse i18n line Error appears

Could not find a declaration file for module './lang'. 'c:/javas/workerspaceangular/xygradle/frontend/src/lang/
index.js' implicitly has an 'any' type.

My file index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import pt from './locals/pt_BR'
import en from './locals/en_US'

Vue.use(VueI18n)

export default {
  locale: 'pt',
  fallbackLocale: ['pt'],
  messages: {
    pt: {
      lang: pt
    },
    en: {
      lang: en
    },
  }
}

Below the log when running the npm run command serves

C:\javas\workerspaceangular\xygradle\frontend>npm run serve

> [email protected] serve C:\javas\workerspaceangular\xygradle\frontend
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4420ms                                                                                                           14:44:53

Type checking in progress...

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.91:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ERROR in C:/javas/workerspaceangular/xygradle/frontend/src/main.ts(7,18):
7:18 Could not find a declaration file for module './lang'. 'C:/javas/workerspaceangular/xygradle/frontend/src/lang/index.js' implicitly has an 'any' typ
e.
     5 | import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
     6 | 
  >  7 | import i18n from './lang'
       |                  ^
     8 | 
     9 | import 'bootstrap/dist/css/bootstrap.css'
    10 | import 'bootstrap-vue/dist/bootstrap-vue.css'
ERROR in C:/javas/workerspaceangular/xygradle/frontend/src/main.ts(22,2):
22:2 No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object,
 object, object, Record<...>>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; render: (h: CreateElement) => VNode; i18n: any; }' is not assignable to parameter of type 'T
hisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'i18n' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, o
bject, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, objec
t, object, object, Record<...>>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; render: (h: CreateElement) => VNode; i18n: any; }' is not assignable to parameter of type 'T
hisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'i18n' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object,
object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record
<...>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; render: (h: CreateElement) => VNode; i18n: any; }' is not assignable to parameter of type 'C
omponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
      Object literal may only specify known properties, and 'i18n' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, D
efaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
    20 |        store,
    21 |        render: h => h(App),
  > 22 |        i18n
       |        ^
    23 | }).$mount('#app')
    24 | 
Version: typescript 3.8.3
Time: 4463ms

The project goes on air and works.! Do I need to remove this build error? and I also want to rename this variable called $t

{{ $t('lang.buttons.Secondary')}}

to be called i18n, so I believe it gets simpler

Summary to be treated - How to solve this error? - How to rename t to i18n

Answer 1

Take a look at the examples of vue-i18n here. What you’re missing is creating an instance of VueI18n and not only export a configuration object.

Your index.js should export this Singleton like this:

const i18nConfig =  {
  locale: 'pt',
  fallbackLocale: ['pt'],
  messages: {
    pt: {
      lang: pt
    },
    en: {
      lang: en
    },
  }
}

const i18n = new VueI18n(i18nConfig)

export default i18n