Reverse geocode map on click 4.17

[laitha0]

Hello, I am using the latest API version and it seems like there are some changes so the previous questions and posts are not helping me solve this problem. 

I am trying to lookup an address by clicking on the map but I keep getting:

locator.locationToAddress is not a function

Below is my code, I tried to console.log(locator) and I do not see any methods, I'm not sure if I am creating the Locator object properly

this.view.on("click", event =>{
    this.view.graphics.removeAll();
    var point = {
        type: "point", // autocasts as new Point()
        longitude: event.mapPoint.longitude,
        latitude: event.mapPoint.latitude,
      };
    var markerSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [226, 119, 40]
    };
    var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
    });
    
    this.view.graphics.add(pointGraphic);

    
    console.log("errr");
    var locator = new Locator({
        url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    });
    console.log(locator);
    locator.locationToAddress({location: event.mapPoint}).then(function(response){
        console.log(response);
     });

    this.clickedOnMap(event);
    
});

 In the same file above this I am using esri-loader with Reactjs  and I load the modules using 

loadModules(["esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/Graphic", "esri/geometry/Point", "esri/tasks/Locator", "esri/geometry/SpatialReference", "esri/geometry/support/webMercatorUtils"], { css: true })
            .then(([ArcGISMap, MapView, Search, Graphic, Locator, SpatialReference, webMercatorUtils, Point]) => {
....
....
SNIP

I hope someone would be able to help me with this. 
Thanks 

[Ethan · Accepted solution]

Hi Laitha,

When using loadModules, the order of the imports does need to match I think. Try moving "Point" between "Graphic" and "Locator" after the .then like this:

loadModules(["esri/Map", "esri/views/MapView",
             "esri/widgets/Search", "esri/Graphic",
             "esri/geometry/Point", "esri/tasks/Locator",
             "esri/geometry/SpatialReference",
             "esri/geometry/support/webMercatorUtils"],
             { css: true }).then(([ArcGISMap, MapView, Search,
                                   Graphic, Point, Locator,
                                   SpatialReference, webMercatorUtils]) => {}

Hope that helps! You may also find these resources helpful:

https://developers.arcgis.com/labs/browse/?product=javascript&topic=geocoding

[laitha0]

very interesting the order did matter !
I just moved Locator before Point and created the Locator before adding the graphic to the map and now it worked !!

[laitha0]

Thanks for the help @Ethan