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" ] }