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 报错没有了

目录
相关文章
|
2月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
123 22
|
4月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
200 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
1月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
44 0
|
5月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
341 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
5月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
174 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
5月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
266 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
5月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
197 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
4月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
303 4
|
JavaScript 前端开发
基于Vue2+TypeScript的项目规划搭建
最近手头的项目都已经接近尾声,时间比较宽裕,于是想着升级一下网站。上一版的网站还是我刚接触前端时设计的,使用Zepto为主要框架,代码毫无模块化思想,因为后续的功能越加越多,现在每次维护都有自杀的冲动。
1766 0
|
22天前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
162 0