How to resolve "#add() The item being added is not a Layer or a Promise that resolves to a Layer" error using ArcGIS Javascript API?

[Woodpeckerus]

I have a code below that throws an error:

 [esri.WebMap] #add() The item being added is not a Layer or a Promise that resolves to a Layer.

Both `console.log()` statements execute ok, and the properties in returned object look like expected. The layer actually loads, but I get the error as I am not able to actually add it to the map.

I am actually implementing a custom Experience Builder widget with React and JimuMapView.

  const handleAdd = async (item) => {
    const layerUrl = item.url;
    const jimuMapView = state.jimuMapView;
  
    if (jimuMapView && jimuMapView.view) {
      const mapView = jimuMapView.view;
      const tileLayer = new FeatureLayer({ 
        url: layerUrl
      });
      
        console.log(tileLayer)

      try {
        await tileLayer.load();
        console.log(tileLayer); 
        mapView.map.add(tileLayer);
      } catch (error) {
        console.error("Error loading FeatureLayer", error);
      }
    }
  };

Is there anything obvious that I'm doing wrong? Can I add layer just as a reference/view layer instead?

[Sage_Wall]

Hi @Woodpeckerus ,

It's hard to say for certain without a complete sample to debug, but your variable names reference a `tileLayer` and you seem to me instantiating a new FeatureLayer.  Is it possible you are using the incorrect layer type? Check the REST endpoint for the service and insure you are using the correct type of layer.  My guess is maybe you should be creating and adding a TileLayer but that's solely based on the variable name `tileLayer`.

[Woodpeckerus]

Hi @Sage_Wall 

Thanks for replying. The layer(s) I want to load once the widget is completed will be Tile Layers, but for the development purposes I tried with several different layer tipes in case there was something wrong with my tiles. I tried FeatureLayer, Tile Layer, PortalItem and every time it results in the same error. 
The one thing that could be relvant as well: When I console.log() the tileLayer object, it seems to have the right ID, but PortalItem property is undefined. 

I can share the whole widget code if that's better? It's around 150 lines

[JeffreyThompson2]

Personally, I've never had much luck getting async/await to work properly and you shouldn't need to call .load() and wait for it to load before .add().

Try removing async from your function declaration and all of line 14.

await tileLayer.load();

Also, console.log(item) at the start of your function and make sure that the item object and url are as you expect.

Also, keep in mind with Promises and other complex objects that sometimes the data shown in the console does not always reflect the state of the data when the line is executed. The console may be showing the object at a slightly later point in time after the promise has resolved.

[Woodpeckerus]

Thanks @JeffreyThompson2, will give it a go.
Have you worked within Experience Builder framework as well? I'm just wondering if there's something specific to building custom Experience Builder widgets and the way I'm supposed to do certain things when adding data to the referenced webmap.  

[JeffreyThompson2]

In a sense, no. Once you get through all the Experience Builder and React layers and start working with the Javascript, it shouldn't be any different than using the Javascript API.

But also, yes. There are some very important things to keep in mind. By the nature of React, you can expect that your widget will run many times. Probably at least one of the initial loads will be before the mapView object loads. And other widget runs may occur at times you do not expect, so you will need to be careful and anticipate this behavior.

Here is the official example for adding a layer in a custom widget: https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/add-layers

Here is the custom widgets group: https://community.esri.com/t5/experience-builder-custom-widgets/gh-p/eb-custom-widgets

[Woodpeckerus · Accepted solution]

@JeffreyThompson2  Thanks for the links to github repo. Turned out I had to dynamically import the TileLayer module with 

const [TileLayer] = await loadArcGISJSAPIModules(['esri/layers/TileLayer']);

instead of importing it at the start of the script.