Cannot load vector sources

[MartinP-C]

Hi,

I am trying to reproduce Mapbox's example of vector tile source here. However I get the error Source layer "contour" does not exist on source "terrainLayer" as specified by style layer "terrainLayer"

The light style tiles will load. Vector information is fetched and I can see the return JSON that there is a layer with id "contour". Vector information exists for these coordinates and zoom as I can see it loaded on a non-React version of this app.

What is going wrong with this?

<Map
  style="mapbox://styles/mapbox/light-v10"
  containerStyle={{
    height: "100vh",
    width: "100vw",
  }}
  zoom={[15]}
  center={[-0.2416815, 51.5285582]}
>
  <Source
    id="terrainSource"
    type="vector"
    url="mapbox://mapbox.mapbox-terrain-v2"
  />
  <Layer
    id="terrainLayer"
    type="line"
    source="terrainSource"
    sourceLayer="contour"
    layout={{
      "line-join": "round",
      "line-cap": "round",
    }}
    paint={{
      "line-color": "#ff69b4",
      "line-width": 1,
    }}
  />
</Map>

[MartinP-C]

No idea how I've missed this, or where I found an example with the wrong props (if I even did...)

The <Source /> should have a tileJsonSource or geoJsonSource object, And the <Layer /> should have sourceId, not source.

<Map
  style="mapbox://styles/mapbox/light-v10"
  containerStyle={{
    height: "100vh",
    width: "100vw",
  }}
  zoom={[15]}
  center={[-0.2416815, 51.5285582]}
>
  <Source
    id="terrainSource"
    // url and type inside a tileJsonSource!
    tileJsonSource={{
      url: "mapbox://mapbox.mapbox-terrain-v2",
      type: "vector",
    }}
  />
  <Layer
    id="terrainLayer"
    type="line"
    // 'sourceId' not 'source'!
    sourceId="terrainSource"
    sourceLayer="contour"
    layout={{
      "line-join": "round",
      "line-cap": "round",
    }}
    paint={{
      "line-color": "#ff69b4",
      "line-width": 1,
    }}
  />
</Map>