Vue3+TS+Vite项目引入MapboxGeocoder报EventEmitter不是构造函数如何解决

@mapbox/mapbox-gl-geocoder 依赖Node.js内置events模块提供的EventEmitter构造函数，但Vite默认不会对Node.js核心模块做浏览器环境的polyfill，浏览器原生没有该构造函数，因此初始化时抛出错误。

方案一：配置Vite polyfill events模块（推荐） #

1. 安装events依赖及类型声明

npm install events
npm install @types/events -D

2. 修改vite.config.ts配置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 新增该配置，将events请求映射到已安装的events包
      events: 'events'
    }
  }
})

修改配置后重启Vite服务即可正常运行。

方案二：手动挂载EventEmitter到全局 #

如果不想修改Vite配置，可直接调整组件代码，在导入MapboxGeocoder前手动挂载全局EventEmitter：

<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import EventEmitter from 'events'
// 手动挂载到window全局对象
window.EventEmitter = EventEmitter as any
// 再导入MapboxGeocoder
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",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
    });
    map.addControl(
      new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl // 新增该参数可避免其他潜在兼容性问题
      })
    );
  } catch (error) {
    console.log("Error on mapbox creation: ", error);
  }
});
</script>

内容的提问来源于stack exchange，提问作者Vishnu Suresh