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

目录
相关文章
|
11天前
|
设计模式 监控 JavaScript
TypeScript 在大型项目内网管理监控软件中的结构优化
本文探讨了 TypeScript 在大型项目内网管理监控软件中的结构优化,包括模块划分与组织、接口与抽象类的使用以及依赖注入与控制反转的设计模式,通过具体代码示例展示了这些技术的应用,提高了代码的可读性、可维护性和灵活性。
25 3
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
8天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
10天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
16 7
|
6天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
10天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
20 6
|
6天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
15天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
53 3
|
JavaScript 前端开发
基于Vue2+TypeScript的项目规划搭建
最近手头的项目都已经接近尾声,时间比较宽裕,于是想着升级一下网站。上一版的网站还是我刚接触前端时设计的,使用Zepto为主要框架,代码毫无模块化思想,因为后续的功能越加越多,现在每次维护都有自杀的冲动。
1628 0
|
7天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9