前端 - 编译报错：Cannot find type definition file for '@intlify/unplugin-vue-i18n/types'. 求问如何解决？

Question

依赖如下：

"dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@form-create/designer": "^3.1.3",
    "@form-create/element-ui": "^3.1.24",
    "@iconify/iconify": "^3.1.1",
    "@microsoft/fetch-event-source": "^2.0.1",
    "@videojs-player/vue": "^1.0.0",
    "@vueuse/core": "^10.9.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.10",
    "@zxcvbn-ts/core": "^3.0.4",
    "animate.css": "^4.1.1",
    "axios": "^1.6.8",
    "benz-amr-recorder": "^1.1.5",
    "bpmn-js-token-simulation": "^0.10.0",
    "camunda-bpmn-moddle": "^7.0.1",
    "cropperjs": "^1.6.1",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.10",
    "diagram-js": "^12.8.0",
    "driver.js": "^1.3.1",
    "echarts": "^5.5.0",
    "echarts-wordcloud": "^2.1.0",
    "element-plus": "^2.7.8",
    "fast-xml-parser": "^4.3.2",
    "highlight.js": "^11.9.0",
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
    "marked": "^12.0.2",
    "min-dash": "^4.1.1",
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
    "qrcode": "^1.5.3",
    "qs": "^6.12.0",
    "steady-xml": "^0.1.0",
    "url": "^0.11.3",
    "video.js": "^7.21.5",
    "vue": "3.4.21",
    "vue-dompurify-html": "^4.1.4",
    "vue-i18n": "9.10.2",
    "vue-router": "^4.3.0",
    "vue-types": "^5.1.1",
    "vuedraggable": "^4.1.0",
    "web-storage-cache": "^1.1.1",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.0.1",
    "@commitlint/config-conventional": "^19.0.0",
    "@iconify/json": "^2.2.187",
    "@intlify/unplugin-vue-i18n": "^2.0.0",
    "@purge-icons/generated": "^0.9.0",
    "@types/lodash-es": "^4.17.12",
    "@types/node": "^20.11.21",
    "@types/nprogress": "^0.2.3",
    "@types/qrcode": "^1.5.5",
    "@types/qs": "^6.9.12",
    "@typescript-eslint/eslint-plugin": "^7.1.0",
    "@typescript-eslint/parser": "^7.1.0",
    "@unocss/eslint-config": "^0.57.4",
    "@unocss/transformer-variant-group": "^0.58.5",
    "@vitejs/plugin-legacy": "^5.3.1",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "autoprefixer": "^10.4.17",
    "bpmn-js": "8.9.0",
    "bpmn-js-properties-panel": "0.46.0",
    "consola": "^3.2.3",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-define-config": "^2.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.22.0",
    "lint-staged": "^15.2.2",
    "postcss": "^8.4.35",
    "postcss-html": "^1.6.0",
    "postcss-scss": "^4.0.9",
    "prettier": "^3.2.5",
    "prettier-eslint": "^16.3.0",
    "rimraf": "^5.0.5",
    "rollup": "^4.12.0",
    "sass": "^1.69.5",
    "stylelint": "^16.2.1",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recommended": "^14.0.0",
    "stylelint-config-standard": "^36.0.0",
    "stylelint-order": "^6.0.4",
    "terser": "^5.28.1",
    "typescript": "5.3.3",
    "unocss": "^0.58.5",
    "unplugin-auto-import": "^0.16.7",
    "unplugin-element-plus": "^0.8.0",
    "unplugin-vue-components": "^0.25.2",
    "vite": "5.1.4",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-ejs": "^1.7.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-progress": "^0.0.7",
    "vite-plugin-purge-icons": "^0.10.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-top-level-await": "^1.3.1",
    "vue-eslint-parser": "^9.3.2",
    "vue-tsc": "^1.8.27"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "strictFunctionTypes": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "types": [
      "@intlify/unplugin-vue-i18n/types",
      "vite/client",
      "element-plus/global",
      "@types/qrcode",
      "vite-plugin-svg-icons/client"
    ],
    "outDir": "target", // 请保留这个属性，防止tsconfig.json文件报错
    "typeRoots": ["./node_modules/@types/", "./types"]
  },
  "include": [
    "src",
    "types/**/*.d.ts",
    "src/types/auto-imports.d.ts",
    "src/types/auto-components.d.ts"
  ],
   "exclude": ["dist", "target", "node_modules"] 
}

tsconfig.json报错如下：

Cannot find type definition file for '@intlify/unplugin-vue-i18n/types'.
  The file is in the program because:
    Entry point of type library '@intlify/unplugin-vue-i18n/types' specified in compilerOptions
Cannot find type definition file for '@types/qrcode'.
  The file is in the program because:
    Entry point of type library '@types/qrcode' specified in compilerOptions
Cannot find type definition file for 'element-plus/global'.
  The file is in the program because:
    Entry point of type library 'element-plus/global' specified in compilerOptions
Cannot find type definition file for 'vite-plugin-svg-icons/client'.
  The file is in the program because:
    Entry point of type library 'vite-plugin-svg-icons/client' specified in compilerOptions

项目根目录node_modules子文件夹下包含报错中描述的文件，还是有错误

Answer 1

问题出现在你的 tsconfig.json 文件中对类型定义文件的引用方式。在你的 types 数组中，你尝试直接引用了一些插件或库的类型定义文件，但这些文件可能并不直接存在于 node_modules/@types/ 目录下，或者它们根本就不作为类型定义文件（.d.ts）存在。

解决方案

1. 移除不存在的类型定义引用：
   对于 @intlify/unplugin-vue-i18n/types，@types/qrcode，element-plus/global，和 vite-plugin-svg-icons/client，如果这些库没有提供类型定义文件（.d.ts），或者类型定义文件不是以这种方式暴露的，你应该从 types 数组中移除它们。

   修改后的 tsconfig.json 的 types 数组可能看起来像这样：

   "types": [
     "vite/client"
   ],

2. 检查类型定义文件的存在：
   确认 node_modules/@types/qrcode 是否确实存在。如果不存在，你可能需要安装它（尽管通常 @types 包是通过 npm 安装的，但 qrcode 可能并不总是需要 @types 包，因为它可能已经在其代码中包含了 TypeScript 类型定义）。

   如果 qrcode 没有官方 @types 包，你可能需要查找是否有社区维护的类型定义，或者自己创建一个。

3. 对于 Element Plus：
   element-plus/global 通常不是类型定义文件的路径。如果你在使用 Element Plus 并且需要类型支持，确保你已经安装了 Element Plus，并且你的项目能够正确地解析其类型定义（通常通过自动解析，无需在 types 数组中手动指定）。
4. 对于 Vite 插件：
   vite-plugin-svg-icons/client 通常也不是一个类型定义文件的路径。Vite 插件通常不直接提供类型定义文件给 TypeScript 使用。如果你需要为这些插件的 API 或某些全局类型提供类型定义，你可能需要查看插件的文档或源代码，看是否有相关的 .d.ts 文件被包含在内，或者是否需要自己创建类型定义。
5. 重新编译项目：
   在修改了 tsconfig.json 之后，重新编译你的项目以确保所有更改都已生效。
6. 检查 IDE/编辑器设置：
   确保你的 IDE 或编辑器（如 VS Code）已经重新加载了 TypeScript 配置，并且没有缓存旧的配置。

通过以上步骤，你应该能够解决关于类型定义文件的编译错误。如果问题仍然存在，请检查是否有其他配置或代码问题可能影响到 TypeScript 的类型解析。