Select to view content in your preferred language

ArcGIS SDK > 4.15 MapView is not a constructor

1496
9
06-22-2023 02:40 PM
GavinBoyd
New Contributor II

The below code works when launched when created as an html page in notepad. However, once I try to deploy as part of a Asp.net Core project it will not display unless i change the Arcgis SDK down to 4.15. Anything greater than SDK 4.16 will not work. Can't find any reason for this on the web. Below code returns error: Uncaught TypeError: MapView is not a constructor.

```
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.27/"></script>


<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<script>

require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Editor"], (
WebMap,
MapView,
Editor
) => {
// Create a map from the referenced webmap item id
const webmap = new WebMap({
portalItem: {
id: "4793230052ed498ebf1c7bed9966bd35"
}
});

const view = new MapView({
container: "viewDiv",
map: webmap
});

view.when(() => {
const editor = new Editor({
view: view
});

// Add the widget to the view
view.ui.add(editor, "top-right");
});
});

</script>

<div id="viewDiv"></div>

```

 

9 Replies
JoelBennett
MVP Regular Contributor

You may be able to resolve this conflict by moving your two script tags to the bottom of the document (e.g. just before the closing tag for the body).

0 Kudos
GavinBoyd
New Contributor II

Thanks for the comment @JoelBennett . By moving <script src="https://js.arcgis.com/4.27/"></script> just above the div it eliminates the constructor error but then I get the following error:

Uncaught ReferenceError: require is not defined

0 Kudos
JoelBennett
MVP Regular Contributor

It sounds like you may have reversed the order of your script tags, making what used to be first one now the second.  However, the "shorter" script tag needs to come before the "longer" one.  Basically, you'll have this:

<script src="https://js.arcgis.com/4.27/"></script>
<script>
	require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Editor"], (
	//and the rest of the code
</script>

 

And then you should try moving those two as low in the document as possible (preferably right before the </body> tag).

0 Kudos
GavinBoyd
New Contributor II

Yes, that was a silly error from me, thanks for clarifying. However, it hasn't fixed my problem, unfortunately. The key to my issue lies in how visual studio and or my Asp.Net Core Web App seems to deal with the different js.arcgis.com/4XX versions. The code above works fine with sdk 4.15 but the moment I try to upgrade it to 4.16 or higher it returns the 'not a constructor' error. It is as though visual studio or my app just can't read the sdk reference or the require tags. Any thoughts what might be causing this or a suggested workaround?

0 Kudos
JoelBennett
MVP Regular Contributor

Unfortunately, I don't think I'll be able to offer much else here.  I remember a project a co-worker was working on had an issue resembling this one, and our solution at the time was to do what I described above.  It seemed like some other components on the page had their own version of a "require" function which was causing the conflict, but that's about all I recall.

0 Kudos
GavinBoyd
New Contributor II

No problem. Thank you for trying to help, anyway. Cheers

0 Kudos
GavinBoyd
New Contributor II

Had a hunch that this had something to with my page/view references conflicting js. By doing the following sdk 4.27 is no working.

The way I got around was to comment out this section of the shared Asp.net Core App _layout.cshtml view

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)

As it appears to conflict with any arcgis sdk of higher than 4.15

JDonoghue
New Contributor III

I followed Gavin's advice above and got my map to render just fine. However, commenting out the jquery and bootstrap references  in the_Layout page disabled the other bootstrap objects my app was using. For example, bootstrap tabs and collapse items no longer functioned. Any thoughts or advice? Thanks in advance.

0 Kudos
Steve_
by
New Contributor

I got the same error in an .NET8 ASP.NET Core MVC project and was able to fix it for ArcGIS JS 4.28 by ensuring the ArcGIS script was loaded after bootstrap.

0 Kudos