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);

Gladdie

Mind showing the content of ./plugins/vuetify? – Menard

i updated the question with the contents of that file :) – Gladdie

I am getting this error when I run the build task in the "vue ui", not when I run "npm run build" however... – Lollar

Created a gist with the repro steps. gist.github.com/thejoecode/a860e29e8aac881c24c795b2a844bcf2 – Lollar

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

Velez

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

Thebault

This is the issue, also happening on OSX. /Volumes/Macintosh HD/src/test - fails while /src/test - succeeds. I have a case sensitive partition that I was trying to build on, don't see a way to get it to succeed as /Volumes/cs/src will always fail to build. – Lollar

Answer 3

I encountered the same issue, when trying to treeshake Vuetify and installed vuetify-loader WebPack plugin

My solution - add the second line to main.ts:

import vuetify from '@/plugins/vuetify.js'; 
import Vuetify from 'vuetify';

Similar to @shuixiya1999 solution, this one works for me here and now

Configuration:

    "vue": "2.6.14",
    "vuetify": "^2.6.7",
    "vuetify-loader": "^1.7.3", 

Achromatous