CODEWITHSUNDEEP
typescriptvue.jsvuetify.jsvue-clits-loader
Sebastian Bresin
Sebastian Bresin

Reputation: 79

Vuetify 2 Type Errors: Cannot find name 'DefaultProps'

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

Upvotes: 7

Views: 2107

Answers (3)

Peter Malcovsky
Peter Malcovsky

Reputation: 64

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",

Upvotes: 0

shuixiya1999
shuixiya1999

Reputation: 41

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

Upvotes: 4

William Atti&#233;
William Atti&#233;

Reputation: 83

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

Upvotes: 2

Related Questions