Usando Vue 3 + mecanografiado + vite.
He configurado el proyecto con Vite + Vue 3 +mecanografiado. Tiene problemas para usar Google Maps porque debe pagarse. Entonces probé el Mapbox y la sección del mapa funciona bien, pero al agregar el MapboxGeocoder aparece el error.
Obteniendo este error
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:16Cómo resolver este error. Necesitas ayuda.
bloque de código
<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>Me encontré con un problema muy similar con vanilla JS y vite.
Buscando en los problemas de vite encontré esto: https://github.com/vitejs/vite/issues/2694#issuecomment-826195660 que funcionó para mí. Tal vez alguien más informado pueda explicar exactamente lo que está sucediendo. Supongo que algunos errores deben solucionarse en mapbox-gl, vite o ambos.
De todos modos, lo hice:
npm i events npm i --save-dev @types/events @types/node¡Y ahora está funcionando! Espero que funcione para usted también.