Has anyone else run into the issue in Safari (macOS and iOS) related to top level awaits in modules? This post is less of a question and more of a heads up about a known issue with top level await - https://caniuse.com/?search=top+level+await .
I recently ran into the problem while trying to refactor one of our applications to use and import JavaScript modules. If you're using an imported module in your main JavaScript file, the SDK modules imported via await $arcgis.import() will fail if the await statement is at the top level in Safari on macOS and iOS.
// main.js
import { method } from "./imported_module.js";
// imported_module.js
// if await await $arcgis.import is at the top
// level of imported_module.js it will fail
const [Map, Basemap, FeatureLayer] = await $arcgis.import([
"@arcgis/core/Map.js",
"@arcgis/core/Basemap.js",
"@arcgis/core/layers/FeatureLayer.js"
]);
I was able to workaround this issue by either passing in SDK modules as arguments from the main JavaScript file or wrapping the await $arcgis.import() in an async function.
// imported_module.js
// either wrap await await $arcgis.import in an
// async function or pass Esri SDK modules as parameters
// from main.js
async function _createMap(otherParams) {
const [Map, Basemap, FeatureLayer] = await $arcgis.import([
"@arcgis/core/Map.js",
"@arcgis/core/Basemap.js",
"@arcgis/core/layers/FeatureLayer.js"
]);
}
function _createMap(otherParams, Map, Basemap, FeatureLayer) {
// next method, logic, etc.
}
Hopefully this helps anyone else that encounters the issue and can add to coding best practices when using the Esri SDK.
