2

After upgrading my Vue 2.0 Typescript project that uses vue-class-component to Vue 2.5, I get the following error in the declaration file:

ERROR in /myproject/node_modules/vue-class-component/lib/declarations.d.ts

(6,33): error TS2702: 'Vue' only refers to a type, 
but is being used as a namespace here.

Indeed, the declaration.d.ts seems to use Vue as a namespace:

options: Vue.ComponentOptions<Vue>

But how can I fix this? Is this an oversight/glitch in the declaration file of vue-class-component?

The whole declaration file:

import Vue from 'vue';
export declare type VueClass = {
    new (): Vue;
} & typeof Vue;
export declare type DecoratedClass = VueClass & {
    __decorators__?: ((options: Vue.ComponentOptions<Vue>) => void)[];
};

2 Answers 2

4

I fixed it by importing componentoptions explicitly, this seems to work:

import Vue from 'vue';
import {ComponentOptions} from 'vue'

let options : ComponentOptions<Vue>;
3
  • I'm not sure I follow - where did you apply this change? At vue-class-component's declaration.d.ts? It doesn't make sense to me - i.e. it might work locally, but for PaaS deployment (like heroku or similar) I would need to run some post-deploy script (a smelly one to be honest)
    – lukaszb
    Commented Dec 20, 2017 at 14:25
  • As already requested by previous comment: Where did you apply this change?! I have the same problem and I don't know where to place this snippet. If I place it directly in the declaration.d.ts I'll get a new error: error TS1046: A 'declare' modifier is required for a top level declaration in a .d.ts file
    – Onsokumaru
    Commented Mar 16, 2018 at 10:27
  • It's in my vue SFC component (for example, helloworld.vue): <script lang="ts">import Vue, { ComponentOptions } from 'vue'I haven't run into this error lately, maybe because I now use the vue-class-component or Vue has updated their typings file?
    – Kokodoko
    Commented Mar 16, 2018 at 12:15
2

Vue's declaration files recently updated, so make sure both vue-class-component and vue are up-to-date. Because of the update, you may have to reference types in the following way:

import Vue, * as VueTypes from "vue"

let x: VueTypes.ComponentOptions<any>;
2
  • I did update all packages. I found a similar solution by just importing the options.
    – Kokodoko
    Commented Oct 26, 2017 at 9:24
  • 1
    When I update the packages using npm update vue-class-component or even install then I do not get the latest version from github: github.com/vuejs/vue-class-component/blob/master/src/… The github version seems to be updated already. Is there another step required?
    – Kokodoko
    Commented Oct 27, 2017 at 23:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.