类型错误:EventEmitter 不是新 MapboxGeocoder 的构造函数

2023-11-30

使用Vue 3 + typescript + vite。

已经用Vite + Vue 3 +typescript搭建了项目。 使用谷歌地图时遇到麻烦,因为它需要付费。 然后尝试了 Mapbox,地图部分工作正常,但在添加 MapboxGeocoder 时显示错误。

出现此错误

TypeError: EventEmitter is not a constructor
    at new MapboxGeocoder (index.js:74)
    at temp.vue:30
    at callWithErrorHandling (runtime-core.esm-bundler.js:6668)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6677)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1931)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:6869)
    at render2 (runtime-core.esm-bundler.js:4807)
    at mount (runtime-core.esm-bundler.js:3140)
    at Object.app.mount (runtime-dom.esm-bundler.js:1572)
    at main.ts:16

如何解决这个错误。需要帮忙。

代码块

<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

onMounted(() => {
  try {
    mapboxgl.accessToken =
      "TOKEN";

    const map = new mapboxgl.Map({
      container: "map", // container ID
      style: "mapbox://styles/mapbox/streets-v11", // style URL
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9, // starting zoom
    });
    map.addControl(
      new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
       
      })
    );

  } catch (error) {
    console.log("Error on mapbox creation: ", error);
  }
});
</script>


我在使用 vanilla JS 和 vite 时遇到了非常相似的问题。

深入研究 vite 的问题我发现了这个:https://github.com/vitejs/vite/issues/2694#issuecomment-826195660这对我有用。也许更有知识的人能够准确解释正在发生的事情。我猜想需要在 mapbox-gl、vite 或两者中解决一些错误。

无论如何,我做了:

npm i events
npm i --save-dev @types/events @types/node

现在它正在发挥作用!希望它也对你有用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

类型错误:EventEmitter 不是新 MapboxGeocoder 的构造函数 的相关文章

  • Typescript 中的子类化

    我在 Typescript 中有一个存储类 它实现了Storage界面 说MyStorage 但它的方法太多了 所以我想用它来代替MyStorage getCandy MyStorage Candies getCandies 该结构可能看起
  • 如何重载泛型方法以使其在 Typescript 中不那么泛型?

    我在抽象类中有一个通用静态方法 abstract class Base static find
  • 与 webpack 捆绑后,无法读取枚举的未定义属性

    我有一个 React 库 我想使用 Webpack 来构建它 该库是使用 Typescript 编写的 似乎一切正常 但由于某种原因枚举却不起作用 当我将库安装到我的 React 应用程序中时 我发现Cannot read properti
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • vue如何检测页面是否刷新?

    我尝试这样 created window addEventListener beforeunload function event event returnValue Write something this router push 像这样
  • 如何为 Angular 4、5 中的动态元素分配哈希 ID ref id

    如果我的问题很愚蠢 我很抱歉 我有 30 多个静态 ng container 和一些独特的静态 hashtagID 但我想在 ngFor 的帮助下动态创建它们 public lists food book cook 期望输出
  • Angular 没有 NameService 提供者

    我在将类加载到 Angular 组件中时遇到问题 我已经尝试解决这个问题很长时间了 我什至尝试过将所有内容合并到一个文件中 我所拥有的是 应用程序 ts
  • 更改 ag-grid 上的页面和缓存块大小会导致项目无限加载

    我希望使用 ag grid 的 服务器端 模式重新获取每个页面的数据 为了做到这一点 我将 maxBlocksInCache 1 和 cacheBlockSize 设置为等于每页的项目数 到这里为止一切正常 现在 当我更改每页的项目数时 网
  • If 语句中的 Typescript 类型推断不能用作变量

    考虑以下示例 class A class B extends A foo return 6 const variable A new B const isValid variable instanceof B if isValid vari
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • 如何使用 TypeScript API 将 tsconfig.json 编译为配置对象?

    我正在寻找一个公共官方 TypeScript API 最好是 4 x 版本 用于解析tsconfig json jsconfig json文件到完整的 TypeScript 配置对象 我所说的 完整 是指 它的所有属性都填充有值 要么显式地
  • Typescript 和 Mongoose - “this”在实例方法中不可用

    我目前正在将我的 API 从 JS 转换为 TS 然而 我在猫鼬和打字稿方面遇到了一些困难 具体来说 this在我的实例方法中不可用 My code AccountSchema methods comparePassword async f
  • Angular2:setTimeout仅调用一次

    我正在 Angular2 中实现需要使用的功能setTimeout My code public ngAfterViewInit void this authenticate loop private authenticate loop s
  • Typescript 找不到模块

    我在 Typescript 的一个文件 upload ts 中有一个导出的模块 我无法在没有错误的情况下导入到另一个文件 application ts 中 另外 我无法导入 ExpressJS 这是Upload ts
  • 角度2中未定义的值

    我正在创建一个应用程序 在其中使用 Ag Grid api 在网页上列出我的数据库内容 Ag grid 有一个预定义的 api 来获取所选行的内容 这是我的代码 export class customer entryComponent pu
  • Angular 8 Native Typescript 无崩溃,访问器简写

    角8 我曾经在打字稿方面用作简短的黑客 object accessor accessor accessor to get object accessor accessor accessor 如果其中一个子级为空 则不会冒抛出错误的风险 根据
  • 用变量字符串设置槽的简单方法?

    有许多slot例子 但没有克莱尔和简单 因为我需要 我需要类似的东西 var x Hello slot x 这就是我需要的 在一个具体的例子中 https jsfiddle net 2qdh3x3v https jsfiddle net 2
  • D3、TS 和 Angular 2

    我正在尝试将 D3 v4 与 Angular 2 Typescript 一起使用 我目前正在研究 D3 v4 我能够遵循 stackoverflow 中类似问题的一些答案 但没有成功 我已经导入了大部分 D3 库及其类型 我使用的是 TS
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第

随机推荐