CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Ruhith Udakara
Ruhith Udakara

Reputation: 2454

Could not find a declaration file for module 'vuetify/lib' in a fresh vue js project

I created a new vue project and after that i added vuetify,

$ vue create my-app
$ cd my-app
$ vue add vuetify
$ npm run serve

then i got this error

ERROR in /home/ruhith/Documents/vue/file upload/fileupload/src/plugins/vuetify.ts(2,21):
2:21 Could not find a declaration file for module 'vuetify/lib'. '/home/ruhith/Documents/vue/file upload/fileupload/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';`
    1 | import Vue from 'vue';
  > 2 | import Vuetify from 'vuetify/lib';
      |                     ^
    3 | 
    4 | Vue.use(Vuetify);
    5 | 
Version: typescript 3.8.3
Time: 2774ms

what did i missed here?is this a bug in vuetufy?

Upvotes: 19

Views: 12797

Answers (4)

SirPeace
SirPeace

Reputation: 109

No matter what I did, types for color palette are missing.
So I made a decision to copy & paste the contents of node_modules/vuetify/lib/util/colors.mjs to my own theme/colors.ts and import colors from there 😄

Ended up like so:

# theme/colors.ts

// from node_modules/vuetify/lib/util/colors.mjs
const red = Object.freeze({
  base: '#f44336',
  lighten5: '#ffebee',
  lighten4: '#ffcdd2',
  lighten3: '#ef9a9a',
  lighten2: '#e57373',
  lighten1: '#ef5350',
  darken1: '#e53935',
  darken2: '#d32f2f',
  darken3: '#c62828',
  darken4: '#b71c1c',
  accent1: '#ff8a80',
...

# vuetify.ts

...
import colors from '@/theme/colors'

...
const vuetify = createVuetify({
  // ... your configuration
  theme: {
    themes: {
      light: {
        colors: {
          primary: colors.red.lighten1
        }
      }
    }
  }
})
app.vueApp.use(vuetify)

Upvotes: 1

Laura Caroline
Laura Caroline

Reputation: 86

In my case, I had to adjust my tsconfig file adding the moduleResolution to it:

// tsconfig.json
{
  ...
  "compilerOptions": {
    ...
    "module": "esnext",
    "moduleResolution": "node",
  }
}

Upvotes: 1

Kirill Groshkov
Kirill Groshkov

Reputation: 1761

You need to add vuetify's types to tsconfig.json, like this:

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vuetify"]
  }
}

Taken from FAQ here: https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#questions

Upvotes: 18

Wei Zhang
Wei Zhang

Reputation: 1

change the file node_modules->vuetify-loader->lib->plugin.js

class VuetifyLoaderPlugin {
  constructor (options) {
    // this.options = options || {}
    this.options = (options) ? options : {}
  }

Upvotes: -4

Related Questions