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

简介: Vega-Embed 在 Vue Typescript 项目中引入报错 Cannot find module 'vega-typings',一开始以为Vega相关包版本在TypeScript中不支持,更新版本,调整引入方式的写法都不行,Baidu,Google, Github issues 中找了一波问题后也没发现有人遇到 Vega 的引入问题。

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


相关文章
|
12天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
37 3
|
7天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
11 0
|
7天前
|
JavaScript
Vue项目使用bpmn预览流程图
Vue项目使用bpmn预览流程图
9 0
|
7天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
13 0
|
7天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
8 1
|
11天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
96 0
重读vue电商网站45之项目优化上线
|
1天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能:VS Code或WebStorm作为代码编辑器,Node.js与npm管理依赖,Git操作仓库。基础包括JavaScript、ES6+语法、前端知识(HTML/CSS/浏览器原理)及Vue基础知识。进阶则需源码阅读理解能力,调试技巧,熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
17 8
|
1天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript(ES6+)和前端工程化。从源码入口文件开始,研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理,实践编写Vue插件,参与开源项目,阅读相关文章教程,持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
7 1