Allow plugin-legacy to work for target with module support, but without dynamic import #3469
Description
Clear and concise description of the problem
2.3.0 bumped default build targets to dynamic import support and removed polyfill, which introduced some challenges in supporting browsers with modules but without dynamic imports (like edge18 #3388)
2.3.3 brought back the polyfill, but there are still some challenges present as described in this comment
It would be great, if legacy plugin allowed not polyfilling dynamic import (and subsequently not changing default build targets), but instead injected custom code before loading the main bundle, which would check support for the dynamic import, and load the fully-pollyfilled systemjs bundle in browsers, which support modules, but don't support the dynamic import
Suggested solution
Make legacy plugin do the following:
- dot not inject dynamic import polyfill
- detect dynamic import support before loading main "modern" bundle
- if there's no support, instead load legacy "nomodule" bundle even if browser supports modules
Alternative
- transpile main bundle to support edge18 and other browsers without dynamic import (as I understood correctly, there's some kind of issue with esbuild in this case)
- hand-inject special loader code inside index.html after vite's build to check support and load legacy "nomodule" bundle. (this can't be done inside app entry, as main bundle would likely syntax error if dynamic import is used, rendering entire script useless)
Additional context
Seems like properly detecting dynamic import support requires eval, this worked for me in edge18:
function supportsDynamicImport() {
try {
return new Function(
"return import('data:text/javascript;base64,Cg==').then(() => true)"
)();
} catch (e) {
return Promise.resolve(false);
}
}