Right-hand side of 'instanceof' is not callable [JavaScript API (v 4.33)]

[AllenJeff]

I'm just getting started with using the JavaScript API (v 4.33). 

I'm creating a winter hazard report form for use by anyone that visits our campus. The user is supposed to be able to click on a location on a map in the form. This is supposed to update the values for the latitude and longitude fields on the form with the latitude and longitude for the area on the map where they clicked. Instead of updating the fields as expected, the form is throwing the error I have in the subject. I know the issue is in the click handler for the view, but I'm not sure how to fix it. I'm also not sure if there is a better way to structure how I'm making all of the necessary calls.

 View the sample form in development 

Here's the JavaScript I'm using:

require([
	"esri/Map",
	"esri/views/MapView",
	"esri/Graphic",
	"esri/layers/GraphicsLayer",
	"esri/geometry/Point",
	"esri/symbols/SimpleMarkerSymbol"
], function(Map, MapView, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol) {
	
	const map = new Map({
		basemap: "satellite" // You can choose other basemaps like "topo-vector", "satellite", "streets-navigation-vector" etc.
	});

	const view = new MapView({
		container: "viewDiv",
		map: map,
		center: [-89.568881, 44.523497], // Longitude, latitude
		zoom: 18 // Zoom level
	});
	
	// Create a graphic layer to hold the pin
	const graphicsLayer = new GraphicsLayer();
	map.add(graphicsLayer);
	
	// Define the pin's coordinates
	const point = new Point({
		longitude: -89.568881,
		latitude: 44.523497,	
	});

    // Define the pin's symbol (a simple red circle in this case)
	const markerSymbol = new SimpleMarkerSymbol({
	  color: [226, 119, 40], // Orange
	  outline: {
		 color: [255, 255, 255], // White
		 width: 1
	  }
	 });

	// Create a Graphic with the point and symbol
	const pinGraphic = new Graphic({
		geometry: point,
		symbol: markerSymbol
	});

	// Add the pin graphic to the graphics layer
	graphicsLayer.add(pinGraphic);

	// Add a click event to add new pins
	view.on("click", function(event) {
	  const newPinGraphic = new Graphic({
		geometry: newPoint,
		symbol: markerSymbol
	  });
	  graphicsLayer.add(newPinGraphic);
	  
	  // Get the latitudena nd longitude fields on the form
	  const lonControl = document.querySelector('input[name$="Longitude"]');
	  const latControl = document.querySelector('input[name$="Latitude"]');
	  
	  // Assign the values to the form fields
	  lonControl.value = event.mapPoint.longitude;
	  latControl.value = event.mapPoint.latitude;
	});
});

Thanks

[Sage_Wall]

Hi @AllenJeff ,

It looks like the `newPoint` geometry isn't defined.  I'm not sure but this seems to be the most likely cause of any errors.

If this is a new application I'd highly encourage you to use our web components and new coding patterns.  I took the liberty of creating this codepen that shows how a similar workflow could be done with our web components.

https://codepen.io/sagewall/pen/KwzbZaq?editors=1010

[AllenJeff]

Thank you for the pen. Ever since I originally posted that I have been trying to use the components but not with much success I am afraid.

I'm trying to create form where students/faculty/staff/visitors can click on a spot on the map to report a hazardous condition like icy sidewalks, potholes, etc, on campus and send it to our facilities staff. I'm working inside a "low/no code ASP.NET Webform-based" electronic form software mandated by our university system, where unfortunately I don't have direct access to the masterpage, and so can't include the https://js.arcgis.com/4.31/ script reference directly as suggested by an earlier post. 

Because of this, I am currently using a JS-based load script I wrote to append the CSS file, the calcite.ems.js file as a module, the https://js.arcgis.com/4.31/ script reference, and the map-components.js file as a module to the head of the form. I can run my load script to add those files either during the initial form creation, on viewstate init, or after the form has displayed. 

I've got tons of experience using the electronic form software, but this is the first electronic form I've had to create where I have to inject things into he head on display and that also includes a map the user can interact with. Right now it seems like no matter when I insert those files into the head and I'm declaring the components in my local script module like this:

const [Map,MapView,Graphic,GraphicsLayer,Point,SimpleMarkerSymbol] = await $arcgis.import([ "@arcgis/core/Map.js", "@arcgis/core/views/MapView.js", "@arcgis/core/Graphic.js", "@arcgis/core/layers/GraphicsLayer.js", "@arcgis/core/geometry/Point.js", "@arcgis/core/symbols/SimpleMarkerSymbol.js", ]);

When I run the form I either get an error in the console like "$arcgis is not defined "or another error I commonly run into is:
"Error: scriptError: https://js.arcgis.com/4.31/esri/applications/Components/reactiveUtils.js
  q https://js.arcgis.com/4.31/:6
  Za https://js.arcgis.com/4.31/:30
"

And I'm not sure what else I can do in either case.

So far I've been able to make the form work by creating an HTML page that functions like I want with all the necessary references to the arcgis resources using widget references, and then embed that HTML form into a iframe within the low/no code form generated by the software and then the user can interact with the map and for all intents and purposes the form functions as expected, meaning it works, but it's not how I'd like to do it.

Any suggestions for what else i can try?

[Sage_Wall]

Hi @AllenJeff ,

We didn’t introduce $arcgis.import until version 4.33. Before that, module imports relied on the AMD require. It’s possible that $arcgis.import was  in 4.31, but it likely wasn’t ready for production use at that point. You can check out the release notes for $arcgis.import  here: https://developers.arcgis.com/javascript/latest/4.33/#modernize-with-arcgisimport

I recommend updating your code to use the latest 4.34 imports. Hopefully, that resolves the issue with your inject script. Since I’m not familiar with your exact setup, it’s hard to provide specific guidance. Many customers use embedded web pages with iframes in similar scenarios, so you’re not alone.

We also offer an embedded map component , but it’s primarily intended for displaying a preconfigured web map with a few optional UI components. It likely will not provide all the functionality your app requires.

I’ll check with the team to see if anyone has additional ideas on what might be happening.