TypeError：EventEmitter 不是新 MapboxGeocoder 的构造函数

Posted 2023-02-22

【中文标题】TypeError：EventEmitter 不是新 MapboxGeocoder 的构造函数

【英文标题】：TypeError: EventEmitter is not a constructor at new MapboxGeocoder

【发布时间】：2021-12-11 11:46:18

【问题描述】：

使用 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>

【问题讨论】：

服务器端渲染和 MapboxGeocoder 库：敌人。

【参考方案1】：

我在 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

它现在可以工作了！希望它也对你有用。