TypeError: Cannot read property 'geometry' of undefined

Występuje taki błąd jak w tytule czy ktoś może mi pomoc gdzie popełniam blad? Skleiłem kod z kilku zródeł i cos nie chce mi sie skompilować.Kod wklejam bo moze troche byc za długi. Z góry dziekuje za pomoc

https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=JYWwDg9gTgLgBAJQKYEMDGMA0cDecDCE4EAdkifAL5wBmURcA5FKhowNwBQnokscIFGABGEAB4BzADa16IJoJHiAtNI7dFoyVIB06NEgDOhgCoQA1uTgBeOACIw5nUgCeAKQCMASQBWEYGggAJzAAFoAGm4ADACyJuYArAByAMpehl4gAKLAAPLAbj4oAF4AFgCOoQDiAIoALMIATBAA7kmNCQkxjQBqYmjhAELmKAASYAloVa1eJFE6CRAA0gCaCFCGAPrAAIIgUGKNozTCYIPKoy12XJxoUijGcDtgYHBIYjDkACaGBESQZAouG4cDghhgKE-NmBoNBUhIEgAXHAPAAOHQANg8nSxHkwnFhcHuMGRCQAzDoomSyR4Oqj8YTihAiMiPFECXBKDdQWh_qRyDAACLAL4xCAAVwoAAoAJQw2G8kjggRCaFkFoqpTaHQxIRSnAcwmKiHAMhQZEwUrAQw6RSECgoU1IKAMwlgmAuKRIZGMTTiREAegD4M9RgDfrEwZgLCQMEMygAbh4PIxXUaBc7kQBtS3WnTgyFIHTwiTYXM2gufYuQgC6adhTJZcHL-YhVcbIENnJlXEJCZQUDgoklP2hWa7oKzaJ0yZpqIxQWxQSijQxZOw5MpjW327rE7gU_Ry4xdQA7Kj5x4gqegquNxTqTS6TWuzXe7DFPnY7qxIMJSQfilYcAMMHsQVhIM4FNYAYGAFApGAYokGbUpkMUOA0BQEh-1-GAICgihnXQeAWhg0oiULKAu37QdMOwh5oU_CRY3wLCcPtE0zVlbkIIDOAsP4qBhBgqABxcd0BxI4ApBkeCWhQFxfmEZDLWQwwUBAJAu0g0gpHE1S3gAuBoDgL4jFgkhIWAUg4FImSMNKLDmOogcJP4Wws03KknwSekUXRLEcWTN9tL48soN-FpUJYFDkN5MzaBMgyyA-d0kFeOyZAkCBQowlhC342hJQwaySGbfDBEsQqvmAFgStIX4WHKcVzK7GhitgmzmJgBAJU-KVvjlA03TgSDKuQlBTNqpB6qVOAmpa5VxUMU0JAwlw7lWuAwHoGhpK0kbIIEgdhOjMS3Kk-y5IUpSVNQsENIOt0dJIPTYsMr5jMHMzwVNKybMyhynKevtXILdyD2nQKElxe9KWpWlfJCkaaLgcUoBkWxGFKGAYDAQxAwDIRgFtIQtB0XkQADGq6s6pUAwTBJwzJ8QAzQDaEIRANGDgABqC6syiGs-aYTAef58GYCnYX-Y4cWPsFmX91BVN5e-aWRcYAB-cF0sMaxoxagAyZiiFjKBgCMaxTZ8QxSCN_QjC2PDLBIax5YjaQ9DQAxjDMV2eMJMaUCqgTwlGBB5qQZrzLgHG8YJoMzITJApAgMBnVtCBimk-4dGgCQA3IZQAFUUmpiA0EMAMAHUkGEAMdgABS8ANwhiAAZUZcbAZAY_BfdUaatUkA1duu57vvFpgbj9ya_OM5IKVGCqLITFTNGMbLKAWrAkb590iAUE-2x2pIWa4FleUUdc22bNsNwUlyJIdDAAdDCQKV55YQwAQ_veRpwFRl8SEk1bB3xIDoeg4pPiGEVu-G-g5oFQlsCAiEOhTaaWjC4CmzIoA1UsrAhBbpUY2ztmVWww1AGgg9BnH0AAxVAMB0ZIFTMrWEO107OlgkYZEOBKD1hGpg82Lg-HsMJLQ70TAO5OhSNGVabDqFGjwQQwsBN5p9RBoAyg7CuTsMgsAGg71kETSkPlL44l3jWjjMZMqBlFDYB_rGKC8BlpbQ_kKUB7DDGXyYrGFIEooAGGXiYxgMohriM1Bg_xgTgnME0WEr8niIRSjIaQABI1qCpw_rgUafEICqSgKRD-2BxqFXVFHfuMBImfmPl8DuClnT6kiaCEUPpQmCMAZIn0nNWGdJGnbdGBgxFKLdN0pgaSSCKNGbCNBKARkzIkS4OhTBGGQhYdMxZoJOEZ1gJbdR_D-lKOEdghZWzYTjMYDIsgciLYIk2ecjCKi_qwORJMlpbodHnK-TMgRHz7guD6mcmZjBenKD8KaRg7T_xfAeaM0FTplCYTAFCpg0CAKMA-X8xZb9TQkmviCsFvI05QFRYwAAxGSC8p5lJwqUQisgyhSJfEtKihIRyRoMqQModO6AYIuFRfMU8CQsWRMoBkz5-i-LdXeitMywhXJYU-nU96ppwQ71moYdhqM1WG01dCL4ldxSaQoNEmAWQvQmpgIMFwXgvjL11RqumhgwnENBoOXW-MDWgOLEgCQcChatj1oHEhrl5FgFmOq8U-qPLI0ATQEyUodXQiiOwKCcAAA8aV8a-oRJaNNwBea8wiaMyC4bI16uda_ZapRl4ZuEFAAAfBmhCjb5aergcAGspMyDihTlAHQjro10zlLLDNAZW3qFGUOzVg6SBmlGCYTu0JGD1qbRm3-Ak7gPH1nYL46N_okDsI2kwFtXj7tEnTH0ItdSWh0DQNO0ApRzJ0Bew9o0PkYiiKOj5PMQCmjgIAXg3AAte5m4Mb8SBtpFuWpUlbSqGDdbCH5hI9H72jl-ACs8UPgVBJ-Ugy807Hw3mfC-V8qFBz4mUgS0FYLwSmrTeDlTp4oUhPuSCktfhKo-px-ABl1KaSJJXQ9-5uq9RgZ_SWYE2N8R2F8T6kstqQDxeVd6ih9y1Lkw0lwTTyNujaUwJTFA6U0OWVIxgaBap3D6ewwZQSpG6ZGpcyZxnZmgOBdQy5azmEsEIDJGadMXOEhoEwlh6iswOaUZ5kLLBAtuh2dw_ZfDsVbJOVAURBLFmXKbv4IzHLAG8mgKo15F0PmgmQ0oygL5RnlZQ0c3FFB3NunM5Zr0yhRI1WWqitkeXmtBNa8S6AZLKXUtpbo_c4rENlqtL8a0tlop3TihABKdAGDJXePAT1tlc5wGyl2CbXY8NL3MwhNA5hiMdVKpfJAJbQ20RUYYXIwgfDQiLCWBpMBEN0Rwq2UMFN0Z20HFjKdt2nmFd-LYR7Ph_M6EsIpKUBX8EPaezKUmYApQkbppfWHN20PebKgjn4kOsyw7jShiVoJUbfGhBFkzKzGBeZYb5r0s0XPBfWT_bMNOLmmYYdF6zoz4t7N4bgZL1DUvpa50sun2W8WxZ5M8whwuCdauq7oqrnzEM-KlH4mAWmmmMG-GEnHbodcBKGZ_A3GKUceMFKAgaAFyecjeFIHJXONP1MaVAZp06vg-kN3ly5Fm-v86UbZ4ZGWuk84mUgCAEC5emTcxHjzUf6d86Z_50q8fQRs-88L8LpXud04ZzFvLI1Bc8IOaLlLMesFpca5llPMvcsF-UYVl5Sv7st85AXyrorqt5fq_iyXsJetWba8fYAnXWRRFL0wIPY-Bukp9OSmgZIoiYtV9Q_bmSROxjE_1ZXErt_d45CwACTTjcsDx5ffcGaaoJkbewu_wAExRxoNYHAqcbCNpQnmO0pBOJnQXspBqBt1jAkhHp3Z_8HQnRSVRpH8Rpx178EDYQZQOQdEdF3g-B4AzIaAUBxQpB4BngwB2AgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.9.0&externalPlugins=

