No puedo mostrar el mapa correctamente en producción, mientras uso react-map-gl en create-react-app. La aplicación funciona bien en localhost pero arroja errores en la consola mientras se ejecuta en producción. Probé las 3 soluciones mencionadas en los documentos oficiales de Mapbox https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Primero probé estas soluciones una por una por separado, y luego las 3 soluciones simultáneamente, pero ninguno de estos 4 intentos funcionó.

Adjunté la captura de pantalla de los errores de la consola a continuación junto con la URL en vivo de mi sitio de producción y el código de github.

URL en vivo: https://parking-app-fyp.vercel.app
código de github: https://github.com/iAmZubair00/parking-app-fyp

captura de pantalla del error de la consola

También estoy agregando 3 piezas de código relacionadas con 3 soluciones para su conveniencia

 import mapboxgl from "mapbox-gl"; // eslint-disable-next-line import/no-webpack-loader-syntax import MapboxWorker from "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"; mapboxgl.workerClass = MapboxWorker.default;

 module.exports = { babel: { loaderOptions: { ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"], }, }, };

 "browserslist": { "production": [ ">0.2%, not dead, not ie 11, not chrome < 51, not safari < 10", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }