Explicitly defining the paths to the esri modules prior to loading the frameworks appears to alleviate the problem. You can do this via the global "esriConfig" property as shown below (lines 17-29, particularly line 26). It has the same properties as dojoConfig...and you can even rename "esriConfig" to "dojoConfig" if you so desire; it works the same.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Load a basic WebMap | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script type="text/javascript">
window.esriConfig = {
async: true,
cacheBust: "0.0.0",
has: {},
isDebug: true,
locale: "en-us",
parseOnLoad: false,
packages: [
{name:"esri", location:"https://js.arcgis.com/4.27/esri"}
]
};
</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["esri/views/MapView", "esri/Map", "esri/request"], function (MapView, Map, esriRequest, MapImageLayer) {
const mapService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer";
const options = {query: {f:'json'}, responseType: 'json'};
let mapView = null, map = null;
esriRequest(mapService, options).then(loadMap, function(errors) {
console.log(errors);
});
function loadMap(mapServiceResponse) {
map = new Map({basemap: 'streets-vector'});
mapView = new MapView({
map: map,
container: "viewDiv",
zoom: 10,
center: [-100, 35]
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
