topic ArcGIS Javascript API 4.27 and D3.js loading gives an error of multipleDefine in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascript API 4.27 and D3.js loading gives an error of multipleDefine

BhavinSanghani — Tue, 05 Sep 2023 16:59:45 GMT

I have created following sample where I am loading ArcGIS Javascript API 4.27 and D3.js (ver 7) using the Script tag.

This gives an error on the console related to multipleDefine.

Any idea how to avoid the conflict of the class names between the libraries?

If I change the order of loading where D3.js is loaded first and then ArcGIS Javascript API 4.27.,The map is loaded successfully in that case. However, I believe it may fail in some other part of the code with D3.js.

What is a best practice to write this code so it doesn't create any conflict with ArcGIS Javascript API?

Re: ArcGIS Javascript API 4.27 and D3.js loading gives an error of multipleDefine

JoelBennett — Tue, 05 Sep 2023 17:46:03 GMT

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>

Re: ArcGIS Javascript API 4.27 and D3.js loading gives an error of multipleDefine

JoelBennett — Tue, 05 Sep 2023 17:47:38 GMT

Cancel that...it actually doesn't help. I thought it was working with the order of the script tags reversed, but I was wrong.