Could not find a declaration file for module 'vue-xxx'

Question

Any 3rd party Vue.js library that I try to add to my project, throws the following error:

Could not find a declaration file for module 'vue-xxx'

I have tried 'vue-treeselect', 'vue-select', 'vue-multiselect' with more or less the same result (* those libraries don't allow import Modulename from, but need const Modulename = require).

I add those under "dependencies": { in package.json.

I am using the SPA template for Vue.js provided by dotnet core.

Full example with 'tree-select':

import Treeselect from 'vue-treeselect';

/* ... */

value = null;
source = [
    {
        id: 'node-1',
        label: 'Node 1',
        children: [
            {
                id: 'node-1-a',
                label: 'Node 1-A',
            }
      ]
    },
    {
        id: 'node-2',
        label: 'Node 2',
    }
  ];

/* ... */

<treeselect v-model="value"
                :multiple="true"
                :options="source" />

Error:

in [at-loader] ./ClientApp/components/mycomponent/mycomponent.ts:10:24 
    TS7016: Could not find a declaration file for module 'vue-treeselect'. 'path/to/project/node_modules/vue-treeselect/dist/vue-treeselect.js' implicitly has an 'any' type.

package.json

{
  "name": "MyProject",
  "private": true,
  "version": "0.0.0",
  "dependencies": {
    "dygraphs": "^2.1.0",
    "ol3-layerswitcher": "^1.1.2",
    "vue-treeselect": "^1.0.6"
  },
  "devDependencies": {
    "@types/dygraphs": "^1.1.6",
    "@types/webpack-env": "^1.13.0",
    "@types/vue": "^2.0.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "bootstrap": "^3.3.6",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.1.1",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.5.13",
    "vue-loader": "^14.2.1",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2"    
  }
}

@Phiter I have modified the original post to add package.json. — Xavier Peña
– Xavier Peña, Commented Mar 13, 2018 at 14:37
@TitianCernicova-Dragomir I forgot to mention that: there is no @types/vue-treeselect indeed. Although as I understand it this should not be an issue. — Xavier Peña
– Xavier Peña, Commented Mar 13, 2018 at 14:39
how to solve this issue If I am not using typescript in vuejs — Aman Ghanghoriya
– Aman Ghanghoriya, Commented Dec 14, 2022 at 9:51

Penny Liu · Accepted Answer · 2023-09-13 09:33:18Z

95

This error occured because of vue-xxxxxx has been generated in JavaScript.

Method 1: To avoid the issue I just replace it by the standard require():

const vue-xxxxxx = require('vue-xxxxxx');
// import { vue-xxxxxx } from 'vue-xxxxxx'

Method 2: To avoid the issue I just replace these line in the tsconfig.json

"noImplicitAny": false,
"allowJs": true,

Now you can use import statement as follows:

import { vue-xxxxxx } from 'vue-xxxxxx'

Enjoy :) 😎

edited Sep 13, 2023 at 9:33

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Oct 4, 2019 at 8:22

Mohammad Ayoub Khan

3,01022 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steven Gillies Over a year ago

In my instance I only needed "noImplicitAny": false in tsconfig.json file. It solved failing build due to Could not find a declaration file for module 'vue-xxx'

V. Rubinetti Over a year ago

In my case, I was getting this error importing one of my own components (App.vue by chance), and I had forgotten to mark lang="ts" on the <script setup>.

Brian Quinn Over a year ago

In learning Vue I did some code exercises in JavaScript and put them in a vue file and got a similar error. Didn't like that there was JavaScript. In my case I converted the code to TypeScript and that cleaned it up. Oddly the code worked regardless.

Fathy · Accepted Answer · 2018-03-13 15:12:33Z

27

If @types/vue-treeselect does not exist then you can manually declare the module using ambient definitions.

Create a .d.ts somewhere in your project (warning: it should not use import or export) and define your module. If you don't want to type-check it (makes everything imported to be infered as any) :

declare module 'vue-treeselect'

If you want to type-check it :

declare module 'vue-treeselect' {
  export function something(): void
}

edited Mar 13, 2018 at 15:12

answered Mar 13, 2018 at 14:56

Fathy

5,2291 gold badge27 silver badges25 bronze badges

Comments

lukaszkups · Accepted Answer · 2021-03-23 11:44:51Z

18

Because any of given solutions haven't helped me per se, I had to create a dedicated vendor.d.ts (shims-vue.d.ts did not work) file in my project root folder, and then put there following line:

declare module 'my-module-name-here';

Source

answered Mar 23, 2021 at 11:44

lukaszkups

6,0109 gold badges52 silver badges92 bronze badges

1 Comment

A. Khaled Over a year ago

you need to add shims-vue.d to tsconfig.json under compilerOptions.types array

DonMB · Accepted Answer · 2022-03-24 15:07:33Z

6

In tsconfig.json file simply add "allowJs": true, solved it for me

answered Mar 24, 2022 at 15:07

DonMB

2,7164 gold badges33 silver badges65 bronze badges

Comments

Xavier Peña · Accepted Answer · 2018-03-14 10:15:09Z

It turns out the question was wrong, since I wanted to use '@riophae/vue-treeselect' but I was targeting 'vue-treeselect' instead.

But this was just one part of the problem, it is still not trivial (at least for me) to import 3rd party npm components into a Vue.js typescript project.

This is how I solved it:

Quick & dirty solution (when one does not care about the type and just wants to import the library)

Steps:

Change tsconfig.json (the Typescript configuration of your project) to allow import Treeselect from '@riophae/vue-treeselect';:

"noImplicitAny": false

(without this step you get an error that states: TS7016: Could not find a declaration file for module '@riophae/vue-treeselect'. 'path/to/project/node_modules/@riophae/vue-treeselect/dist/vue-treeselect.min.js' implicitly has an 'any' type.)

Import module and register as 'treeselect':

import Treeselect from '@riophae/vue-treeselect';

Vue.component('treeselect', Treeselect);

(without this step you get an error that states: Unknown custom element: <treeselect> - did you register the component correctly? For recursive components, make sure to provide the "name" option.)

Use it in the view:

<treeselect v-model="value" :multiple="true" :options="source" />
Rember to set the style at the bottom of the .vue.html page:

<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>

If you want to do things properly, I highly recommend this article:

"Write a declaration file for a third-party NPM module"

https://medium.com/@chris_72272/migrating-to-typescript-write-a-declaration-file-for-a-third-party-npm-module-b1f75808ed2

Binh Ho · Accepted Answer · 2021-03-18 07:06:31Z

1

If you are using vue, let's add as below to shims-vue.d.ts file

declare module 'module-name-here' {
  import { ModuleNameHere } from 'module-name-here'
  export { ModuleNameHere }
}

answered Mar 18, 2021 at 7:06

Binh Ho

5,3691 gold badge43 silver badges48 bronze badges

Comments

Aum Zagri · Accepted Answer · 2022-12-09 11:18:47Z

0

Create Folder d in src then create a file vue-treeselect.ts and write declare module 'vue-treeselect'; in file vue-treeselect.ts

answered Dec 9, 2022 at 11:18

Aum Zagri

3143 silver badges7 bronze badges

Comments

Joe Sadoski · Accepted Answer · 2024-07-24 17:26:23Z

-1

Like many other Vue/TS issues, this one was solved for me by Restarting the TypeScript Language Server in Visual Studio Code either from the command palette, or by closing/restarting VSCode.

answered Jul 24, 2024 at 17:26

Joe Sadoski

6732 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Could not find a declaration file for module 'vue-xxx'

8 Answers 8

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related