Vue3+TypeScript引入Highcharts 11.x报错：找不到模块声明文件

问题原因 #

Highcharts 11.x版本调整了类型声明的发布逻辑，之前版本内置的类型定义不再直接包含在主包中，导致TypeScript无法自动识别模块类型。

解决步骤 #

• 安装对应版本的类型包
  手动安装@types/highcharts类型包，确保版本和你使用的Highcharts主版本匹配：

  npm install @types/highcharts@^11.0.0 --save-dev
  

  用yarn的话执行：

  yarn add @types/highcharts@^11.0.0 --dev
  

• 调整导入语句
  尝试切换为默认导入方式，部分场景下可修复类型识别问题：

  import Highcharts from 'highcharts'
  

• 配置TS路径映射
  在项目的tsconfig.json中添加路径映射，帮助TypeScript定位模块：

  {
    "compilerOptions": {
      "paths": {
        "highcharts": ["./node_modules/highcharts"],
        "highcharts/*": ["./node_modules/highcharts/*"]
      }
    }
  }
  

• 清理缓存重启服务
  Vite缓存可能导致类型识别异常，执行以下操作：

  • 删除node_modules/.vite目录
  • 重启Vite开发服务器
  • 可选：执行npm cache clean --force清除npm缓存

• 临时回退版本（备选）
  如果以上方法都无效，可以暂时回退到10.3.3版本，等待官方修复类型声明的兼容性问题：

  npm install highcharts@10.3.3 --save
  

内容的提问来源于stack exchange，提问作者Crossoni