I am not able to display map properly in production, while using react-map-gl in create-react-app. App is working fine on localhost but it throws errors in the console while running in production. I have tried all the 3 solutions mentioned in official mapbox docs https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling
I first tried these solutions one by one separately, and then all 3 solutions simultaneously, but none of these 4 attempts worked.
I have attached the screenshot of console errors below along with live URL of my production site and github code.
Live URL: https://parking-app-fyp.vercel.app
github code: https://github.com/iAmZubair00/parking-app-fyp
I am also adding 3 pieces of code related to 3 solutions for your convenience
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"
]
}