Vite build with 4.28 has issues with webkit (iOS safari/chrome)

[BryanMc]

I'm describing an issue beyond my abilities at this point. I'm upgrading my app: ArcGIS Maps SDK 4.27 (4.27.6) application to 4.28 (4.28.10) and hit a very odd issue. The app is built with Vite.js 4.5 (Node 18) using the ArcGIS SDK's ES Modules. Just a basic html/javascript app being built there and copied to the webserver.

When I use Vite build with 4.27 everything works fine on all browser environments. When building with 4.28, I noticed a graphics layer would not add (to draw some graphics) on iOS Safari and iOS Google Chrome (WebKit) using iOS 17.1.2. Well, all graphics layers wouldn't add. The error  for each states "Esri.view.LayerViewManager failed to create layerview for layer....". The details of the error are all blank (layerview-create-error wasn't much help).

I was digging into possible issues with the layer not being ready, etc - however the layer is being added after map is loaded (and verified), with everything fine when using 4.27.

My thought is that there is a dependency leveraged in 4.27 that isn't referenced with 4.28 (or missing for graphics layers, or layers in general), that only iOS Webkit was relying on. However, this is where I'm now out of my depths (no pun intended). Doesn't happen when just in dev mode (vite dev), but happens with Vite Build. But rebuilding on 4.27 again works, deleting and installing all modules 4.27 works too. But same steps continue to not work with 4.28. Only for adding of layers - main map works.

[AndyGup]

Hi@BryanMc  can you reproduce this outside of Vite in a vanilla JS app using the ArcGIS ESM CDN? Also, we'll need a github repo or stackblitz so we can try to reproduce the issue. Reference: https://github.com/Esri/jsapi-resources/blob/main/TROUBLESHOOTING.md

[BryanMc]

Thank you @AndyGup. I tried a quick app using the ArcGIS ESM CDN and everything works. I did a simple app test with Vite and it works too. My larger app is fine until I change the ArcGIS SDK version, but could be due to many other factors outside of this I guess. Appreciate your time and helpful reference docs as well. If I ever isolate the issue I'll post in here if relevant.

[EirikH]

@BryanMc Did you ever find a solution? Care to share what it was in your case? Seeing something similar where a layerview-create event is never received on iOS.

[BryanMc]

Hi @EirikH , Sadly didn't find an easy solution. I'm still using Vite but had to change Esri JS from ESM to AMD, then everything worked. I'm still using ESM imports for everything else, just not the Esri bits. It would be too much work to switch to newer @arcgis/core components at this point since it is a decent sized app. ESM with 4.27 still works, but not 4.28 (for this specific issue). AMD works with both 4.27 and 4.28, and we needed a fix that was in 4.28.

I haven't tested on the newer 4.31 yet, but did notice it's the last release for the AMD npm packages.  Webkit is a PITA for compatibility and testing so AMD for now but hoping ESM will be more successful in the future.

[JoeBessette · Accepted solution]

I've recently encountered the same issue with Vite using the 4.28 ESM modules. I was able to track it down to Safari not supporting top level awaits in modules. By reconfiguring Vite to not use top level awaits, and refactoring our code accordingly, the issue was resolved.

// vite.config.js

    esbuild: {

        supported: {

          'top-level-await': false

        },

    }

See 242740 – [JSC] ReferenceError when multiple modules are simultaneously importing a module containing...

[AndyGup]

@JoeBessettecan you clarify, are these top-level awaits in your custom code? And what version of Safari? It would be great if you can provide a simple repro app/project, otherwise not much troubleshooting we can do.

[BryanMc]

Hi @JoeBessette , Thank you for posting this information. Could you elaborate on what other types of refactoring were required? I'll try to find an old git commit I can also test this on.

[JoeBessette]

@BryanMc, We had three Lit web component modules which were using top-level awaits to precache image assets for UI elements that were not map related. Refactoring those modules to move the caching out of the top level into a loading function, and changing the Vite config as described, seems to have resolved it.