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?

Question

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 featureLayer = new FeatureLayer({ 
        url: layerUrl
      });
      
        console.log(featureLayer)

      try {
        await featureLayer.load();
        console.log(featureLayer); 
        mapView.map.add(featureLayer);
      } 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?

Answer 1

Turns out I had to dynamically import the FeatureLayer module within handleAdd method with

const [TileLayer] = await loadArcGISJSAPIModules(['esri/layers/TileLayer']); instead of importing it at the start of the script.

Very useful example that led me to the solution and many more can be found in this github repo.