Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
masonk opened this issue Nov 11, 2019 · 2 comments
Closed

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

masonk opened this issue Nov 11, 2019 · 2 comments

Comments

@masonk
Copy link

masonk commented Nov 11, 2019

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: [
@ktsn
Copy link
Member

ktsn commented Nov 12, 2019

Maybe #189 fixes this.

@daggerok
Copy link

daggerok commented Jan 9, 2020

my workaround with using lazy loading: https://github.com/daggerok/tsx-vue-composition-api-example#tsx-vuerouter-integration-fixes

pikax pushed a commit to pikax/vue-function-api that referenced this issue Apr 19, 2020
)

* fix: avoid accessing undeclared instance fields on type level

* fix: inherit vue constructor type for constructor proxy

fix vuejs#187 
fix vuejs#185
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants