mapbox-gl not working with Vite

I am getting ws reference error while using lazy loaded mapbox with Vite. Same was working fine with Webpack earlier. I am not finding any root cause of this issue. I tried downgrading mapbox-gl version from "^2.10.0" to "^1.13.0" but still the problem remains same. Also, issue is not replicable in localhost. It is only replicable in DEV and higher environments.

Package.json file of my library project

"dependencies": { "@mapbox/mapbox-gl-geocoder": "^5.0.1", "@mapbox/mapbox-sdk": "^0.14.0", "clsx": "^1.2.1", "leaflet": "^1.9.2", "mapbox-gl": "^2.10.0", "react-leaflet": "^4.0.2", "react-masonry-css": "^1.0.16", "react-visibility-sensor": "^5.1.1", "swiper": "^8.3.2" },

MapBox.tsx component is using mapbox like

import L, { LatLngExpression } from "leaflet"; import { MapContainer, Marker, TileLayer, useMap } from "react-leaflet"; import { useCallback, useEffect, useState } from "react"; import mbxGeocoding, { GeocodeFeature, } from "@mapbox/mapbox-sdk/services/geocoding"; import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css"; import "leaflet/dist/leaflet.css";

import styles from "../Styles/MapBox.module.scss"; import { Location } from "../MapSvgs/Location"; import { ICities, IMarker, LatLng } from "../types"; import { MapboxPopUpContainer } from "./MapPopupContainer"; Screenshot 2023-05-14 at 5 30 11 PM Screenshot 2023-05-14 at 5 30 11 PM

VM92 react_devtools_backend_compact.js:2367 ReferenceError: ws is not defined at 5401 (MapBox-71870675.mjs:6738:1) at Function.s (bootstrap:22:1) overrideMethod @ VM92 react_devtools_backend_compact.js:2367 um @ react-dom.production.min.js:190 a.componentDidCatch.t.callback @ react-dom.production.min.js:191 l5 @ react-dom.production.min.js:145 oa @ react-dom.production.min.js:262 e @ react-dom.production.min.js:261 (anonymous) @ react-dom.production.min.js:261 o8 @ react-dom.production.min.js:284 oj @ react-dom.production.min.js:270 x @ scheduler.production.min.js:14 T @ scheduler.production.min.js:15 VM92 react_devtools_backend_compact.js:2367 ReferenceError: ws is not defined at 5401 (MapBox-71870675.mjs:6738:1) at Function.s (bootstrap:22:1) overrideMethod @ VM92 react_devtools_backend_compact.js:2367 J @ index.js:235 fn @ index.js:191 value @ index.js:55 a.componentDidCatch.t.callback @ react-dom.production.min.js:191 l5 @ react-dom.production.min.js:145 oa @ react-dom.production.min.js:262 e @ react-dom.production.min.js:261 (anonymous) @ react-dom.production.min.js:261 o8 @ react-dom.production.min.js:284 oj @ react-dom.production.min.js:270 x @ scheduler.production.min.js:14 T @ scheduler.production.min.js:15 VM92 react_devtools_backend_compact.js:2367 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

mapbox / mapbox-gl-geocoder

mapbox-gl not working with Vite #500