[esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference

[YogeshSwami]

I am trying to implement a drag and drop functionality for a polygon sketch and getting this error while doing so:

 [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.geometry.SpatialReference' which is not a subclass of 'esri.geometry.SpatialReference'

I am able to achieve the functionality but my console gets flooded with this error.

Here is what i wrote about spatial reference:

         const footMap2 = new Map({

            basemap: "satellite", // Basemap layer service

            layers: [graphicsLayer]

        });

        const view2 = new MapView({

            map: footMap2,

            center: [long,lat]

            zoom: 20,

            container: footMap2container, // Div element

        });

       

        view2.when(() => {

            addGraphics();

            const obj: any = {

                view: view2,

                layer: graphicsLayer,

                updateOnGraphicClick: false,

                snappingOptions: { 

                    enabled: true,

                    featureSources: [{ layer: graphicsLayer, enabled: true }]

                }

            }

            const sketch: any = new Sketch(obj)

            sketch.on("update", (event: any) => {

                if (event.state === "complete") {

                    const updatedLatLng: any = [];

                    const xyPoints = event.graphics[0].geometry.rings[0];

                    xyPoints.forEach((point: any) => {

                        const result = webMercatorUtils.xyToLngLat(point[0], point[1]);

                        updatedLatLng.push(result);

                    });

                }

            });

        });

        // Add new development polygon graphic and boundary polygon graphics

        const addGraphics = () => {

            const vertices: any = [];

            const latlngvertices = this.updateLatLong(this.footPrintData.footprint_data);

            latlngvertices.forEach((point: any) => {

                const result = webMercatorUtils.lngLatToXY(point[0], point[1]);

                vertices.push(result);

            });

            const polygon: any = {

                type: "polygon",

                rings: vertices,

                spatialReference: view2.spatialReference

            };

            const validSymbol: any = {

                type: "simple-fill",

                style: "solid",

                color: "#4472c4",

                outline: {

                    color: "white",

                    width: 2

                }

            };=

            const newDevelopmentGraphic = new Graphic({

                geometry: polygon,

                symbol: validSymbol

            });

            graphicsLayer.addMany([newDevelopmentGraphic]);

        }

    }

and after running this, i am getting this error when I hover over map outside the polygon:

Can someone please help?

[ReneRubalcava]

Sample application please. 

[ReneRubalcava]

I should note, this can happen if you are using two different versions of the API for some reason, or mixing npm with the CDN. This can also happen in some monorepo use cases as well.

[YogeshSwami]

Hello,

I have updated the question by including more sample code. Please check it once and see if there is a solution for resolving this error.

Thanks in advance.

[bogind]

This is a bit silly, but from your code it looks like you need to replace the way you defined your  polygon geometry from this:

const polygon: any = {
                type: "polygon",
                rings: vertices,
                spatialReference: view2.spatialReference
            };

to this:

const polygon: any = {
                type: "polygon",
                rings: vertices,
                spatialReference: {wkid:3857} // for example, it can be another CRS that you want to use
            };

It seems that the API handles casting the object better than getting a SpatialRefernce object

https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Geometry.html#spatialRef...