mapbox-gl-directions: MapboxDirections was not found

@sathya9897 Not sure if you figured it out. I have a work around to get it to work in react. Importing the dist folder instead of src will avoid the errors.

import Directions from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';

Maybe it’s not the ideal solution, if not, let me know.

For all new people have problem for import do this;

import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions'
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'

work on Quasar Framework / Vue 2

For reference, if you are using react you might want to do something like this. I’ve hacked some values for simplicty (the original code uses redux).

import React from 'react'
import mapboxgl from 'mapbox-gl'
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions'

import 'mapbox-gl/dist/mapbox-gl.css' // Updating node module will keep css up to date.
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css' // Updating node module will keep css up to date.

mapboxgl.accessToken = 'pk....'

export default class Map extends React.Component {
  componentDidMount () {
    const { lng, lat, zoom } = {
      lng: 144.9685 ,
      lat:  -37.8101,
      zoom: 13.4
    }

    const map = new mapboxgl.Map({
      container: this.mapContainer, // See https://blog.mapbox.com/mapbox-gl-js-react-764da6cc074a
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [lng, lat],
      zoom
    })

    var directions = new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      unit: 'metric',
      profile: 'mapbox/cycling'
    })

    map.addControl(directions, 'top-left')
  }

  render () {
    return (
      <div className="map-wrapper">
        <div ref={el => (this.mapContainer = el)} className="map" />
      </div>
    )
  }
}
```

Oh, and I think I needed to add this CSS.

```
.map {
  position: absolute;
  z-index: 1;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
```

@mariusa Please reference @itsalb3rt’s answer. The method of importing Mapbox GL Directions seems to work properly. Initially I encountered the same error you mentioned and resolved it with his proposed import method.

hay everyone, i try add this code to my project but form direction that created before not showing, this form show behind the map,

here is my code

`import { Component, ViewChild, ElementRef } from ‘@angular/core’; import { IonicPage, NavController, NavParams } from ‘ionic-angular’; import leaflet from ‘leaflet’; import mapboxgl from ‘mapbox-gl’; import ‘leaflet-search’; import MapboxGeocoder from ‘@mapbox/mapbox-gl-geocoder’;

import Directions from ‘@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions’;

/**

• Generated class for the MapPage page.
• See https://ionicframework.com/docs/components/#navigation for more info on
• Ionic pages and navigation. */

declare var mapboxgl; declare var MapboxDirections;

@IonicPage() @Component({ selector: ‘page-map’, templateUrl: ‘map.html’, }) export class MapPage { @ViewChild(‘map’) mapContainer : ElementRef; map : any; searchControl : any; constructor(public navCtrl: NavController, public navParams: NavParams, ) {

}

ionViewDidEnter() { this.loadmap(); }

loadmap() {

this.map = leaflet.map("map").fitWorld();
leaflet.control.scale().addTo(this.map);


var i 
var data = [
  {"loc":[-2.95913579,104.7293931], "title":"60019", "siteName":"Sei Talo - Siring Agung"},
  {"loc":[-2.96388887,104.7436908], "title":"60018", "siteName":"Jend. Sudirman Pahlawan"},
  {"loc":[41.807149,13.162994], "title":"blue"}
];



leaflet.tileLayer('https://api.mapbox.com/styles/v1/owly05/cjwrddd0x04wc1cpsy3lgeqq5/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoib3dseTA1IiwiYSI6ImNqd3JmZG51azA0dHY0YW53djQxMWU1dGQifQ.__iSaUCwxAgRfzwa9SKRRg', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18
  
}).addTo(this.map);

mapboxgl.accessToken = 'pk.eyJ1Ijoib3dseTA1IiwiYSI6ImNqd3JmZG51azA0dHY0YW53djQxMWU1dGQifQ.__iSaUCwxAgRfzwa9SKRRg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/basic-v9',
zoom: 4,
center: [77.4126, 23.2599]
});
map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.GeolocateControl());
map.addControl(new MapboxGeocoder({accessToken:mapboxgl.accessToken}));
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new MapboxDirections({accessToken: mapboxgl.accessToken}), 'top-left');

var markersLayer = new leaflet.LayerGroup();	//layer contain searched elements

this.map.addLayer(markersLayer);
var controlSearch = new leaflet.Control.Search({
  position:'topright',		
  layer: markersLayer,
  initial: false,
  zoom: 12,
  marker: false
});
this.map.addControl( controlSearch );

for(i in data) {
  var title = data[i].title,	//value searched
    loc = data[i].loc,		//position found
    marker = new leaflet.Marker(new leaflet.latLng(loc), {title: title} );//se property searched
  marker.bindPopup('Site '+ title + name);
  markersLayer.addLayer(marker);
}

this.map.addControl(leaflet.control.locate({
  locateOptions: {
          enableHighAccuracy: true

}}));

this.map.locate({
  
  setView: true,
  maxZoom: 10
})

}

componentDidMount(){

}

} `

and there is my html code `<!– Generated template for the MapPage page.

See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. –> <ion-header> <ion-navbar> <ion-title>map</ion-title> </ion-navbar> </ion-header>

<ion-content padding> </ion-content> <ion-content>

<div id="map" style="width:100%; height:100%;"></div>
<div class='pointer'></div>

<div id="post-it"></div>

</ion-content>`

can u help me ?

any updates on this issue?

README’s usage instructions doesn’t work, I get same error as in #91

Uncaught (in promise): TypeError: fs.readFileSync is not a function(…) in input.js

@itsalb3rt comment does work, thanks!

it worked for me too

Great to hear. Thanks @davidyu37 for providing a workaround!

but they should have fixed the bug or update the documentation

No one has said we aren’t fixing this. This ticket is how we learn! Looks like @lbud is thinking about it ❤️ https://github.com/mapbox/mapbox-gl-directions/issues/160