Skip to content

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

Closed
@masonk

Description

@masonk

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

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