Search code examples
reactjsgithub-pagesmapbox-gl-jsreact-map-gl

Missing Mapbox GL styles in Github pages react app

I have created a GitHub pages app which hosts a React app. Within this app, I have 2 instances of Mapbox maps using react-map-gl, and some styles are missing when deployed on GitHub pages.

Locally, all styles load properly and the map looks great. However, once deployed some styles are missing, not all.

  • My custom styles don't load (although they have been made public)
  • mapbox://styles/mapbox/satellite-v9 loads fine
  • mapbox://styles/mapbox/outdoors-v12 fails to load
  • All terrain is missing

The two maps I declare are as follows

  1. Globe
<Map
  initialViewState={{
    longitude: -100,
    latitude: 40,
    zoom: 1,
  }}
  terrain={{ source: "mapbox-dem", exaggeration: 1.5 }}
  mapboxAccessToken={
    "redacted"
  }
  style={{ width: "100%", height: 480 }}
  mapStyle="mapbox://styles/mapbox/outdoors-v12"
>
  <Source
    id="mapbox-dem"
    type="raster-dem"
    url="mapbox://mapbox.mapbox-terrain-dem-v1"
    tileSize={512}
    maxzoom={14}
  />
</Map>
  1. 3d map
<Map
  initialViewState={{
    longitude: longitude,
    latitude: latitude,
    zoom: 14,
    bearing: 80,
    pitch: 80,
  }}
  maxPitch={85}
  terrain={{ source: "mapbox-dem", exaggeration: 1.5 }}
  mapboxAccessToken="redacted"
  style={{ width: "100%", height: "100vh" }}
  mapStyle={"mapbox://styles/mapbox/satellite-v9"}
>
  <Source
    id="mapbox-dem"
    type="raster-dem"
    url="mapbox://mapbox.mapbox-terrain-dem-v1"
    tileSize={512}
    maxzoom={14}
  />
  <MapMarker
    fixed
    closeButton
    markerName={name}
    latitude={latitude}
    longitude={longitude}
  />
  <Layer {...skyLayer} />
</Map>

Locally I see: enter image description here

enter image description here

VS deployed on GitHub pages: enter image description here

enter image description here

Tokens

The same tokens are used in deployment as locally. I've tried with the default public token, a custom token with only certain domains allowed, etc. All the same no matter what I try.

Anyone have an idea what I may be missing? I feel like this is a GitHub pages limitation, but at the same time some styling loads (e.g. satellite-v9, but not 3d or outdoors-v12

Solution

  • I found the issue - I am using create-react-app for this React app, and I had to configure the WebPack transpiling for mapbox as detailed in their documentation: Transpiling | MapBox Installation

    I added the following to my package.json:

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

    So finally not a GitHub Pages limitation, just an issue with the bundling which was hidden in the create-react-app scripts :)