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

Viewed 6114

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!

1 Answers

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.

Related