Nic nie ma w tym linku, pusty edytor. Co robisz?

wkleje jeszcze tutaj:

import React, { Component } from 'react';

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = "pk.eyJ1Ijoicm9iZXJ0MTk5NSIsImEiOiJjazhqZGQ4b2owN255M2VxcXBkaHp5cGowIn0.5oKYRrs_iAmrx2HfbpB-Hw";

class App extends Component {

  state = {
    lng: 18.6155611,
    lat: 53.0331258,
    zoom: 10
  };

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    });
    var bounds = [
      [18.11318691590263, 53.022222],
      [18.90647886197926, 53.3331258]
    ];
    map.setMaxBounds(bounds);

    // initialize the map canvas to interact with later
    var canvas = map.getCanvasContainer();

    // an arbitrary start will always be the same
    // only the end or destination will change
    var start = [53.0331258, 18.6155611];
    // this is where the code for the next step will go
    // create a function to make a directions request
    function getRoute(end)  {
      // make a directions request using cycling profile
      // an arbitrary start will always be the same
      // only the end or destination will change
      var start = [18.6155611, 53.0331258];
      var url = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start[0] + ',' + start[1] + ';' + end[0] +
        ',' + end[1] + '?steps=true&geometries=geojson&access_token=' + mapboxgl.accessToken;

      // make an XHR request https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
      var req = new XMLHttpRequest();
      req.open('GET', url, true);
      req.onload = function () {
        var json = JSON.parse(req.response);
        var data = json.routes[0];
        var route = data.geometry.coordinates;
        var geojson = {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: route
          }
        };
        // if the route already exists on the map, reset it using setData
        if (map.getSource('route')) {
          map.getSource('route').setData(geojson);
        } else { // otherwise, make a new request
          map.addLayer({
            id: 'route',
            type: 'line',
            source: {
              type: 'geojson',
              data: {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'LineString',
                  coordinates: geojson
                }
              }
            },
            layout: {
              'line-join': 'round',
              'line-cap': 'round'
            },
            paint: {
              'line-color': '#3887be',
              'line-width': 5,
              'line-opacity': 0.75
            }
          });
        }
        // get the sidebar and add the instructions
        var instructions = document.getElementById('instructions');
        var steps = data.legs[0].steps;

        var tripInstructions = [];
        for (var i = 0; i < steps.length; i++) {
          // tripInstructions.push('<br><li>' + steps[i].maneuver.instruction) + '</li>';
          instructions.innerHTML = '<br><span class="duration">Trip duration: ' + Math.floor(data.duration /
            60) +
            ' min 🚴 </span>' + tripInstructions;
        }
      };
      req.send();
    }

    map.on('load', function () {
      // make an initial directions request that
      // starts and ends at the same location
      getRoute(start);

      // Add starting point to the map
      map.addLayer({
        id: 'point',
        type: 'circle',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [{
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'Point',
                coordinates: start
              }
            }]
          }
        },
        paint: {
          'circle-radius': 10,
          'circle-color': '#3887be'
        }
      });
      // this is where the code from the next step will go
    });
    map.on('click', function (e) {
      var coordsObj = e.lngLat;
      canvas.style.cursor = '';
      var coords = Object.keys(coordsObj).map(function (key) {
        return coordsObj[key];
      });
      var end = {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Point',
            coordinates: coords
          }
        }]
      };
      if (map.getLayer('end')) {
        map.getSource('end').setData(end);
      } else {
        map.addLayer({
          id: 'end',
          type: 'circle',
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [{
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'Point',
                  coordinates: coords
                }
              }]
            }
          },
          paint: {
            'circle-radius': 10,
            'circle-color': '#f30'
          }
        });
      }
      getRoute(coords);
    });
  }

  render() {
    return (
      <div>
        <div ref={el => this.mapContainer = el} className='mapContainer' />
      </div>
    )
  }
}
export default App;

        var json = JSON.parse(req.response);
        var data = json.routes[0];
        var route = data.geometry.coordinates;

