Vega-Embed 在 Vue Typescript 项目中引入报错

简介: Vega-Embed 在 Vue Typescript 项目中引入报错

Vega-Embed 在 Vue Typescript 项目中引入报错 Cannot find module 'vega-typings'

报错现场

template

<template>
  <div>
    <div id="vis"></div>
  </div>
</template>

script

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import embed from 'vega-embed'
@Component({})
export default class Vega extends Vue {
  private mounted() {
    console.info(embed)
  }
}
</script>

终端报错内容

ERROR in /home/xxx/node_modules/vega-tooltip/build/src/Handler.d.ts
1:32 Cannot find module 'vega-typings'.
  > 1 | import { TooltipHandler } from 'vega-typings';
      |                                ^
    2 | import { Options } from './defaults';
    3 | /**
    4 |  * The tooltip handler class.

package.json

...
  "devDependencies": {
    "typescript": "^3.4.3",
    "vega": "^5.13.0",
    "vega-embed": "^6.9.0",
    "vega-lite": "^4.13.1",
    ...
  },
...

分析解决

一开始以为Vega相关包版本在TypeScript中不支持,更新版本,调整引入方式的写法都不行,Baidu,Google, Github issues 中找了一波问题后也没发现有人遇到 Vega 的引入问题。

再次基于报错分析,发现是一个 module 没有安装导致,这个模块应该是 vega,vega-lite,vega-embed 安装的时候自动的安装的依赖, 在 npm package (www.npmjs.com/) 中搜索一下 vega-typings, 有对应的包,并且几天前还更新了,本地单独安装一下试试?

npm install vega-typings -D

本地再次 npm run serve 报错没有了

相关文章
|
3天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
8 1
|
4天前
|
监控 JavaScript 前端开发
Vue 项目性能优化指南:提升应用速度与效率
Vue 项目性能优化指南:提升应用速度与效率
|
5天前
|
JavaScript Go
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件
|
6天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
10 3
|
6天前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
24 1
|
6天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
15 1
|
6天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
12 0
|
JavaScript 前端开发
基于Vue2+TypeScript的项目规划搭建
最近手头的项目都已经接近尾声,时间比较宽裕,于是想着升级一下网站。上一版的网站还是我刚接触前端时设计的,使用Zepto为主要框架,代码毫无模块化思想,因为后续的功能越加越多,现在每次维护都有自杀的冲动。
1592 0
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
15 0