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

Question

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

https://codepen.io/b2810s/pen/NWebbze

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?

JoelBennett · Answer

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

JoelBennett · Answer

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. Load a basic WebMap | Sample | ArcGIS Maps SDK for JavaScript 4.26