jeśli masz ten błąd "cannot read property geometry of undefined" tutaj (jak się domyślam) var route = data.geometry.coordinates; znaczy to, że data jest undefined, więc json.routes[0] jest też undefined. Na tym etapie mógłbyś zrobić tak:

console.log(json.routes)

albo nawet tak console.log(req.response) i zobaczy, czy dostajesz prawidłowe dane (otwierając konsole w dev toolsach / narzędziach developerskich). Po nitce do kłębka.

możesz zrobić również tak:

req.onload = function () {
        debugger; // <------ dodajesz tę linię
        var json = JSON.parse(req.response);

dzięki dodaniu debugger; otworzy ci się debugger i będziesz mógł krok po kroku przelecieć przez kod i zobaczyć, co jest źle. BTW teraz możesz korzystać z fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
nie musisz tworzyć obiektu XMLHttpRequest.

Adekwatnie w innych miejscach (console.log albo debugger)

  var url = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start[0] + ',' + start[1] + ';' + end[0] +
        ',' + end[1] + '?steps=true&geometries=geojson&access_token=' + mapboxgl.accessToken;

Jeśli korzystasz z zewnętrznego API, to być może złego URLa konstruujesz. Możesz sprawdzić, jakiego masz URLa dodając console.log(url) po tej linii, czy nie zawiera jakichś ewidentnych głupot. Możesz też sprawdzić, co ci przeglądarka (w dev toolsach) pobiera pod tym url, może to złe zapytanie itp. Może też podajesz nieprawidłowego tokena. itp. Warto sprawdzić i poczytać dokumentację tego całego mapboxa.

Ale możliwe, że problem leży jeszcze gdzie indziej. Anyway, najważniejsze to złapać pewne metody debugowania i rozwiązywania błędów, zamiast latać po omacku.