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

Question

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!

Riley Pagett · Accepted Answer · 2020-05-10 01:52:52Z

1

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.

answered May 10, 2020 at 1:52

Riley Pagett

3731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RamoFX Over a year ago

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?

Riley Pagett Over a year ago

Sorry for what may seem like an obvious question on my part, but do you have import VueRouter from 'vue-router' somewhere?

RamoFX Over a year ago

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?

Riley Pagett Over a year ago

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.

RamoFX Over a year ago

I agree with you! Okay then I'll try it later.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related