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>
```
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).
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
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).
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?
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.
No problem. Thank you for trying to help, anyway. Cheers
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
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.
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.