Skip to content

vue-router doesn't accept components created with createComponent() #185

Closed
@masonk

Description

I pushed a test case to a new repo here

Steps to reproduce this repo:

  1. Create a new repo with vue-cli 3. My version was 3.12.1.
  2. Accept defaults (router, typescript).
  3. yarn add @vue/composition-api
  4. Edit Home.vue to use createComponent()
  5. Typescript starts erroring out during type checking:

Error message:

    13 | export default createComponent({
    14 |   components: {
ERROR in /home/mason/dev/vue-rtc/vue-rtc/src/router.ts
7:27 Argument of type '{ mode: "history"; base: any; routes: ({ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; } | { path: string; name: string; component: () => Promise<...>; })[]; }' is not assignable to parameter of
 type 'RouterOptions'.
  Types of property 'routes' are incompatible.
    Type '({ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; } | { path: string; name: string; component: () => Promise<typeof import("/home/mason/dev/vue-rtc/vue-rtc/src/views/About.vue")>; })[]' is not assignable to t
ype 'RouteConfig[]'.
      Type '{ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; } | { path: string; name: string; component: () => Promise<typeof import("/home/mason/dev/vue-rtc/vue-rtc/src/views/About.vue")>; }' is not assignable to typ
e 'RouteConfig'.
        Type '{ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; }' is not assignable to type 'RouteConfig'.
          Types of property 'component' are incompatible.
            Type 'VueProxy<ComponentPropsOptions<Data>, Data>' is not assignable to type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, Record<...>> | AsyncComponentPromise<...> |
 AsyncComponentFactory<...> | undefined'.
              Type 'ComponentOptions<Vue, { [x: string]: unknown; }, never, never, ComponentPropsOptions<Data>, ExtractPropTypes<ComponentPropsOptions<Data>, false>> & VueConstructorProxy<...>' is missing the following properties from type 'VueConstructor
<Vue>': extend, nextTick, set, delete, and 9 more.
     5 | Vue.use(Router);
     6 | 
  >  7 | export default new Router({
       |                           ^
     8 |   mode: 'history',
     9 |   base: process.env.BASE_URL,
    10 |   routes: [

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions