ESRI Error | Cannot read property 'displayId' of undefined

696
7
08-23-2021 01:26 AM
MKpoa
by
New Contributor
[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',
},
],
}
})
7 Replies
Chris_K
New Contributor

@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.

0 Kudos
JohnGrayson
Esri Regular Contributor

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.

0 Kudos
CRSC
by
New Contributor

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

 

0 Kudos
JohnGrayson
Esri Regular Contributor

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

fields: [*], 

 

0 Kudos
CRSC
by
New Contributor

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

0 Kudos
JohnGrayson
Esri Regular Contributor

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.

0 Kudos
hlipperjohn
New Contributor

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') {
...
}

 

0 Kudos