Removing devtool option from webpack config is causing webgl errors in production

[gamreddy]

Hi,
Removing devtool:'eval' from extra-webpack.config.js (webpack configuration) for production release is causing webgl errors when using featureReduction property on FeatureLayer.

Errors in browser console:
WebGL: INVALID_ENUM: texImage2D: invalid type
WebGL: INVALID_ENUM: texSubImage2D: invalid type

Following is my initializeMap() method in esri-map.component.ts:
async initializeMap() {

const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.15/";
const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;

esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL;
esriConfig.workers.loaderConfig = {
  baseUrl: `${DEFAULT_WORKER_URL}dojo`,
  packages: [
    { name: "esri", location: `${DEFAULT_WORKER_URL}esri` },
    { name: "dojo", location: `${DEFAULT_WORKER_URL}dojo` },
    { name: "dojox", location: `${DEFAULT_WORKER_URL}dojox` },
    { name: "dstore", location: `${DEFAULT_WORKER_URL}dstore` },
    { name: "moment", location: `${DEFAULT_WORKER_URL}moment` },
    { name: "@dojo", location: `${DEFAULT_WORKER_URL}@dojo` },
    {
      name: "cldrjs",
      location: `${DEFAULT_WORKER_URL}cldrjs`,
      main: "dist/cldr"
    },
    {
      name: "globalize",
      location: `${DEFAULT_WORKER_URL}globalize`,
      main: "dist/globalize"
    },
    {
      name: "maquette",
      location: `${DEFAULT_WORKER_URL}maquette`,
      main: "dist/maquette.umd"
    },
    {
      name: "maquette-css-transitions",
      location: `${DEFAULT_WORKER_URL}maquette-css-transitions`,
      main: "dist/maquette-css-transitions.umd"
    },
    {
      name: "maquette-jsx",
      location: `${DEFAULT_WORKER_URL}maquette-jsx`,
      main: "dist/maquette-jsx.umd"
    },
    { name: "tslib", location: `${DEFAULT_WORKER_URL}tslib`, main: "tslib" }
  ]
};    

// Configure the Map
const mapProperties = {
  basemap: this._basemap
};

const map = new Map(mapProperties);

const citiesRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    size: 5,
    color: [0, 244, 255, 1]
  }
};
const featureReduction: any = {
  type: "cluster",
  clusterRadius: "100px",
  popupTemplate: {
    // cluster_count is an aggregate field indicating the number
    // of features summarized by the cluster
    content: "This cluster represents {cluster_count} earthquakes."
  },
  // You should adjust the clusterMinSize to properly fit labels
  clusterMinSize: "24px",
  clusterMaxSize: "60px",
  labelingInfo: [{
    // turn off deconfliction to ensure all clusters are labeled
    deconflictionStrategy: "none",
    labelExpressionInfo: {
      expression: "check: Text($feature.cluster_count, '#,###')"
    },
    symbol: {
      type: "text",
      color: "#004a5d",
      font: {
        weight: "bold",
        family: "Noto Sans",
        size: "12px"
      }
    },
    labelPlacement: "center-center",
  }]
}
const citiesLayer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
  renderer: citiesRenderer as any,
  definitionExpression: "adm = 'United States of America'",
  featureReduction: featureReduction
});
map.add(citiesLayer);

// Initialize the MapView
const mapViewProperties = {
  container: this.mapViewEl.nativeElement,
  center: this._center,
  zoom: this._zoom,
  map: map
};

this._view = new MapView(mapViewProperties);

// wait for the map to load
await this._view.when();
return this._view;

}

Thanks

[andygup]

Try updating to 4.17 or even better is switch over to using our ES modules build => https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli.

Reference: https://developers.arcgis.com/javascript/latest/guide/es-modules/

[andygup]

Oh wait, sorry! I was able to reproduce this with our ESM build running @arcgis/core 4.19.0-next.20210119. This is a larger issue within the JS API. I'll open a bug report.

[gamreddy]

Andy,
This seems to be an issue only with jsapi-angular-cli. FeatureLayer FeatureReduction works fine with webpack.

Also, I had to change the following lines in my code:
labelExpressionInfo: {
expression: "check: Text($feature.cluster_count, '#,###')"
}
to:
labelExpressionInfo: {
expression: "Text($feature.cluster_count, '#,###')"
}

--Thanks

[andygup]

Yep, thanks. We think there's a problem when using the JS API with Angular + webpack + terser when creating production builds. There's a compression variable setting in the terser library that's causing some functions to flatten during the uglify step and then the optimizer sets them to null.

[andygup]

@gamreddy to fix the WebGL errors try setting buildOptimizer: false in angular.json. We have it fixed for 4.19 (in April) but that setting will give you a temporary workaround.

[gamreddy]

Andy, build size has more than tripled with that setting.

[andygup]

An increase in on-disk size is expected. Did it affect the size of the initial API load in the app?

[gamreddy]

Andy, size change in the initial API load seems negligible.