CODEWITHSUNDEEP
typescriptvue.jsvuejs3mapbox-gl-jsvite
Vishnu Suresh
Vishnu Suresh

Reputation: 79

TypeError: EventEmitter is not a constructor at new MapboxGeocoder

Using Vue 3 + typescript + vite.

Have set up the project with Vite + Vue 3 +typescript. Having trouble using google maps because it needs to be paid. So then tried the Mapbox and the map section is working fine, but when adding the MapboxGeocoder the error is showing.

Getting this 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:16

How to solve this error. Need help.

code block

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

Upvotes: 5

Views: 7343

Answers (1)

gtnbssn
gtnbssn

Reputation: 199

I ran into a very similar problem with vanilla JS and vite.

Digging through vite's issues i found this: https://github.com/vitejs/vite/issues/2694#issuecomment-826195660 which worked for me. Maybe someone more knowledgeable will be able to explain exactly what is happening. I'd guess some bugs need to be ironed out in mapbox-gl, vite, or both.

Anyway, i did:

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

And it's now working! Hopefully it will work for you too.

Upvotes: 12

Related Questions