I just added typescript to my existing vuejs application and I am getting a Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>' error. My understanding is that I do not need to install @types/vue or @types/vue-router to fix this issue.
Can someone please advise a newbie?
~\src\router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({............
});
export default router;
StackTrace:
ERROR in ~/src/main.ts(126,10):
126:10 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: any; store: any; i18n: any; acl: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', gave the following error.
Argument of type '{ router: any; store: any; i18n: any; acl: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
Object literal may only specify known properties, and 'router' 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: any; store: any; i18n: any; acl: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
124 |
125 | Vue.config.productionTip = false;
> 126 | new Vue({router, store, i18n, acl, render: h => h(App)}).$mount('#app');
| ^
Version: typescript 3.8.3
package.json:
{
"name": "video-audio-transcription",
"version": "4.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@aws-amplify/ui-vue": "^0.2.3",
"@chenfengyuan/vue-countdown": "^1.1.2",
"@react-native-community/netinfo": "^5.5.0",
"@syncfusion/ej2-vue-grids": "^18.1.46",
"@types/chart.js": "^2.9.20",
"@types/vue2-hammer": "^2.1.0",
"ag-grid-community": "^21.0.1",
"ag-grid-vue": "^21.0.1",
"algoliasearch": "^3.33.0",
"apexcharts": "^3.6.12",
"aws-amplify": "^3.0.9",
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"core-js": "2.6.5",
"echarts": "^4.2.1",
"file-saver": "2.0.1",
"firebase": "^6.0.4",
"instantsearch.css": "^7.3.1",
"jsonwebtoken": "^8.5.1",
"material-icons": "^0.3.1",
"perfect-scrollbar": "^1.4.0",
"postcss-rtl": "^1.5.0",
"prismjs": "^1.16.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.11",
"vue-acl": "4.0.7",
"vue-apexcharts": "^1.3.5",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-chartjs": "^3.4.2",
"vue-class-component": "^7.2.3",
"vue-clipboard2": "^0.3.0",
"vue-context": "4.0.0",
"vue-echarts": "^4.0.3",
"vue-feather-icons": "^5.0.0",
"vue-flatpickr-component": "^8.1.2",
"vue-form-wizard": "^0.8.4",
"vue-fullcalendar": "^1.0.9",
"vue-i18n": "^8.11.2",
"vue-instantsearch": "^2.2.1",
"vue-perfect-scrollbar": "^0.1.0",
"vue-prism-component": "^1.1.1",
"vue-property-decorator": "^8.4.1",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.6",
"vue-select": "^3.1.0",
"vue-simple-calendar": "^4.2.2",
"vue-simple-suggest": "^1.9.5",
"vue-star-rating": "^1.6.1",
"vue-tour": "^1.1.0",
"vue-tree-halower": "^1.8.0",
"vue-video-player": "^5.0.2",
"vue2-google-maps": "^0.10.6",
"vue2-hammer": "^2.1.2",
"vuedraggable": "^2.21.0",
"vuejs-datepicker": "^1.5.4",
"vuesax": "3.11.1",
"vuex": "^3.1.1",
"xlsx": "^0.15.0"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^1.2.0",
"@types/jest": "^24.0.19",
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-typescript": "^4.3.1",
"@vue/cli-plugin-unit-jest": "^4.3.1",
"@vue/cli-service": "^3.7.0",
"@vue/test-utils": "^1.0.0-beta.31",
"axios-mock-adapter": "^1.17.0",
"jest-localstorage-mock": "^2.4.2",
"node-sass": "^4.12.0",
"purgecss": "^1.3.0",
"sass-loader": "^7.1.0",
"script-loader": "0.7.2",
"tailwindcss": "^1.0.1",
"typescript": "^3.5.2",
"vue-template-compiler": "^2.6.10"
},
"jest": {
"setupFiles": [
"jest-localstorage-mock"
],
"preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
}
}
