Vuetify 2 Type Errors: Cannot find name 'DefaultProps'

Question

Since i updated my project to use the new 2.x release of Vuetify (https://vuetifyjs.com) i get some Type Errors during compile and i don't know how to get rid of them. Properly just my tsconfig is off somehow.

i checked the docs and made sure to include vuetify in the types section in my tsconfig.json like this:

{
  "compilerOptions": {
    ...

    "types": [
      "webpack-env",
      "jest",
      "vuetify",
      "axios"
      ],

     ...
  }
}

i don't do anything fancy here:

import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  vuetify,
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

then i run the dev server with: yarn serve

ERROR in /Users/sebe/workspace/app/frontend/arena/src/main.ts
12:3 Argument of type '{ vuetify: Vuetify; router: VueRouter; store: Store<any>; render: (h: CreateEle
ment) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, Def
aultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
  Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOpt
ions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>
, Record<string, any>>'.
     8 | 
     9 | new Vue({
  > 10 |   vuetify,
       |   ^
    11 |   router,
    12 |   store,
    13 |   render: (h) => h(App),

ERROR in /Users/sebe/workspace/app/node_modules/vuetify/types/index.d.ts
59:10 Cannot find name 'DefaultData'.
    57 |   export interface ComponentOptions<
    58 |     V extends Vue,
  > 59 |     Data=DefaultData<V>,
       |          ^
    60 |     Methods=DefaultMethods<V>,
    61 |     Computed=DefaultComputed,
    62 |     PropsDef=PropsDefinition<DefaultProps>,

The second error repeats for DefaultProps, PropsDefinition, DefaultComputed, DefaultMethods.

Anyones help would be great :)

UPDATE: i just noticed i get the same errors with the default vuetify typescript template:

vue create newapp
vue add vuetify
yarn serve

my ./plugins/vuetify.ts looks like this:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
import { VuetifyPreset } from 'vuetify/types/presets';

Vue.use(Vuetify);

const opts: Partial<VuetifyPreset> = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: colors.green.base,
      },
      dark: {
        primary: colors.green.darken2,
      },
    },
  },
  icons: {
    iconfont: 'mdi',
  },
};

export default new Vuetify(opts);

Answer 1

in the Vuetify source:

export default Vuetify
export interface Vuetify

The module and the interface share the same name Vuetify cause this issue.

When Typescript want to get the interface of Vuetify, but always the module of Vuetify.

To fix this:

import { Vuetify } from 'vuetify'

add this code into your main.ts file

Answer 2

I had the same problem and it turned out it was because there was a symbolic link in my path:

/c/linkToDev/vueApp - always failed

/d/devFolder/vueApp - always worked