"}],"short_description":"Learn how $arcgis.import() provides a modern, promise-based approach to loading ArcGIS SDK modules from CDN with future ES module support.","flexible_content":[{"acf_fc_layout":"content","content":"The JavaScript module landscape continues to evolve rapidly. While AMD served CDN-based vanilla JavaScript applications well, ES modules<\/a> are now considered the standard for web-based applications. For example, TypeScript has announced plans to deprecate AMD output<\/a> in the future, signaling this broader industry trend.<\/p>\n For developers using the ArcGIS Maps SDK for JavaScript<\/a> via CDN, this shift brings both opportunities and important considerations.<\/p>\n With version 4.32 of the Javascript Maps SDK, we introduced For new CDN-based applications, we recommend using The JavaScript Maps SDK supports three primary consumption patterns:<\/p>\n You can install Load the SDK directly from the Esri CDN using the legacy AMD format and the If you’re developing your application using the AMD modules or an AMD build tool, it is recommended to migrate to using $arcgis.import() or ES modules and modern build tools.\u00a0 See our guide to get started.<\/p>\n Note that it uses the Unlike the traditional AMD-based apps that rely on global Load a single module:<\/strong><\/p>\n Load multiple modules together:<\/strong><\/p>\n Dynamic module loading <\/strong>ensures that the module is only loaded when needed, improving the initial loading performance of the application. In this example, the FeatureLayer module is loaded dynamically when the user clicks a button. Conditional module loading<\/strong> enables different modules based on runtime conditions. For example, loading different layers based on map zoom level:<\/p>\n If you’re using the CDN with The migration is straightforward:<\/p>\n Next steps<\/strong><\/p>\n Looking Forward<\/strong><\/p>\n<\/div>\n Whether you’re maintaining a legacy application or building the next big civic mapping tool, Let us know how you’re using Further reading<\/strong><\/p>\n$arcgis.import()<\/code>, a promise-based API for loading SDK modules in applications built with the CDN<\/strong>. When compared to callback-based AMD approaches, it provides a cleaner syntax for implementing lazy loading patterns<\/strong> like dynamic and conditional module loading. It works seamlessly with modern async\/await<\/code> patterns while maintaining full compatibility with existing AMD-based applications. It is also designed\u00a0to transparently support ES modules <\/strong>in the future\u00a0with zero code changes required.<\/p>\n$arcgis.import()<\/code> for module loading. While require()<\/code> will continue to be supported, $arcgis.import()<\/code> is the preferred and future facing approach.<\/p>\nIn this post, you\u2019ll learn:<\/h3>\n
\n
$arcgis.import()<\/code> compares to traditional require()<\/code> patterns<\/li>\nCurrent Module Loading Patterns<\/h2>\n
NPM + Build Tools (ESM)<\/h3>\n
@arcgis\/core<\/code> via\u00a0NPM and use standard ES module syntax with bundlers like Vite, Webpack, or Rollup. Modern frameworks like React, Vue, Svelte, and Angular follow this path, which is already fully ESM.<\/p>\n\r\nimport<\/span> WebMap<\/span> from<\/span> \"@arcgis\/core\/WebMap.js\"<\/span>;\r\nimport<\/span> FeatureLayer<\/span> from<\/span> \"@arcgis\/core\/layers\/FeatureLayer.js\"<\/span>;\r\n\r\n<\/code><\/pre>\nCDN with require()<\/h3>\n
require()<\/code> function. This continues to be supported but has limitations when it comes to modern JavaScript workflows, especially around code-splitting and dynamic import patterns.<\/p>\n\r\n<script<\/span> src<\/span>=\"https:\/\/js.arcgis.com\/4.33\/\"<\/span>><\/script<\/span>>\r\n<script<\/span>>\r\n require<\/span>([\"esri\/WebMap\"<\/span>, \"esri\/layers\/FeatureLayer\"<\/span>], function<\/span> (WebMap, FeatureLayer) {\r\n const<\/span> map = new<\/span> WebMap<\/span>({ basemap<\/span>: \"topo-vector\"<\/span> });\r\n const<\/span> layer = new<\/span> FeatureLayer<\/span>({ url<\/span>: \"https:\/\/services.arcgis.com\/P3ePLMYs2RVChkJx\/arcgis\/rest\/services\/ACS_Housing_Tenure_by_Heating_Fuel_Boundaries\/FeatureServer\/1\" <\/span>});\r\n });\r\n<\/script<\/span>>\r\n\r\n<\/code><\/pre>\nCDN with $arcgis.import<\/h3>\n
$arcgis.import()<\/code>is a CDN-hosted only, a promise-based module loader <\/strong>built directly into the SDK. It accepts a single module, or an array of module paths and returns a promise that resolves to the loaded modules.<\/p>\n\r\n<script<\/span> type<\/span>=\"module\"<\/span>>\r\n const<\/span> [Map<\/span>, FeatureLayer<\/span>] = await<\/span> $arcgis.import<\/span>([\r\n \"@arcgis\/core\/Map.js\"<\/span>,\r\n \"@arcgis\/core\/layers\/FeatureLayer.js\"<\/span>\r\n ]);\r\n\r\n const<\/span> map = new<\/span> Map<\/span>({ basemap<\/span>: \"topo-vector\"<\/span> });\r\n const<\/span> layer = new<\/span> FeatureLayer<\/span>({ url<\/span>: \"https:\/\/services.arcgis.com\/P3ePLMYs2RVChkJx\/arcgis\/rest\/services\/ACS_Housing_Tenure_by_Heating_Fuel_Boundaries\/FeatureServer\/1\" <\/span>});\r\n<\/script<\/span>>\r\n\r\n<\/code><\/pre>\n@arcgis\/core\/<\/code> ES modules path format instead of the traditional esri\/<\/code> AMD paths.<\/p>\nrequire()<\/code> function, $arcgis.import()<\/code>, does not need any global imports. It works seamlessly in modern module environments.<\/p>\nBasic Usage Patterns<\/h3>\n
\r\n<script<\/span> type<\/span>=\"module\"<\/span>>\r\nconst<\/span> Graphic<\/span> = await<\/span> $arcgis.import<\/span>(\"@arcgis\/core\/Graphic.js\"<\/span>);\r\n\r\nconst<\/span> graphic = new<\/span> Graphic<\/span>({ \/* ... *\/<\/span> });\r\n<\/script<\/span>>\r\n\r\n<\/code><\/pre>\n\r\n<script<\/span> type<\/span>=\"module\"<\/span>>\r\nconst<\/span> [Map<\/span>, Multipoint<\/span>, FeatureLayer<\/span>] = await<\/span> $arcgis.import<\/span>([\r\n \"@arcgis\/core\/Map.js\"<\/span>,\r\n \"@arcgis\/core\/geometry\/Multipoint.js\"<\/span>,\r\n \"@arcgis\/core\/layers\/FeatureLayer.js\"<\/span>\r\n]);\r\n<\/script<\/span>>\r\n\r\n<\/code><\/pre>\nLazy Loading Scenarios<\/h3>\n
$arcgis.import()<\/code>\u00a0provides cleaner syntax for dynamic and conditional module loading patterns compared to the callback-based AMD approaches. This level of flexibility is hard to achieve with traditional AMD require<\/code> blocks.<\/p>\n
\n<\/strong><\/p>\n\r\n<script<\/span> type<\/span>=\"module\"<\/span>>\r\n document<\/span>.getElementById<\/span>(\"loadButton\"<\/span>).addEventListener<\/span>(\"click\"<\/span>, async<\/span> () => {\r\n const<\/span> FeatureLayer<\/span> = await<\/span> $arcgis.import<\/span>(\"@arcgis\/core\/layers\/FeatureLayer.js\"<\/span>);\r\n const<\/span> layer = new<\/span> FeatureLayer<\/span>({ url<\/span>: \"https:\/\/services.arcgis.com\/...\"<\/span> });\r\n map.add<\/span>(layer);\r\n });\r\n<\/script<\/span>>\r\n<\/code><\/pre>\n\r\n<script<\/span> type<\/span>=\"module\"<\/span>>\r\n const<\/span> Map<\/span> = await<\/span> $arcgis.import<\/span>(\"@arcgis\/core\/Map.js\"<\/span>);\r\n\r\n view.watch<\/span>(\"zoom\"<\/span>, async<\/span> (zoom) => {\r\n if<\/span> (zoom > 10<\/span>) {\r\n const<\/span> FeatureLayer<\/span> = await<\/span> $arcgis.import<\/span>(\"@arcgis\/core\/layers\/FeatureLayer.js\"<\/span>);\r\n \/\/ Load city-level layer<\/span>\r\n } else<\/span> {\r\n const<\/span> GraphicsLayer = await<\/span> $arcgis.import<\/span>(\"@arcgis\/core\/layers\/GraphicsLayer.js\"<\/span>);\r\n \/\/ Load country-level layer<\/span>\r\n }\r\n });\r\n<\/script<\/span>>\r\n<\/code><\/pre>\nMigration Path<\/h2>\n
require()<\/code>, now is a good time to start using $arcgis.import()<\/code>. It coexists with require()<\/code>, so you can migrate incrementally.<\/p>\n\n
require()<\/code> callbacks with await $arcgis.import()<\/code><\/li>\ntype=\"module\"<\/code> to script tags<\/li>\n\n
$arcgis.import()<\/code> in your CDN-based apps<\/li>\n$arcgis.import()<\/code> bridges current AMD patterns with future ES module support.<\/p>\n$arcgis.import()<\/code> in your apps and what you’d like to see next<\/p>\n\n