在 11.0.0 及更高版本中找不到模块“highcharts”的声明文件

问题描述 投票：0回答：2

我正在使用带有 TypeScript 的 Vue 3，并且我尝试使用这行代码从 highcharts 导入类型：

import * as Highcharts from 'highcharts'

如果我使用 highcharts 版本 

10.3.3
或更早版本，则一切正常。但从版本 
11.0.0
开始，它显示此错误：
Could not find a declaration file for module 'highcharts'
。是我做错了什么还是新版本坏了？我也用最新版本测试过(
11.1.0
)。

编辑2：

我的配置文件似乎无关紧要，因为我使用 

Vite
从头开始了一个新的 Vue 3 项目，导入了 
highcharts
和 
highcharts-vue
包，但它仍然抛出相同的错误。 
highcharts-vue
工作正常，但常规 
highcharts
找不到模块。

编辑1：

这是我的配置文件：

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

// tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts"]
}

// package.json dependencies
"dependencies": {
    "@revolist/vue3-datagrid": "^3.2.17",
    "@tiptap/extension-color": "^2.0.3",
    "@tiptap/extension-text-style": "^2.0.3",
    "@tiptap/pm": "^2.0.3",
    "@tiptap/starter-kit": "^2.0.3",
    "@tiptap/vue-3": "^2.0.3",
    "@types/uuid": "^9.0.2",
    "@types/vuelidate": "^0.7.18",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.3",
    "@vueuse/core": "^10.2.1",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "git-rev-sync": "^3.0.2",
    "happy-dom": "^10.1.1",
    "highcharts": "^11.1.0",
    "highcharts-vue": "^1.4.3",
    "json-logic-js": "^2.0.2",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.29",
    "lodash": "^4.17.21",
    "luxon": "^3.3.0",
    "mathjs": "^11.8.2",
    "mitt": "^3.0.1",
    "oidc-client-ts": "^2.2.4",
    "pinia": "^2.1.4",
    "tslib": "^2.6.0",
    "uuid": "^9.0.0",
    "vue": "^3.2.19",
    "vue-draggable-next": "^2.2.1",
    "vue-i18n": "^9.2.2",
    "vue-json-csv": "^2.1.0",
    "vue-router": "^4.2.4",
    "vue-select": "^4.0.0-beta.5",
    "vue3-drr-grid-layout": "^1.9.7",
    "vuelidate": "^0.7.7"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.5",
    "@types/git-rev-sync": "^2.0.0",
    "@types/json-logic-js": "^2.0.2",
    "@types/lodash": "^4.14.195",
    "@types/luxon": "^3.3.0",
    "@types/node": "^20.4.1",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vitest/coverage-c8": "^0.33.0",
    "@vue/test-utils": "^2.3.2",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-vue": "^7.0.0-0",
    "jsdom": "^22.1.0",
    "prettier": "2.8.8",
    "sass": "^1.63.6",
    "typescript": "^4.2.4",
    "vite": "^3.2.7",
    "vite-plugin-checker": "^0.6.1",
    "vitest": "^0.33.0",
    "vitest-preview": "^0.0.1",
    "vue-eslint-parser": "^9.3.1",
    "vue-tsc": "^1.8.3"
  }

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'node:path'
import * as git from 'git-rev-sync'
import * as fs from 'fs'
import checker from 'vite-plugin-checker'

export default defineConfig(() => {
  process.env.VITE_GIT_SHORT_HASH = git.short()
  process.env.VITE_GIT_LONG_HASH = git.long()
  process.env.VITE_GIT_BRANCH = git.branch()
  process.env.VITE_GIT_TAG = git.tag()
  const packageJson = JSON.parse(fs.readFileSync('./package.json').toString())
  process.env.VITE_PACKAGE_VERSION = packageJson.version

  return {
    server: {
      port: 3000,
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/global.scss";`,
        },
      },
    },
    plugins: [vue(), checker({ vueTsc: true })],
    test: {
      setupFiles: './src/util/test/setup.ts',
      globals: true,
      environment: 'happy-dom',
      css: true,
    },
    root: '.', //Define the root
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },
  }
})
typescript highcharts vuejs3
2个回答
1
投票

我的观察：

  1. 如果您查看 

    node_modules/highcharts
    目录，您将看到定义了类型声明文件；所以挑战在于在代码编辑器/环境中找到它们。

  2. 根据我的测试，即使 VSCode 显示此错误，TypeScript 代码也可以正确构建。

  3. 如果您尝试在 

    .vue
    （例如 
    main.ts
    ）以外的 TypeScript 文件中导入 Highcharts，则不会遇到此错误。这也表明 
    highcharts
    模块配置正确，在 React 和其他框架中导入类型声明没有问题。

  4. 我不确定为什么会发生这种情况，但我猜测这与 TypeScript 在 Vue 环境中处理类型声明文件的方式有关。这里报告了类似的问题：https://github.com/vuejs/vue-cli/issues/1198 它可能与 Volar 等 VSCode Vue 插件相关（https://stackoverflow.com/a/73710755/21034582）。

对我有用的一个简单解决方法是在 

shims-vue.d.ts
目录中创建一个 
src
文件，其中包含以下内容：

declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
}

编辑1： 据我所知，自 v11 以来，有一些模块没有相应的 

.d.ts
文件，这可能是此问题的原因之一。此处已报告：https://github.com/highcharts/highcharts/issues/19364，应该在下一个版本中解决。如果 v10.3.3 适合您而 v11+ 不适合，那么我建议您坚持使用版本 <11 until the next minor release where all modules will have a corresponding 
.d.ts
文件。

编辑2： 此问题的可能原因是 VSCode 中的 Volar 扩展。如果禁用它，则不会遇到此错误。但是，目前没有简单的解决方法可以解决此问题（除了我上面提供的方法之外）。

0
投票

https://github.com/highcharts/highcharts/issues/19205#issuecomment-1666824632 highcharts 中已经存在问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.