EventEmitter is not a constructor at new MapboxGeocoder (Next.JS & TypeScript)

[fabiansvensson]

I have been using MapboxGeocoder and it has worked fine previously. However, I am now getting this error:
EventEmitter is not a constructor at new MapboxGeocoder (webpack-internal:///./node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js:87:24)

I am using these versions of mapbox-gl and mapbox-gl-geocoder:

• "@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"

These should be the up-to-date versions as of today (30/03/2023).

My code (simplified slightly):

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 error occurs directly at the MapboxGeocoder constructor. It seems from the error message that the error might be TypeScript related. I saw that others have had the same issue, but all of them use Vite and Vue 3:
#441
https://stackoverflow.com/questions/69717406/typeerror-eventemitter-is-not-a-constructor-at-new-mapboxgeocoder
mapbox/mapbox-sdk-js#429

I have tried importing Events directly in my Map Component as such:
import EventEmitter from 'events';

I have also tried importing different versions, re-installing mapbox and geocoder, etc., but the issue persists.

Any ideas why this happens and how to solve it?

[Bernard-Murphy]

I am having the same issue. Has anyone found a solution? The error I am getting is "Cannot set properties of undefined (setting '_eventEmitter')" Here is my code:

`import Map from "react-map-gl";
import Geocoder from '@mapbox/mapbox-gl-geocoder';
import React, { useRef } from 'react';

const mapboxToken = process.env.REACT_APP_MAPBOX_KEY;

export default function MapboxMap({ coordinates, mapMarkers, onGeoCodeResult, showSearchBox, style }){
const mapRef = useRef(null);
const geocoderRef = useRef(null);

return (
        <Map 
            ref={mapRef}
            mapboxAccessToken={mapboxToken}
            style={{
                height: '100%',
                width: '100%',
                ...style
            }}
            initialViewState={{
                zoom: 9,
                longitude: coordinates[0],
                latitude: coordinates[1]                
            }}
            mapStyle="mapbox://styles/mapbox/streets-v11"
        >
            {showSearchBox ?
            <Geocoder
                mapRef={mapRef}
                containerRef={geocoderRef}
                onResult={onGeoCodeResult}
                mapboxApiAccessToken={process.env.MAPBOX_KEY}
            /> : <></>}
            {mapMarkers}
        </Map> : 
        <div
            style={{ 
                backgroundColor: '#e9eafc',
                ...style
            }}
            className="h-100 w-100"
        />}
    </>
)

}`

[starsep]

I also had this issue while using migrating from Create React App to Vite.

Resolved by npm install events based on #366 (comment)