ESRI Error | Cannot read property 'displayId' of undefined

[MKpoa]

[esri.core.workers] ErrorEvent {isTrusted: true, message: "Uncaught TypeError: Cannot read property 'displayId' of undefined", filename: "https://js.arcgis.com/4.20/@arcgis/core/assets/esri/core/workers/chunks/81cc112ecd9129c388d5.js", lineno: 1, colno: 123970, …}

 I got this error when enabling featureReduction for a featureLayer.

new FeatureLayer({
    objectIdField: 'OBJECTID',
    geometryType: 'point',
    source: [],
    fields: [*],
    popupTemplate: {
      outFields: ['*'],
      returnGeometry: true,
      content: (content: any) => {
          return this.createGraphicPopupEl(content.graphic.layer.id, content.graphic.attributes);
      }
    },
 featureReduction: {
type: 'cluster',
 clusterRadius: '20px',
 popupTemplate: {
title: 'Cluster summary',
 content: 'This cluster represents {cluster_count} fenders.',
 fieldInfos: [
{
fieldName: 'cluster_count',
 format: {
places: 0,
 digitSeparator: true,
 },
 },
 ],
 },
 symbol: {
type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
 style: 'circle',
 color: FENDER_COLOR,
 size: '10px', // pixels
 outline: {
color: [ 0, 0, 0, 0 ],
 },
 },
 clusterMinSize: '20px',
 clusterMaxSize: '30px',
 labelingInfo: [
{
deconflictionStrategy: 'none',
 labelExpressionInfo: {
expression: 'Text($feature.cluster_count, \'#,###\')',
 },
 symbol: {
type: 'text',
 color: [ 255, 255, 255, 1 ],
 font: {
weight: 'bold',
 family: 'Roboto',
 size: '15px',
 },
 },
 labelPlacement: 'center-center',
 },
 ],
}
})

[Chris_K]

@MKpoaI am getting the same error after switching to the 4.20.2v of the API. This happens when adding a client side feature layer with feature reduction clusters to the map.

[JohnGrayson]

Looks like you're creating a FeatureLayer with client-side graphics via the source property. However, you don't specify the fields schema.  Instead of '[*]' try to specify the details about the fields.  Check out the first 'Read more' section in the doc and look for a sub-section called 'Add an array of client-side features' as it contains an example on how to do this. Also, here's a sample.  If that doesn't help, then having a codepen or similar to experience your issue would really help.

[CRSC]

Hi @JohnGrayson, can you please elaborate the solution for the issue?
I have added the demo here - https://codepen.io/CRSC/pen/abwddJy?editors=1000

[JohnGrayson]

As described in the doc, when constructing a client-side Feature Layer you need to specify the field details instead of using:

fields: [*], 

[CRSC]

Hey @JohnGrayson , Thanks for your reply. i tried giving proper fields and checked, still l getting the same issue. here is the codepen demo link. https://codepen.io/CRSC/pen/abwddJy?editors=1000

[RoyJackson_AlertMedia]

Did you resolve this, log a bug, or leave it to someone else (me) to battle 2+ years later?

[JohnGrayson]

Thought it was a different issue.  Yes, I can see the error being thrown when removing the features.  I can't spot anything obvious in this sample, especially since it only happens when we enable feature reduction and only when removing features.  Unless someone else in the community can find a workaround, I think this is probably best handled by logging in a new incident via Tech Support.

[hlipperjohn]

In JavaScript almost everything is an object, null and undefined are exceptions. This error occurs when a property is read or a function is called on an undefined variable. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.

If you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. To avoid getting these types of errors, you need to make sure that the variables you are trying to read do have the correct value. This can be done in various ways. You can do if checks before dealing with objects whose values are bound to change:

if (myVar !== undefined) {
...
}

Or

if (typeof(myVar) !== 'undefined') {
...
}