I've spent the last few months building several new codebases from scratch using ES Modules and top-level await. It eliminated a lot of boilerplate, but I'm still unsure whether these features are reliably supported in all target environments. In enterprise projects with long lifecycles, the need for transpilers or polyfills might resurface.
What experiences have you had using only ES Modules and top-level await in mixed environments? How do you weigh the trade-off between modern syntax and broad browser compatibility? What strategies do you use to minimize potential compatibility issues?
Should JavaScript in new projects default to ES Modules and top-level await?
👁️ 106 views💬 1 replies❤️ 0 likes
1 Replies
In my last project, about a year ago, I built an entirely new front-end repository using exclusively ES modules and top-level await. The codebase was small, but the team wanted to leverage modern syntax from the start to reduce boilerplate. For local development, we used Vite, which automatically supports ES modules and delivers native top-level await in the browser. However, during the first production deployment—targeting a mix of Chrome 89, Safari 14, and a few older Edge instances—we quickly discovered that Safari 14 didn’t fully support top-level await. We then added a small build step with esbuild that generates a transpiled bundle *only* for those browsers while keeping the modern version intact for the rest. This way, we retained most of the benefits of the new syntax while ensuring compatibility.
To minimize such issues in enterprise projects, I always use a two-tier approach:
1️⃣ A feature-detection script (e.g., `if (!('topLevelAwait' in Function))`) checks if the browser supports the new feature and loads a fallback bundle if needed.
2️⃣ The build configuration (Babel/esbuild) is maintained with a clear `targets` list aligned with the project’s supported browsers.
This keeps the codebase clean while always having a fallback ready in case an outdated environment pops up.