找不到模块“vue-xxx”的声明文件

Question

我尝试向我的项目添加任何第三方Vue.js库时，都会出现以下错误：

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

我尝试过 'vue-treeselect', 'vue-select' 和 'vue-multiselect'，结果差不多相同（这些库不允许使用 import Modulename from，而需要使用 const Modulename = require）。

我将它们添加到 package.json 的 "dependencies": { 中。

我正在使用由 dotnet core 提供的 Vue.js 单页应用程序模板。

---

带有'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" />

错误：

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

- Xavier Peña

---

你能展示一下你的 package.json 文件中的 dependencies 对象吗？ - Phiter

似乎该包没有定义。 - Titian Cernicova-Dragomir

@Phiter 我已经修改了原始帖子，添加了 package.json。 - Xavier Peña

@TitianCernicova-Dragomir 我忘了提到：确实没有 @types/vue-treeselect。尽管我理解这不应该是一个问题（https://github.com/microsoft/typescript/issues/3019）。 - Xavier Peña

如果我在Vue.js中没有使用TypeScript，该如何解决这个问题？ - Aman Ghanghoriya

Answer 1

这个错误是由于 JavaScript 中生成了 vue-xxxxxx 导致的。 方法一： 为了避免这个问题，我只需将其替换为标准的 require()。

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

方法二： 为了避免这个问题，我只需在tsconfig.json中替换这些行即可。

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

现在你可以使用以下的import语句：

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

尽情享受吧 :)

- Mohammad Ayoub Khan

---

给方法二点赞。 - FrancescoMussi

搜索了很久，非常感谢！投票支持方法2。 - pieterjanse

在我的情况下，我只需要在tsconfig.json文件中设置"noImplicitAny": false。这解决了由于“找不到模块'vue-xxx'的声明文件”而导致的构建失败问题。 - Steven Gillies

在我的情况下，我在导入自己的一个组件（碰巧是App.vue）时遇到了这个错误，并且我忘记在<script setup>上标记lang="ts"。 - undefined

Answer 2

如果@types/vue-treeselect不存在，则可以使用环境定义手动声明该模块。

在项目中的任何位置创建一个.d.ts文件（警告：不应使用import或export），并定义您的模块。如果您不想对其进行类型检查（这会将所有导入的内容推断为any），则可以省略此步骤。

declare module 'vue-treeselect'

如果你想进行类型检查：

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

- Fathy

Answer 3

因为任何给出的解决方案都没有帮助到我本身，所以我不得不在我的项目根目录中创建一个专用的vendor.d.ts文件（shims-vue.d.ts无法工作），然后在那里放置以下行：

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

Source

- lukaszkups

---

你需要将 shims-vue.d 添加到 tsconfig.json 文件中的 compilerOptions.types 数组中。 - A. Khaled

Answer 4

事实证明，问题是错误的，因为我想使用'@riophae/vue-treeselect'，但我却选择了'vue-treeselect'。

但这只是问题的一部分，对于我来说，将第三方npm组件导入Vue.js TypeScript项目仍然不是一件简单的事情。

这是我的解决方法：

---

快速而简单的解决方案（当一个人不关心类型，只想导入库时）

步骤：

1. 更改 tsconfig.json（您的项目的TypeScript配置），以允许 import Treeselect from '@riophae/vue-treeselect';：

   "noImplicitAny": false

（如果没有执行此步骤，则会出现错误，指出：TS7016：找不到模块“@riophae/vue-treeselect”的声明文件。'path/to/project/node_modules/@riophae/vue-treeselect/dist/vue-treeselect.min.js' 隐含地具有“any”类型。）

2. 导入模块并注册为“treeselect”：

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

   Vue.component('treeselect', Treeselect);

3. 在视图中使用：

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

4. 记得在 .vue.html 页面底部设置样式：

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

（如果不进行此步骤，您将会收到一个错误，内容为：Unknown custom element: <treeselect> - did you register the component correctly? For recursive components, make sure to provide the "name" option.）

---

如果您想做好事情，我强烈推荐这篇文章：

“为第三方NPM模块编写声明文件”

。

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

- Xavier Peña

Answer 5

在tsconfig.json文件中加入"allowJs": true,这个简单的修改解决了我的问题。

- DonMB

Answer 6

如果您正在使用Vue，则需要在shims-vue.d.ts文件中添加以下内容。

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

- Binh Ho

Answer 7

创建文件夹d在src中，然后创建一个名为vue-treeselect.ts的文件，并在文件vue-treeselect.ts中写入declare module 'vue-treeselect';。

- Aum Zagri