Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Typescript + Vue + Vue-Router: No overload matches this call. Cannot find name 'VueRouter'

I am new to typescript and trying to use vue-router in my project.

I am getting following errors:

source\app\main.ts(3,3): error TS2769: No overload matches this call.

Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps): Vue', gave the following error. Argument of type '{ router: any; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps'. Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithArrayProps'.

Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps): Vue', gave the following error. Argument of type '{ router: any; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps'. Object literal may only specify known properties, and 'router' does not exist in type 'ThisTypedComponentOptionsWithRecordProps'.

Overload 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>): Vue', gave the following error. Argument of type '{ router: any; }' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'.

source\app\main.ts(3,15): error TS2304: Cannot find name 'VueRouter'.

main.ts

const App = new Vue({
  router: new VueRouter({})
}).$mount('#wrapper');
main.min.js:formated
const App = new Vue({
  router: new VueRouter({})
}).$mount("#wrapper");
//# sourceMappingURL=main.js.min.map
'gulp-typescript' config
target: "es2015",
allowJs: true,
sourceMap: true,
types: [
  './types/vue/',
  './types/vue-router/'
allowSyntheticDefaultImports: true,
experimentalDecorators: true,
moduleResolution: "node"
gulp task
const _ts = async () => {
  return gulp.src(path.source.ts)
    .pipe(rigger())
    .pipe(sourcemaps.init())
    .pipe(typescript(
      config.typescript,
      typescript.reporter.defaultReporter()
    .on('error', function(){return false}) // WALKAROUND: Error: gulp-typescript: A project cannot be used in two compilations at the same time. Create multiple projects with createProject instead.
    .pipe(terser())
    .pipe(sourcemaps.write('./', {
      sourceMappingURL: function(file) {
        return `${ file.relative }.min.map`;
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(path.production.js))
    .pipe(reload({stream: true}))
Typescript types (official downloaded from github): vue, vue-router
Maybe useless information: In my index.html file are script tags with vue and vue-router official CDN.
Thanks very much for any suggestions!
The mess of type errors might be obscuring the real one:
source\app\main.ts(3,15): error TS2304: Cannot find name 'VueRouter'.
Looks to me like VueRouter did not import correctly.
                Thanks for response! But how is this possible, if I have used the official types? I am loading it the same way as vue. Or how can I import it correctly?
– RamoFX
                May 10, 2020 at 2:11
                Sorry for what may seem like an obvious question on my part, but do you have import VueRouter from 'vue-router' somewhere?
– Riley Pagett
                May 10, 2020 at 2:11
                I have maybe stupid question, but why I have to import it? If you think little bit about it, there is (almost) no reason to do that, because VueRouter will be loaded in index.html. If I do not use script tag in my .html file feom CDN, then I need to install vue-router.js file and mess my structure, import with CDN-URL doen't even work. So do I really need to do it that way?
– RamoFX
                May 10, 2020 at 2:23
                Now that you're using TypeScript, your code is pre-compiled before it hits the browser. In order to check for correct variable types and function patterns, it has to know what all your variables are. It has no idea what you'll be loading in your HTML, unfortunately. You have to import the library in your code to be able to reference it.
– Riley Pagett
                May 10, 2020 at 2:25
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.