arcgis Failed to load layer: Cannot read properties of undefined (reading 'bind')

Question

I'm trying to query a public ArcGIS server using a some a node script in Typescript but I'm getting the error:

[esri.layers.FeatureLayer] #load() Failed to load layer (title: 'Subway tcl stations center wgs84', id: '180b472baf2-layer-0') {
  error: TypeError: Cannot read properties of undefined (reading 'bind')
      at H (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/request.js:5:3006)
      at C (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/request.js:5:1588)
      at l._fetchService (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/graphics/sources/FeatureLayerSource.js:5:7865)
      at load (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/graphics/sources/FeatureLayerSource.js:5:2197)
      at load (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/core/Loadable.js:5:999)
      at l.createGraphicsSource (file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/FeatureLayer.js:5:13567)
      at async file:///home/cheezsteak/Code/Typescript/arcgis-query/node_modules/@arcgis/core/layers/FeatureLayer.js:5:7341
      at async Promise.all (index 2)
}

The relevant code is:

package.json

{
  "name": "arcgis-query",
  "version": "0.0.0",
  "main": "./src/main.ts",
  "type": "module",
  "license": "GPL",
  "private": true,
  "dependencies": {
    "@arcgis/core": "^4.23.7",
    "typescript": "^4.6.3"
  },
  "scripts": {
    "build": "tsc",
    "start": "node ./out/main.js"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "rootDir": "src",
    "moduleResolution": "node",
    "outDir": "./out",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

src/main.ts

import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Query from '@arcgis/core/rest/support/Query.js'
import SpatialReference from '@arcgis/core/geometry/SpatialReference.js'

const main = async (): Promise<void> => {
  const url: string =
    'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0'
  const featureLayer = new FeatureLayer({ url })
  const query = new Query({
    outSpatialReference: SpatialReference.WGS84,
  })
  const featureSet = await featureLayer.queryFeatures(query)
  console.log('Feature Set', featureSet)
}

main()

Run with yarn install && yarn build && yarn start and I get the error above.

If I insert await featureLayer.load() before querying I get the same error.

The "undefined 'bind'" message implies to me that it's trying display the feature layer to somewhere, but I haven't told it where yet, because I don't want to display it at all. This is strictly a console application.

---

update: Typescript isn't the issue. It seems to be running arcgis code in node that's the problem. If I translate src/main.ts to src/main.js like so:

import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import Query from '@arcgis/core/rest/support/Query.js'
import SpatialReference from '@arcgis/core/geometry/SpatialReference.js'

const main = () => {
  const url =
    'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0'
  const featureLayer = new FeatureLayer({ url })
  const query = new Query({
    outSpatialReference: SpatialReference.WGS84,
  })
  featureLayer.queryFeatures(query).then(featureSet => {
    console.log('Feature Set', featureSet)
  })
}
main()

and run with node src/main.js I get the same error.

Answer 1

It looks like the library I was using is strictly for in-browser usage. I should've been using @esri/arcgis-rest-feature-service instead.

package.json

{
  "name": "arcgis-query",
  "version": "0.0.0",
  "main": "./src/main.ts",
  "type": "module",
  "license": "GPL",
  "private": true,
  "dependencies": {
    "@esri/arcgis-rest-feature-service": "^4.0.3",
    "@esri/arcgis-rest-portal": "^4.0.3",
    "@esri/arcgis-rest-request": "^4.0.3",
    "typescript": "^4.6.3"
  },
  "scripts": {
    "build": "tsc",
    "start": "node ./out/main.js"
  }
}

src/main.ts

import * as arcgisRest from "@esri/arcgis-rest-request"
import * as arcgisRestFeatureService from "@esri/arcgis-rest-feature-service"

const main = async (): Promise<void> => {
  const url: string =
    'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0'
  const featureSet = await arcgisRestFeatureService.queryFeatures({
    url
  })
  console.log('Feature Set', featureSet)
}

main()

Answer 2

Just to prove that the code should work. I use another service that has less features in order to work easy.

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/rest/support/Query",
        "esri/geometry/SpatialReference"
      ], (
        Map,
        MapView,
        FeatureLayer,
        Query,
        SpatialReference
      ) => {
        // Carbon storage of trees in Warren Wilson College.
        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
        });

        let query = featureLayer.createQuery({
          outSpatialReference: SpatialReference.WGS84
        });
        featureLayer.queryFeatures(query)
          .then(function(response){
            console.log(response);
            document.getElementById("response").innerText = JSON.stringify(response.features);
          });
      });
    </script>
  </head>

  <body>
    <div id="response"></div>
  </body>
</html>