In my ongoing Next.JS version 13 project, I have been successfully using Mapbox-GL and mapbox-gl-geocoder. However, recently I encountered an error when accessing the map that reads:
EventEmitter is not a constructor at new MapboxGeocoder (webpack-internal:///./node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js:87:24)
https://i.sstatic.net/DxOGX.png
The specific snippet of code in question is as follows:
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: false,
flyTo: false,
mapboxgl: mapboxgl
});
map.current.addControl(geocoder);
The issue arises at the construction of MapboxGeocoder with new MapboxGeocoder
I came across similar problems faced by Vue 3 and vite users which are outlined here: TypeError: EventEmitter is not a constructor at new MapboxGeocoder
In an attempt to address this, I tried importing Events alongside MapboxGeocoder directly inside my Map Component:
import EventEmitter from 'events';
However, this approach did not yield favorable results. It should be noted that I am working with up-to-date versions that remained unchanged since the last time this functionality was functioning correctly, approximately a week or two ago:
"@mapbox/mapbox-gl-geocoder": "^5.0.1", "@types/mapbox-gl": "^2.7.10", "mapbox-gl": "^2.13.0", "@types/mapbox__mapbox-gl-geocoder": "^4.7.3",If anyone has any insights or solutions on how to tackle this issue, your input would be greatly appreciated :)