Vuetify: [Bug Report] Could not find a declaration file for module 'vuetify/lib'

[MatiasOlivera]

Versions and Environment

Vuetify: 1.3.15
Vue: 2.5.17
Browsers: Google Chrome
OS: Windows 10

Steps to reproduce

Hi guys, I follow the Vue-CLI 3 guide and when I try to compile the source code the terminal show me a Typescript error.

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

Expected Behavior

The Typescript code should compile.

Actual Behavior

2:21 Could not find a declaration file for module 'vuetify/lib'. 'C:/project/path/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 | import 'vuetify/src/stylus/app.styl'
    4 |
    5 | Vue.use(Vuetify, {

Reproduction Link

https://codepen.io/MatiasOlivera/pen/JwbQqy

Other comments

Typescript: 3.2.2

[KaelWD]

See https://github.com/vuetifyjs/vue-cli-plugin-vuetify/issues/43

[Al-un]

@KaelWD Thank you for the link. More specifically, this comment helped me out to properly update my _tsconfig.json_:

"compilerOptions": {
  "types": ["...", "vuetify"],

[glen-84]

This is not a good solution for two reasons:

1. You now have to manually list all packages with types in tsconfig.json.
2. The package consumer should not have to do anything for bundled types to work.

The recommended solution is to have the declaration files output alongside the built JavaScript files. Can this please be done?

Edit: Correction to point #1 above – you only need to list packages with global declarations.

[hamza0867]

Hello guys, any news on this ??
I'd really love for vuetify to support typescript.
Otherwise the tests don't even run, so the app becomes impossible to test

[timothyeash]

I had similar errors on a fresh install.

Once I did this, it worked.

Go in src/main.ts and paste the following content right after the imports
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

https://medium.com/@attiewilly/how-i-married-vuetify-with-typescript-d6441dedd16

[ferrywlto]

In our projects, we use vue add vuetify approach to add Vuetify into our project.

The generated file plugins/vuetify.ts has this line:

import Vuetify from 'vuetify/lib';

remove the /lib from to import Vuetify from 'vuetify';

it will solve the issue. 🥂

if you are looking for a-la-carte installation please read: this

[Aurora12]

@ferrywlto thanks! I've just used everything brand new including Vuetify 2.0.10, and stumbled upon this issue.

[esbgo97]

I solved it by deleting the instance and imports of a component that had been deleted.

[acklavidian]

Adding this module declaration to a *.d.ts file works like a charm for my purposes:

declare module 'vuetify/lib' {
  import 'vuetify/types/lib'
}

[devpixde]

This is really annoying, none of the above solutions works for me.
New project with newest dependencies set up with CLI 3.

If i do

remove the /lib from to import Vuetify from 'vuetify';

the error disappears but styles are missing fonts.

declare module 'vuetify/lib' {
import 'vuetify/types/lib'
}

did not work either,

SOLUTION:

BUT this did the trick (in my tsconfig.json) , add "vuetify" to types:
(And i assume its the only correct way??)

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

[Aurora12]

@devpixde "vuetify" should be in the types anyway, but that is not what helped me out.

I've changed the import statement to import { Scroll } from 'vuetify/es5/directives'; and this works for me.

Btw, the problem has been confirmed on official discord #bugs channel on 09/09/2019, but I've no idea if that yielded anything further.

[MajesticPotatoe]

This is added in the FAQ section of the docs.

[glen-84]

@MajesticPotatoe,

Can this not be fixed properly instead of just documenting a workaround?

[dcb99]

This is still an issue with a brand new project created with vue cli 4 and then adding vuetify via vue add vuetify. We shouldn't have to be manually fixing issues after using the CLI, it should just work.

[ctsstc]

If you use typeRoot in your tsconfig.json instead of types you will need to instead add:

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/vuetify/types"
    ]
  }
}

It seems it would be ideal to have an @types package as well.

[douglasg14b]

Still an issue with new projects...... Why is this closed?

[glen-84]

I think this could also be solved with package exports, but this has not yet been implemented in TypeScript.

[vernaschwartz]

I was having trouble.
Then I used import 'vuetify/dist/vuetify.min.css' in the main.js file and then I deleted the /lib on the vuetify.js file.
And it all worked.

[johnleider]

@vernaschwartz We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression.

If you have any additional questions, please reach out to us in our Discord community.