mapbox / mapbox/mapbox-gl-geocoder
EventEmitter is not a constructor at new MapboxGeocoder (Next.JS & TypeScript)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 388
- Forks
- 181
- PR merge metrics
- No merged PRs in 30d
Description
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:
https://github.com/mapbox/mapbox-gl-geocoder/issues/441
https://stackoverflow.com/questions/69717406/typeerror-eventemitter-is-not-a-constructor-at-new-mapboxgeocoder
https://github.com/mapbox/mapbox-sdk-js/issues/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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the error with the reported mapbox-gl, @mapbox/mapbox-gl-geocoder, TypeScript, and Next.js versions. Inspect node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js at the reported line 87 and trace how EventEmitter is loaded; done means MapboxGeocoder can be constructed without the reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100