TypeError: EventEmitter不是new MapboxGeocoder的构造函数 &

Question

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

Answer 1

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

挖掘通过vite的问题，我发现这个:https://github.com/vitejs/vite/issues/2694#issuecomment-826195660这为我工作。也许更有见识的人能解释清楚到底发生了什么。我猜mapbox-gl、vite或两者中的一些bug需要解决。

无论如何，我做了:

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

它现在工作了!希望它对你也有用。